Streamline your content creation: Gutenberg editor in WordPress

Try MaxiBlocks for free with 500+ library assets including basic templates. No account required. Free page builder, theme and updates included. Start now

Key takeaways

Gutenberg is WordPress’s block-based editor, introduced in version 5.0, replacing the classic editor.
It features a modular approach, allowing users to build content using customizable blocks for text, images, videos, and more.
Gutenberg enhances user experience with an intuitive interface and greater flexibility in content design.
It represents the future of WordPress content creation, with regular updates and a focus on visual, interactive pages.

What Is the Gutenberg Editor in WordPress?

The new WordPress website builder is a significant shift in WordPress’s content creation approach, replacing the classic editor with a block-based system. It simplifies the addition of multimedia content and offers extensive customization options, making it easier to create engaging and visually appealing web pages. Gutenberg empowers users, regardless of their technical expertise, to craft complex layouts with ease, marking a new era in WordPress content creation.

How Does Gutenberg Differ from the Classic Editor?

Gutenberg’s introduction to WordPress is a departure from the classic editor’s singular text field, offering a block-based interface for a more visual and flexible content creation experience. Unlike the classic editor, which has limited media and interactive capabilities and requires additional plugins for advanced customization, Gutenberg provides a wide array of customizable blocks. This modern approach supports a diverse range of content types and enhances the user experience, positioning Gutenberg as the core of WordPress’s ongoing development and innovation.

What Is the Gutenberg editor in WordPress?
Gutenberg editor vs Classic editor
How to use Gutenberg
The Gutenberg block editor interface
Layout options in Gutenberg editor
Using templates in the Gutenberg editor in WordPress
Resources for learning more About Gutenberg editor in WordPress
What is the best Gutenberg editor for WordPress?
Does Gutenberg work with WordPress?

What Is the Gutenberg editor in WordPress?

Goodbye, Classic Editor; Hello, Gutenberg
The WordPress world has been buzzing about the new block-based editor called Gutenberg, which was introduced in version 5.0. This marks a change from the traditional classic editor, which relied on a single text field. It instead adopts a more visual and modular approach to content creation.

Think of blocks as building blocks
Imagine your content as a puzzle, and Gutenberg provides the pieces to create a beautiful picture. These pieces, called blocks, are like LEGO bricks that you can customize and arrange freely on your web page. With Gutenberg, each block can be a different type of content, from text and images to videos and buttons. This modular approach gives you more flexibility in designing your web pages.

Easier than ever to add media
Add media and interactive elements to your content. With a wide range of block types, including embeds for social media posts, maps, audio, and more, you can easily enrich your pages with multimedia content. Presents a visually appealing and intuitive interface that caters to both inexperienced and skilled users.

Embrace the new era of content creation
This version highlights how Gutenberg dismantles conventional approaches to content creation, opening up new possibilities and allowing users to create more engaging and visually appealing content. It empowers you to build visually appealing and interactive pages with ease, without sacrificing control or flexibility.

Gutenberg editor vs Classic editor — Gutenberg vs Classic editor

Gutenberg vs Classic editor

The plugin and the classic editor are two different approaches to content creation in WordPress. Here’s a comparison of the two:

User interface: The classic editor provides a familiar interface with a single text field where users can input their content. In contrast, the new modern WordPress introduces a block-based approach, where content is organized into individual blocks that can be customized and rearranged.
Blocks: The classic editor primarily focuses on text-based content, with limited options for media and interactive elements. In comparison, the plugin offers a wide range of blocks that can include text, images, videos, galleries, buttons, and more. These blocks provide more flexibility in designing the layout and visual presentation of content.
Customization: With the classic editor, users often need to rely on custom code or additional plugins to achieve advanced customization.
User experience: The classic editor, while familiar to long-time WordPress users, may have a steeper learning curve for newcomers.
Future development: The direction in which WordPress is heading, with ongoing development and improvements. It is built into the core of WordPress and receives regular updates and enhancements. The classic editor is being phased out and is no longer actively developed.

