Create content with Gutenberg editor
Try MaxiBlocks for free with 500+ library assets including basic templates. No account required. Free WordPress page builder, theme and updates included.
To create content in the WordPress Gutenberg editor, you can add blocks using the plus icon, the slash command, or by typing directly into the editor. WordPress will automatically detect the type of content and assign the right block. Once added, you can customise each block using the toolbar above it and the settings panel on the right.
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
Goodbye classic editor hello Gutenberg
The release of WordPress 5.0 introduced a major change with the launch of the Gutenberg editor. It replaced the long-standing classic editor that used a single text area for content. Instead, Gutenberg brings a more visual and flexible way to create and manage content.
A new way to build pages
Gutenberg uses a block-based system that lets you build pages piece by piece. Each block can be something different—like a heading, paragraph, image, video, button, or even a quote. You can move these blocks around, adjust their settings, and style them to fit the look and feel of your website.
Easily add media and interactive content
It’s now easier than ever to add images, videos, galleries, audio, maps, and even social media embeds to your content. Whether you’re building a blog post, landing page, or homepage layout, Gutenberg gives you the tools to make it more engaging and dynamic—without needing to touch any code.
Embracing a better content experience
Gutenberg is more than just a new editor. It’s a shift in how we think about content creation in WordPress. It gives you the freedom to design pages the way you want, while keeping things clean, simple, and intuitive. Whether you’re a beginner or an experienced WordPress user, it’s designed to make your workflow faster and more creative.
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.
Build like a pro
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.
Subscribe to our newsletter
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
Create faster with Gutenberg WordPress blocks and layouts
Build smarter websites with Gutenberg WordPress blocks patterns and easy design workflows.
FAQ: 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.
What is Gutenberg and how does it work in WordPress?
Gutenberg is the modern block editor in WordPress that allows users to build pages using drag-and-drop content blocks. It replaces the older Classic Editor with a more flexible editing experience. You can learn more in this introduction to Gutenberg and this guide on introducing the Gutenberg editor. For a complete overview, visit WordPress Gutenberg or see how it works in the Gutenberg WordPress editor.
How does Gutenberg compare to the Classic Editor?
The main difference is that Gutenberg uses blocks to manage content, while the Classic Editor uses a single text area. If you’re still deciding which to use, this comparison of the Classic Editor vs Gutenberg breaks it down clearly.
What are blocks in Gutenberg?
Blocks are the building units of a page—everything from text to images to buttons is a block. You can learn more in this guide to WordPress blocks. For more advanced usage, explore this list of Gutenberg blocks and get practical tips for using them effectively.
Can I use templates and reusable layouts in Gutenberg?
Yes, Gutenberg includes template support to speed up layout creation. Check out the Gutenberg template library for ready-made designs you can customise.
Does Gutenberg help with SEO?
Gutenberg improves SEO by producing cleaner HTML and offering better content structure. Learn more in this article on Gutenberg and SEO.
What is the Gutenberg plugin?
The Gutenberg plugin gives you early access to new features that haven’t yet been added to WordPress core. It’s useful if you want to test cutting-edge improvements.
Where can I learn how to use Gutenberg effectively?
For tutorials and walkthroughs, visit this overview of the Gutenberg editor or see how to use it in the WordPress dashboard. If you’re just starting out, the Gutenberg blocks guide is a good place to begin.
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