Simplify your site editing with WordPress Gutenberg

Looking for Creative Inspiration?

⭐⭐⭐⭐⭐

Explore Over 2,000 Patterns, 164 Layouts, and 14,000+ Icons with MaxiBlocks!👇

Get Inspired
Simplify your site editing with WordPress Gutenberg
Simplify your site editing with WordPress Gutenberg

Key takeaways:

  • The Gutenberg editor in WordPress enables easy content creation with a block-based interface.
  • Adding, customizing, and rearranging blocks is straightforward, enhancing the user experience.
  • Advanced features include embedding media, using keyboard shortcuts, and customizing blocks with HTML and CSS.
  • Switching between Gutenberg and the Classic Editor is possible through plugin installation.
  • The Gutenberg core is part of the WordPress website builder, while the Gutenberg plugin offers additional advanced features.

Mastering Gutenberg: Your guide to WordPress blocks

This guide delves into the WordPress website builder, the default content editor for creating posts and pages. It utilizes WP block templates (also known as Gutenberg template library elements) as building blocks. These blocks encompass various elements like paragraphs, headings, images, embeds, and columns.

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:

  • Gutenberg core refers to the built-in editor that was introduced in WordPress version 5.0 and is now part of the WordPress core software.
  • It is the default editor that comes bundled with WordPress, allowing users to create and edit content using blocks.
  • Gutenberg core is regularly updated and maintained by the WordPress development team along with other core features and improvements.
  • It provides basic block editing functionality and is available to all WordPress users without the need to install any additional plugins.

2. Gutenberg plugin:

  • The Gutenberg plugin refers to the standalone plugin that was initially developed to test and introduce the editor before its integration into the WordPress core.
  • The Gutenberg plugin is separate from the WordPress core and can be installed on older versions of WordPress (before 5.0) to bring the editor functionality to those sites.
  • The plugin offers more advanced features and experimental updates compared to the Gutenberg core that comes with the WordPress core.
  • The Gutenberg plugin allows users to access the latest developments, improvements, and enhancements to the editor before they are officially released in the WordPress core.

The Gutenberg core is the default editor included in the WordPress core, while the Gutenberg plugin is a separate plugin that provides advanced features and experimental updates to the block editor for users on older WordPress versions.

How to customize blocks in Gutenberg

To customize blocks in Gutenberg, follow these steps:

  1. Select the block you want to customize: Click on the block to highlight it or place your cursor inside the block.
  2. Block toolbar: Once the block is selected, a toolbar will appear above or below the block. The available customization options will vary depending on the type of block you’re working with.
  3. Block settings in the sidebar: On the right side of the Gutenberg editor, you’ll find the block settings in the sidebar. The specific options in the sidebar will vary depending on the block you’re customizing. For example, a paragraph block will have options for text formatting, alignment, and advanced settings.
  4. Block styles: Some blocks offer different styles or variations that you can choose from. Look for the “Styles” option in the block toolbar or sidebar settings to explore different styles for the block.
  5. Custom CSS classes: If you want to apply custom styling to a block using CSS, you can add custom CSS classes. In the block sidebar, look for the “Advanced” tab and enter your custom CSS classes in the “Additional CSS Class” field.
  6. Reusable blocks: If you frequently use a specific customized block configuration, you can save it as a reusable block. Select the block, click on the “More options” button (three dots), and choose “Add to Reusable Blocks”. Give it a name and save it. You can then use this reusable block in other posts or pages.
  7. Block patterns: Gutenberg provides pre-designed block patterns that you can use to quickly customize your content layout. Click on the “+” icon to add a block, and under the Patterns tab, choose a pattern that suits your needs.

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:

  1. Add the Navigation Block: In the new WordPress website builder, click on the “+” button to add a new block. Search for “Navigation” in the block inserter or browse through the available blocks. Click on the “Navigation” block to add it to your content area.
  2. Configure the navigation block: Once the Navigation Block is added, you’ll see options to customize its appearance and functionality in the block toolbar or the block settings in the sidebar.
  • 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.

The Gutenberg Navigation Block provides a user-friendly way to create and customize navigation menus in WordPress. It allows you to design attractive and functional navigation bars that help visitors navigate your website easily. Experiment with different styles and configurations to achieve the desired navigation layout for your WordPress Gutenberg site.

Creating custom templates

  • Design your template: Using the chosen template plugin, design your custom template by arranging and configuring blocks. You can combine different blocks and customize their settings to create a unique layout.
  • Save the template: Once you’ve designed your template, save it within the plugin. Give it a descriptive name to easily identify it in the future.
  • Apply the template: To use your custom template, create a new post or page in WordPress. Look for the option to apply a it, usually located in the new WordPress website builder sidebar or toolbar. Select your custom template from the available options and apply it to the post or page.

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