How to use Gutenberg

To use Gutenberg, make sure you have the latest WordPress version or download the beta plugin (for new features). After logging in, navigate to the ‘Posts’ or ‘Pages’. From there, simply click the respective button, ‘Add New’ or ‘Edit,’ to embark on your content-creation adventure.

Want to add a block? Look for the “+” icon in the content area and click away. Select the one that aligns with your content requirements.

To customize a block, click on it to open its settings panel. You can change the alignment, text formatting, colours, and other options.

Add a block

To add a block, click on the “+” icon located at the top-left corner of the new WordPress website builder or anywhere within the content area. This will open the block inserter menu.

Choose a block type

In the block inserter menu, you’ll see a wide range of types to choose from. Common types include paragraphs, headings, images, galleries, lists, quotes, and more.

Insert the block

Once you’ve selected the desired type, click on it to insert it into your content. The block will appear in the content area.

Each block in your content can be customized by accessing the right sidebar panel. You can change alignment, formatting, and image settings, among other things. To add more to your content, simply click on the “+” icon. Once you are done making changes, remember to save them by clicking “Save” or “Publish”.

Creating reusable blocks

Creating reusable blocks is a feature that allows you to save and reuse custom-designed blocks across your WordPress site. Here’s a step-by-step guide on how to create reusable blocks:

Open the editor: Launch it by opening the post or page you want to edit.
Design your custom block: Create and design what you want to reuse. This can include any combination of text, images, headings, buttons, or other elements available in Gutenberg.
Select the block: Once you’ve designed it, select it by clicking on it. This will activate the block toolbar.
Save as reusable block: From the menu options, select “Add to Reusable Blocks.” A dialogue box will appear where you can enter a name for your reusable block.
Give it a name: Enter a descriptive name for your reusable block.
Save the block: Click on the “Save” button to save your reusable block.
Access your reusable blocks: To access your reusable blocks, click on the “+” icon in the editor to open the block inserter. Scroll down to the “Reusable” tab, and you will find your saved reusable blocks listed there.
Insert the reusable block: To insert a reusable block, simply click on it from the list. The block will be added to your content.

Keyboard shortcuts for Gutenberg

Gutenberg, new WordPress website builder, offers a variety of keyboard shortcuts that can help speed up your workflow and enhance your editing experience. Here are some useful keyboard shortcuts for Gutenberg:

Common shortcuts:
Ctrl + C (or Command + C on Mac): Copy.
Ctrl + X (or Command + X on Mac): Cut.
Ctrl + V (or Command + V on Mac): Paste copied or cut.
Ctrl + Z (or Command + Z on Mac): Undo the last action.
Ctrl + Y (or Command + Y on Mac): Redo the last action.
Ctrl + A (or Command + A on Mac): Select all.
Ctrl + F (or Command + F on Mac): Open the search bar.
Ctrl + G (or Command + G on Mac): Group.
Ctrl + Shift + D (or Command + Shift + D on Mac): Duplicate.
Ctrl + Backspace (or Command + Backspace on Mac): Delete.
Navigation shortcuts:
Arrow keys: Move the selection up, down, left, or right within the blocks.
Enter or Return: Create a new paragraph or create a new block below the current block.
Shift + Enter or Shift + Return: Create a line break within a paragraph.
Ctrl + Shift + Alt + M (or Command + Shift + Option + M on Mac): Move the selected block(s) up.
Ctrl + Shift + Alt + N (or Command + Shift + Option + N on Mac): Move the selected block(s) down.
Formatting shortcuts:
Ctrl + B (or Command + B on Mac): Apply or remove bold formatting.
Ctrl + I (or Command + I on Mac): Apply or remove italic formatting.
Ctrl + U (or Command + U on Mac): Apply or remove underlined formatting.
Ctrl + K (or Command + K on Mac): Insert or edit a hyperlink.
Ctrl + Shift + D (or Command + Shift + D on Mac): Strikethrough selected text.

