BG Image maxiblocks

Simplify your site editing with WordPress Gutenberg


Simplify your site editing with WordPress Gutenberg
Simplify your site editing with WordPress Gutenberg

Key takeaways:

Mastering Gutenberg: Your guide to WordPress blocks

Adding new blocks

  1. Navigate to your WordPress admin and open a post or page editor.
  2. Click the “+” button in the top left corner of the editor.
  3. Search for the desired content type.
  4. Select the content to add it to your page.

Configuring advanced block settings

While most blocks offer basic options, some advanced ones like List blocks allow customizing text size, icons, and layout properties like size, line height, margin, and padding.

Rearranging blocks

  1. Select a block to display the toolbar above it.
  2. Use the up/down arrows to move the block one position at a time.
  3. For further rearrangement, click the six-dot icon and drag the block to the desired location.

Embedding media

  1. Click the “+” button and choose “Image” or the appropriate block.
  2. Drag and drop your media or upload it using the “Upload” option.
  3. Utilize alignment tools to position your media.
  4. Configure image size, add captions, and alt tags for accessibility.
  5. Create hyperlinks for additional functionalities.

Keyboard shortcuts

Gutenberg offers keyboard shortcuts for quicker editing. Start with CTRL or a function key, then use specific key combinations for desired actions. For example, Ctrl + C for copying, Ctrl + V for pasting, and Ctrl + Z for undoing.

Switching Back to the Classic Editor: If you prefer the older editor, follow these steps:

  1. Go to your WordPress dashboard. Navigate to “Plugins” > “Add New”.
  2. Search for “Classic Editor” and install it.
  3. Activate the plugin. Go to “Settings” > “Writing”.
  4. Under “Default editor for all users”, choose “Classic Editor”.
  5. Save changes.

Now, whenever you edit a post or page, you’ll encounter the familiar Classic Editor instead of Gutenberg.

How do I download the Gutenberg editor
How do I download the Gutenberg editor

How do I download the Gutenberg editor?

The WordPress website builder has embraced a new content creation tool called the Gutenberg editor, introduced since version 5.0. To access it, simply log in to your WordPress dashboard and navigate to the “Posts” or “Pages” section. Click “Add New” to create a new post/page or select an existing one to edit.

Understanding the difference: Gutenberg core vs. Gutenberg plugin

The difference between Gutenberg core and the Gutenberg plugin lies in their functionality and release schedule:

1. Gutenberg core:

2. Gutenberg plugin:

How to customize blocks in Gutenberg

To customize blocks in Gutenberg, follow these steps:

By utilizing these customization options in the new WordPress website builder, you can personalize the appearance and functionality of your blocks to create visually appealing and engaging content on your WordPress website.

Customizing your sidebar with Gutenberg blocks
Reusable blocks

How to create reusable block templates in the WordPress Gutenberg editor

Create a Reusable Block Select the block you’ll want to reuse. Click on the three dots in the toolbar, and Add to Reusable blocks. Give it a name. Click Publish, and then Save.

How to use Gutenberg navigation block

To use the Gutenberg Navigation Block in the new WordPress website builder, follow these steps:

  • Navigation style: Choose the desired style for your navigation block, such as a horizontal or vertical layout.
  • Menu settings: Configure the menu options, including selecting a specific menu location, choosing the depth of menu items to display, and enabling or disabling dropdown menus.
  • Typography and colours: Customize the font style, size, and colours of the navigation links.
  • Alignment and spacing: Adjust the alignment and spacing of the navigation block within the content area.
  1. Add menu items: To populate your navigation block with menu items, click on the “Edit Menu” button. This will open the WordPress Menu Editor, where you can create a new menu or select an existing menu. Add menu items and arrange them in the desired order by dragging and dropping.
  2. Save and preview: Once you’ve configured the Navigation Block and added your menu items, click on the “Update” or “Save Draft” button to save your changes. You can then preview your post or page to see how the navigation block looks on the front end of your website.

Creating custom templates

Custom blocks and templates give you the flexibility to design and structure your content in a way that meets your specific needs. By utilizing plugins like MaxiBlocks that support custom blocks and templates, you can enhance the functionality and customization options of the new WordPress website builder.

Creating custom blocks with HTML and CSS in WordPress

Adding written content using the Gutenberg editor

Using new WordPress website builder to create written content on a WordPress website offers a range of functionality beyond plain text. With blocks such as paragraphs, images, and customized HTML, you can enhance your content when used appropriately. Clear headings and shorter paragraphs improve readability on blogs, while reusable blocks like block patterns streamline workflow by creating a consistent design. Gutenberg excels in customization, with full-site editing capabilities that provide flexibility in templates and sidebars. Keyboard shortcuts also make formatting quick and easy.