Customizing blocks in WordPress Gutenberg websites is an excellent way of designing a unique and personalized look for your webpage. You can use HTML and CSS to create custom blocks that suit the aesthetic and functionality of your brand requirements. These blocks could be anything from displaying pricing tables to creating attractive image galleries. Customization options like pre-built block templates provided by WordPress add grace to the result. With mastery over Gutenberg and customization skills under your grasp, take your WordPress website experience to the next level.

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

Using blocks to customize headers in WordPress Gutenberg is an effective way to improve the design of your website while maintaining a positive user experience. You can add a personal touch by using the heading block to customize your headers with H1-H6 headings or use the cover block to add header images or videos that complement your website’s content. With its wide range of customization options, Gutenberg makes it easy to create engaging websites without needing to know HTML or CSS.

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

With the new WordPress website builder, you can easily edit images on your WordPress site using the image block feature. This allows you to crop, resize, filter, and optimize your images with just a few clicks. You can also customize blocks and templates using Gutenberg’s drag-and-drop interface to create professional-looking pages with ease. To further expand your website’s design functionality, consider integrating plugins for added customization options. Gutenberg’s latest update includes full site editing capabilities, such as sidebar layouts, reusable blocks, and block patterns.

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

Gutenberg provides the flexibility to use pre-made templates that can save you time and effort when creating layouts for your website or blog posts. Here’s how to use pre-made WP block templates in Gutenberg:

  • 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.

Using pre-made WordPress block templates in Gutenberg can simplify the process of creating visually appealing layouts, even if you don’t have extensive design or coding knowledge. These templates allow you to quickly set up professional-looking pages or posts by utilizing the design expertise of template creators. You can experiment with different templates and customize them to fit your specific needs and branding.

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:

  • Add a column block: In the Gutenberg editor, click on the “+” button to add a new block. Search for “Columns” or look for them in the “Layout Elements” section. Click on the “Columns” block to add it to your content area.
  • Configure the columns: Once the Columns Block is added, you’ll see options to configure the number of columns and their widths. By default, it starts with two columns of equal width.
  • Adjust column widths: To adjust the width of each column, click on the column handle (the vertical line between the columns) and drag it to the desired width. You can make columns wider or narrower based on your layout requirements.
  • Add content to columns: Click inside each column to add content blocks. You can add text, images, buttons, or any other blocks to each column separately. To add blocks, click on the “+” button within each column and select the desired block type.
  • Customize individual columns: You can customize each column independently. Select a column by clicking on it, and you’ll see block-specific options and settings for that particular column. Customize the content, formatting, styling, or other properties as needed.
  • Rearrange or remove columns: To rearrange columns, click on the column handle and drag it to a new position. To remove a column, select the column and click on the “More options” button (three dots) in the block toolbar. From the options menu, choose “Remove Block” or “Delete” to remove the column.
  • Preview and publish: After setting up your multi-column layout and adding content to each column, 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 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?

While WordPress Gutenberg offers many benefits, it’s important to consider some of the potential drawbacks or cons associated with it

1. Learning curve 

Gutenberg introduces a new editing experience with a block-based approach, which may require users to familiarize themselves with the new interface and workflow. It can take some time to adjust and learn the ins and outs of the block editor, especially for those accustomed to the classic editor. 

2. Compatibility issues 

Due to the significant changes introduced by WordPress Gutenberg, some older themes, plugins, or custom code may not be fully compatible. This can result in certain elements not displaying correctly or requiring updates or replacements. It’s important to check plugin and theme compatibility before transitioning to Gutenberg.

3. Limited plugin support

While Gutenberg has a growing library of blocks and plugins dedicated to extending its functionality, the overall ecosystem is still evolving. Certain niche or specialized plugins may not have comprehensive Gutenberg support, limiting the availability of specific features or functionalities.

4. Disruption to existing workflows

For established websites or content-heavy projects, transitioning to Gutenberg may disrupt existing workflows and require modifications to content creation processes. This adjustment period could lead to temporary inefficiencies until users become fully comfortable with the new editor.

5. Loss of control over HTML/CSS

Gutenberg aims to simplify the editing process by abstracting the underlying HTML/CSS code. While this can be advantageous for many users, those with advanced coding skills and who prefer a more hands-on approach may feel limited by the reduced control over the generated markup.

6. Performance impact

Gutenberg’s enhanced editing experience, with its numerous blocks and additional features, can potentially impact the performance of the WordPress Gutenberg backend. Websites with older hosting environments or limited resources may experience slower load times or increased resource usage.

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