These are just a few examples of the keyboard shortcuts available in Gutenberg.

Embedding media and shortcodes

Embedding media: To embed media such as images or videos, simply add a new block by clicking the “+” button or pressing “/” on your keyboard. Search for the “Image” or “Video” block and select it.
Choose the source of your media, whether it’s from your media library, an external URL, or an upload.
Customize the display settings and alignment of your media block as needed. Preview your post or page to ensure the media is correctly embedded and displayed as desired.
Using shortcodes: Shortcodes are small snippets of code that allow you to add dynamic elements or functionalities to your content. To use a shortcode in Gutenberg, add a new block and search for the “Shortcode” block or select it from the “Formatting” category. Enter the shortcode within the block, and it will automatically render the desired functionality.
Customize any additional parameters or attributes required by the shortcode, if applicable.
Preview your post or page to ensure the shortcode is functioning as expected.

The availability of media embedding and support for shortcodes may vary depending on your WordPress theme and installed plugins. It’s always a good idea to check the documentation of your specific theme or plugin to understand the supported media types and available shortcodes.

Using templates

It provides pre-designed templates that can be customized to create visually appealing and engaging content.

Creating custom templates with theme.json

This file defines global writing settings for your website, such as block styles, colour palettes, and font sizes. To create custom templates, access the theme.json file in your theme’s folder and define the template structure by specifying blocks, their order, and any additional styles or settings. With theme.json, you can easily work on customising your website design by adding block patterns and customizing block styles. Once saved, these templates can be reviewed and added to your website.

Using pre-made templates

Templates provide pre-designed layouts that can be used as a starting point for pages or posts. To access templates, click ‘Start with a template’ when creating a new page or post and choose from various categories. You can customize the template by editing blocks, text, and media, and adjusting layouts. To reuse custom layouts, save them as reusable blocks.

You can also create custom templates using the theme.json file in WordPress core. To create custom templates with theme.json, open the file in your theme’s folder and define the layout and structure by specifying blocks and their order. You can also create block patterns and customize block styles.

Using theme.json to create custom templates provides a way to design and maintain consistent layouts throughout your website.

Compatibility with other plugins and themes

To ensure the smooth operation of your website, it’s important to check for compatibility issues with other plugins and themes. Update your existing plugins and themes to their latest versions before installing new WordPress website builder. If you encounter difficulties, try disabling conflicting plugins or switching to a default theme. You can also debug blocks using developer tools.

Access the theme.json file: Navigate to your theme’s folder in the WordPress directory and locate the theme.json file.
Define template structure: Within this file, define your custom template’s structure and layout by specifying blocks, their order, and any additional styles or settings.

Full site editing (FSE)

In WordPress core, you can create custom templates using the theme.json file. The theme.json file allows you to define the block styles, colour palettes, font sizes, and other global settings for your website. Here’s how you can create custom templates with theme.json:

To customize your WordPress CMS theme, follow these steps:

Find and open the theme.json file in your theme’s folder.
Define the layout and structure of your custom template by specifying blocks and their order.
Create block patterns, which are predefined layouts that can be used as templates.
Customize block styles for headings, paragraphs, buttons, and other elements within your custom templates.
Save your changes to the theme.json file and apply your custom template as a starting point when creating new pages or posts. Using theme.json to create custom templates provides a streamlined way to design and maintain consistent layouts throughout your website.

Resources for learning

Enhance your WordPress experience with plugins, explore and test beyond basics, connect with the WordPress community on Facebook, enrol in courses, attend webinars, and continuously learn.

Goodies on YouTube

YouTube offers educational resources. Channels such as WPBeginner, WPCrafter, and Elegant Themes provide comprehensive tutorials and tips on creating custom blocks, using templates, and optimizing content for SEO.

Here are some resources that can further assist you in learning:

