Guide to the WordPress Gutenberg Editor

What is the Gutenberg editor

Gutenberg is the block editor that replaced the classic WordPress editor (TinyMCE) starting with WordPress 5.0. Instead of one large text field, Gutenberg uses a block system where every content element - paragraph, image, heading, list, video - is a separate block you can edit, move, and style independently.

It was named after Johannes Gutenberg, inventor of the printing press with movable type. Just as Gutenberg's press revolutionized content creation in the 15th century, the WordPress Gutenberg editor revolutionizes how we create web content.

If you are coming from the classic editor, switching to Gutenberg can feel confusing at first. Our guide to building a WordPress site covers the basics that will help you. But once you master the basics, Gutenberg offers far more flexibility and control over the look of your content without needing HTML or CSS.

Working with blocks - basics

Adding blocks

To add a new block, click the blue "+" button that appears between blocks or in the top-left corner of the editor. A menu opens with all available blocks organized by category: Text, Media, Design, Widgets, Theme, and Embeds. You can also simply type "/" in an empty paragraph to quickly search for blocks.

The most common blocks

• Paragraph: The basic text block. Supports bold, italic, links, and inline formatting.
• Heading: Headings from H2 to H6. Use them to structure content (H1 is usually the post title).
• Image: Inserting images with options for size, alignment, alt text, and link.
• List: Bullet and numbered lists with nested items.
• Quote: Highlighted quotes with stylized appearance.
• Gallery: An image gallery with automatic layout and lightbox view.
• Cover: An image with text over it - great for sections with a background image.
• Columns: Organize content into columns (2, 3, or more) for more complex layouts.

Editing and moving blocks

Every block has a toolbar that appears above it when selected. The toolbar contains options specific to that block type. On the right side of the editor, a settings panel offers additional options for the selected block (colors, typography, spacing).

You can move blocks by drag-and-drop or using the up/down arrows in the toolbar. You can also group, copy, duplicate, or convert blocks to another type (for example, paragraph to heading).

Advanced blocks

Group block

The Group block lets you combine multiple blocks into one unit. This is useful for applying a shared background color, spacing, or border to a group of blocks. For example, you can group a heading, paragraph, and button into a "card" with a background color and rounded corners.

Columns block

The Columns block creates a multi-column layout. You can choose between predefined variants (50/50, 33/33/33, 25/50/25, etc.) or manually set the width of each column. Inside each column you can add any blocks. On mobile, columns automatically stack vertically.

Table block

For tabular data, the Table block offers a simple way to create tables without HTML. You can set the number of rows and columns, style the header and footer of the table, and apply striped styling for better readability. For more complex tables, consider a plugin like TablePress.

Reusable blocks (Synced Patterns)

Since WordPress 6.3, reusable blocks have been renamed to "Synced Patterns". This is one of Gutenberg's most powerful features. You can save any block or group of blocks as a pattern and then use it across multiple pages.

Key difference: when you change a synced pattern, the change is automatically applied to ALL pages where that pattern is used. This is ideal for elements that repeat across pages - calls to action (CTAs), contact info, promotional banners, newsletter forms.

To create a synced pattern: select the block or blocks, click the three dots in the toolbar, choose "Create pattern", and name it. To insert it on another page, find it in the Patterns section of the block inserter.

Keyboard shortcuts

Keyboard shortcuts dramatically speed up work in Gutenberg. The most useful:

• / (slash): In an empty paragraph, opens quick block search.
• Ctrl+Shift+D: Duplicates the selected block.
• Ctrl+Alt+T: Adds a new block above the current one.
• Ctrl+Alt+Y: Adds a new block below the current one.
• Ctrl+Shift+Z: Redo.
• Ctrl+Z: Undo.
• Escape: Selects the block (switches from editing to select mode).
• Enter: Creates a new block below.
• Ctrl+Shift+,: Hides/shows the sidebar settings panel.
• Shift+Alt+H: Shows all available keyboard shortcuts.

On Mac, use Cmd instead of Ctrl. These shortcuts work in all modern WordPress versions.

Tips for more efficient work

Use "List View" (Ctrl+Alt+O) to see the structure of all blocks in a hierarchical view - especially useful for long pages. Try "Fullscreen" mode for distraction-free work. Use the "Top Toolbar" option if you dislike the toolbar popping above every block. Organize frequently used blocks into patterns for faster content creation.

Conclusion

The Gutenberg editor is a powerful tool that transforms how you create content in WordPress. The block approach gives you visual control without code, synced patterns save time on repeating content, and keyboard shortcuts speed up daily work. Invest time in learning Gutenberg - it will pay back many times over. For optimal editor performance, use hosting optimized for WordPress for faster, better content creation.