Editing headers using blocks

Add a title using the WordPress Gutenberg editor

To add the Site Title block, click on the Block Inserter icon and search for “Site Title.” You can also type / title on a new line using your keyboard.

Editing images using the WordPress Gutenberg editor

Editing a link in the editor

To edit a hyperlink, select the content block that contains it and click on the link icon. From there, you can edit the URL, and choose whether to open it in a new tab and add a relevant title or alt-text. The editor’s customization options allow for efficient workflows, including the ability to create custom blocks and templates to save time. These features can enhance your website’s functionality without the need for additional plugins.

Adding a button to posts and pages

To add the Buttons block, click the Block Inserter icon and search for “buttons” before adding the block to the post or page. You can type what you’d like the button to say once you’ve added it.

Removing Gutenberg blocks

To remove Gutenberg blocks from your content in the Gutenberg editor, follow these steps:

  • Select the Block: Click on the block you want to remove to select it. You will see the block’s settings and toolbar appear.
  • Remove the Block: In the block toolbar, look for the “More options” button (three dots) or the trash bin icon. Click on it to access the block options.
  • Delete the Block: From the options menu, select “Remove Block” or “Delete” to remove the block from your content. Alternatively, you can use the keyboard shortcut “Ctrl + Alt + Backspace” (Windows) or “Cmd + Option + Backspace” (Mac) to delete the block.
  • Confirm the Removal: A confirmation dialogue may appear asking you to confirm the deletion. Click “OK” or “Yes” to proceed and remove the block.
Using pre-made templates_ simplify content creation
Using premade templates simplify content creation

Using pre-made templates: simplify content creation

  • Access the Gutenberg Editor: Log in to your WordPress dashboard and navigate to the page or post where you want to apply the template. Click on “Edit” to open the Gutenberg editor.
  • Add a block: In the Gutenberg editor, click on the “+” button to add a new block. Search for the “Template” block or look for it in the “Patterns” section.
  • Browse and select templates: Once you’ve added the Template block, you’ll have access to a library of pre-designed templates. Browse through the available WordPress block templates and select the one that suits your needs.
  • Apply the template: After selecting a template, it will be automatically applied to your content area. The template may consist of multiple blocks organized in a specific layout.
  • Customize the template: Once the template is applpatteried, you can customize it further by editing the individual blocks. Modify the text, replace images, adjust colours, or make any other desired changes to match your content and branding.
  • Add additional blocks: If needed, you can add more blocks to the template by clicking on the “+” button and selecting the desired block types.
  • Preview and publish: After customizing the template and adding additional content, preview your page or post to see how it looks. Once you’re satisfied, click on the “Update” or “Publish” button to save and publish your content.

How to create multi-column layouts in WordPress

Creating multi-column layouts in Gutenberg is a straightforward process. Here’s how you can do it:

How to publish your WordPress Gutenberg post

To publish your blog post on WordPress using Gutenberg Editor, simply click on the “Publish” button located in the top right corner of the screen and preview it. You can also schedule your posts for automatic publishing at a later date and time at your convenience. Ensure that your content is optimized for search engines by including relevant keywords strategically in your text’s headings and other areas. Previewing helps avoid errors before making it live on your website.

What are the cons of WordPress Gutenberg?

How do I get Gutenberg on WordPress
How do I get Gutenberg on WordPress

How do I get Gutenberg on WordPress?

WordPress versions 5.0 and up have Gutenberg, the new editor, included. Update your version to access it. The Classic Editor plugin can be installed if you prefer the old editor. However, this plugin may not be supported indefinitely as WordPress is moving towards Gutenberg.

Here are some useful links

WordPress itself

Official Website
wordpress.org – This is the official website for WordPress, where you can download the software, find documentation, and learn more about using it.

WordPress Codex
codex.wordpress.org/Main_Page – This is a comprehensive documentation resource for WordPress, covering everything from installation and configuration to specific functionality and troubleshooting.

WordPress Theme Directory 
wordpress.org/themes – The official WordPress theme directory is a great place to find free and premium WordPress themes. You can browse themes by category, feature, and popularity.

maxiblocks.com/go/help-desk
maxiblocks.com/pro-library
www.youtube.com/@maxiblocks
twitter.com/maxiblocks
linkedin.com/company/maxi-blocks
github.com/orgs/maxi-blocks
wordpress.org/plugins/maxi-blocks