WordPress Codex: Explore this is the online manual for WordPress and a living repository for WordPress information and documentation. Link: codex.wordpress.org
Gutenberg Handbook: This is an extensive resource provided by the developers of WordPress.
Link: developer.wordpress.org/block-editor
WordPress TV: This platform is perfect for video tutorials. Link: wordpress.tv
Gutenberg Times: An independent blog for Gutenberg news, updates, tutorials, and resources. Link: gutenbergtimes.com
WordPress Gutenberg Courses on Udemy: Udemy hosts a variety of online courses teaching WordPress and Gutenberg, some of which are free and others paid. Link: www.udemy.com
WordPress Meetups: Joining local or virtual WordPress Meetups can be a great way to learn from others, ask questions, and share your knowledge about Gutenberg. Link: meetup.com/topics/wordpress

FAQs About WordPress Gutenberg editor

Does WordPress still use Gutenberg?

Yes, WordPress continues to use and develop the Gutenberg editor as its default editor. Since its introduction in WordPress 5.0, it has received ongoing updates and improvements to enhance user experience and functionality.

What is the Gutenberg editor?

The Gutenberg editor is a block-based editor introduced in WordPress 5.0 to replace the Classic Editor. It allows users to design posts and pages using blocks, which are versatile elements for creating media-rich content. The editor aims to provide a more intuitive and flexible web-building experience.

What is the difference between WP Block Editor and Gutenberg?

The term WP Block Editor is often used interchangeably with the Gutenberg editor. Both refer to the block-based content creation approach introduced in WordPress 5.0. Essentially, they are the same, with “Gutenberg” being the project name and “WP Block Editor” being the official name used in WordPress.

Is the Gutenberg editor free?

Yes, the Gutenberg editor is free and comes built into WordPress starting from version 5.0. There are no additional costs to use this feature.

Can I use Gutenberg without WordPress?

No, the Gutenberg editor is specifically designed for WordPress and cannot be used as a standalone editor outside of the WordPress environment. However, for a standalone experience, you might explore other options like the Gutenberg editor plugin for local development.

Do I need to install Gutenberg?

If you have WordPress version 5.0 or later, Gutenberg is already included by default. There is no need to install it separately. For older versions, you can manually install the Gutenberg editor plugin.

Why would someone disable Gutenberg?

Some users might choose to disable the Gutenberg editor if they prefer the Classic Editor or if their themes or plugins are not fully compatible with Gutenberg. In such cases, the Classic Editor plugin can be installed to revert to the old editing experience.

How do I download Gutenberg editor?

To download the Gutenberg editor plugin, navigate to the WordPress Plugin Repository, search for “Gutenberg,” and click “Install Now” followed by “Activate.”

Is Gutenberg installed by default?

Yes, Gutenberg is installed by default in WordPress version 5.0 and later. There is no need for a separate installation if you are using these versions or newer.

How do I turn on Gutenberg editor?

If you are using WordPress 5.0 or later, the Gutenberg editor is already turned on by default. Simply go to your post or page editor, and you will see the block-based interface.

How do I switch to Gutenberg editor?

To switch to the Gutenberg editor, ensure that you are using WordPress 5.0 or later. If you have previously disabled it, deactivate any Classic Editor plugins and navigate to your post or page editor to start using Gutenberg.

Additional resources

Gutenberg editor vs Elementor: Explore how the Gutenberg editor compares to other popular page builders like Elementor for different web-building needs.
Gutenberg editor Drupal: Learn about efforts to integrate the Gutenberg editor with the Drupal content management system.
Gutenberg editor GitHub: Visit the Gutenberg GitHub repository for development updates, documentation, and community contributions.
Gutenberg editor online: Access tutorials and resources for using the Gutenberg editor effectively in your projects.
Gutenberg editor tutorial: Find step-by-step guides to mastering the Gutenberg editor on platforms like Gutenberg Hub and YouTube.
Gutenberg editor standalone: While primarily designed for WordPress, explore how Gutenberg is being adapted for use in other environments and as a standalone tool.

By understanding and utilising the Gutenberg editor, you can significantly enhance your WordPress site-building experience, leveraging its powerful features and flexibility.