BG Image maxiblocks

Streamline your content creation: Gutenberg editor in WordPress


Streamline your content creation_ Gutenberg editor in WordPress
Streamline your content

Key takeaways

What Is the Gutenberg Editor in WordPress?

How Does Gutenberg Differ from the Classic Editor?

What Is the Gutenberg editor in WordPress?

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:

  1. 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.
  2. 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.
  3. Customization: With the classic editor, users often need to rely on custom code or additional plugins to achieve advanced customization. 
  4. User experience: The classic editor, while familiar to long-time WordPress users, may have a steeper learning curve for newcomers.
  5. 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
How to use Gutenberg

How to use Gutenberg

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:

  1. Open the editor: Launch it by opening the post or page you want to edit.
  2. 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.
  3. Select the block: Once you’ve designed it, select it by clicking on it. This will activate the block toolbar.
  4. 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.
  5. Give it a name: Enter a descriptive name for your reusable block. 
  6. Save the block: Click on the “Save” button to save your reusable block.
  7. 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.
  8. 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
Keyboard shortcuts for Gutenberg

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:

  1. 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.
  2. 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.
  3. 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

  1. 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.
  2. 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.
Using templates in the Gutenberg editor in WordPress
Using templates with the Gutenberg plugin

Using templates

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

Creating custom templates with theme.json

Using pre-made templates

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. 

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: 

Resources for learning more About Gutenberg editor in WordPress
Resources for learning

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

  1. WordPress Codex: Explore this is the online manual for WordPress and a living repository for WordPress information and documentation. Link: codex.wordpress.org
  2. Gutenberg Handbook: This is an extensive resource provided by the developers of WordPress. 
    Link: developer.wordpress.org/block-editor
  3. WordPress TV: This platform is perfect for video tutorials. Link: wordpress.tv
  4. Gutenberg Times: An independent blog for Gutenberg news, updates, tutorials, and resources. Link: gutenbergtimes.com
  5. 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
  6. 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.

Further reading

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