Gutenberg Editor Guide: How to Use the WordPress Block Editor

Gutenberg Editor Guide: How to Use the WordPress Block Editor

Gutenberg is WordPress' built-in block editor. Since it was introduced in 2018, it has changed how we build content on WordPress – from simple blog posts to complete page layouts.

In this guide, you'll learn everything about Gutenberg: from basic blocks to advanced features that make you faster and more efficient.

Table of Contents

1. What is Gutenberg?
2. Getting started
3. The most important blocks
4. Work smarter with blocks
5. Patterns and reusable blocks
6. Full Site Editing
7. Keyboard shortcuts
8. Gutenberg vs page builders
9. Troubleshooting
10. FAQ

What is Gutenberg?

Gutenberg is WordPress' default editor since version 5.0. It replaced the classic "TinyMCE" editor with a block-based approach.

Before Gutenberg: You wrote in one large text field with a toolbar at the top – like a Word document.

With Gutenberg: All content consists of "blocks" – independent elements you can move, style, and reuse.

Why is it called Gutenberg?

It's named after Johannes Gutenberg, the inventor of the modern printing press. The idea is that blocks revolutionize web development like the printing press revolutionized books.

Benefits of Gutenberg

• Visual: You roughly see how the finished result will look
• Flexible: Easy to move elements around
• Consistent: Blocks ensure uniform styling
• Future-proof: WordPress is investing heavily in Gutenberg

Getting started

Open the editor

1. Go to Posts → Add New or Pages → Add New
2. You land in the Gutenberg editor
3. Click the big "+" to add your first block

Interface overview

Gutenberg has three main areas:

Top toolbar:

• Add block (+)
• Undo/redo
• Document overview
• Publish/update

Canvas (center):

• Here you write and edit
• Each block shows its own toolbar when selected

Sidebar (right):

• Post/Page: Category, tags, publication status
• Block: Settings for the selected block

Pro tip: Press Ctrl + Shift + , to hide the sidebar and get more space.

The most important blocks

Text blocks

Paragraph The most used block. Just type text directly – WordPress automatically creates paragraph blocks.

Heading Choose level (H1-H6). Remember: Only one H1 per page (typically the title).

List Bullet lists or numbered lists. You can nest lists by pressing Tab.

Quote Highlight important quotes with styling. Works well for testimonials.

Media blocks

Image Upload, select from media library, or insert URL. Remember to fill in alt text for SEO.

Gallery Display multiple images in a grid. Choose number of columns.

Video Embed videos from YouTube, Vimeo, or upload directly.

Cover Image with text on top – perfect for hero sections.

Layout blocks

Columns Divide content into columns (up to 6). Each column can contain other blocks.

Group Collect blocks in a container. Useful for styling (background, padding).

Spacer Add vertical space between blocks. Define height in pixels.

Separator A horizontal line to divide sections.

Interactive blocks

Button Create call-to-action buttons with links.

Table Create simple tables. For complex tables, use a plugin.

Form Requires a plugin like Bit Form, WPForms, or Contact Form 7.

Embed blocks

Gutenberg can automatically embed content from:

• YouTube, Vimeo, TikTok
• Twitter/X, Instagram, Facebook
• Spotify, SoundCloud
• Google Maps
• And many more...

Just paste the URL on an empty line.

Work smarter with blocks

Quick insertion with /

Instead of clicking "+", type / on an empty line:

• /heading → Heading
• /image → Image
• /columns → Columns
• /button → Button

It's much faster when you know the block names.

Transform blocks

Many blocks can be transformed to others:

1. Select the block
2. Click the block icon in the toolbar
3. Choose "Transform to..."

Examples:

• Paragraph → Heading, list, quote
• List → Paragraph
• Image → Gallery, cover

Move blocks

Four ways to move blocks:

1. Arrows: Click up/down arrows in block toolbar
2. Drag & drop: Drag with the 6 dots
3. Keyboard: Ctrl + Shift + Alt + T/Y
4. List view: Drag in document overview

Copy and paste blocks

• Ctrl + C → Copy selected block
• Ctrl + V → Paste
• Ctrl + Shift + D → Duplicate block

You can copy blocks between different pages/posts.

Multi-select

Select multiple blocks at once:

• Hold Shift and click on start and end block
• Or use Shift + arrow keys

Then you can:

• Move them together
• Delete them
• Group them
• Transform them

Patterns and reusable blocks

Block patterns

Patterns are pre-built combinations of blocks – a header layout, a pricing section module, a testimonial section, etc.

Find patterns:

1. Click "+" to add block
2. Select the "Patterns" tab
3. Browse categories or search

When you insert a pattern, you can edit everything freely.

Pro tip: Visit the WordPress Pattern Directory for more patterns.

Reusable blocks (Synchronized patterns)

Perfect for content that should be the same on multiple pages – e.g., a CTA or contact info.

Create reusable block:

1. Select block(s)
2. Click "⋮" → "Create pattern/reusable block"
3. Give it a name

Usage:

• Insert from patterns/reusable blocks
• Changes sync automatically!

Warning: If you change a reusable block, it changes everywhere. If you want a unique copy, click "Convert to regular blocks" after insertion.

Full Site Editing

Since WordPress 5.9, Gutenberg can edit your entire site – not just content. This requires a "block theme" (e.g., Twenty Twenty-Four).

What can you edit?

• Header and footer: Logo, navigation, social icons
• Page templates: How blog posts, archives, etc. are displayed
• Global styles: Colors, fonts, spacing for the entire site

Getting started

1. Go to Appearance → Editor
2. Choose what to edit (templates, parts, styles)
3. Use blocks as in the normal editor

Is Full Site Editing ready for production?

It depends:

• Yes: Simple sites, blogs, brochure sites
• No: Complex sites requiring pixel-perfect control

Many still use page builders like Bricks or Elementor for advanced layouts.

Keyboard shortcuts

Become faster with these shortcuts:

General

Blocks

Formatting

See all: Click "⋮" in top toolbar → "Keyboard shortcuts"

Gutenberg vs page builders

When Gutenberg is enough

• Blogs and articles: Gutenberg is designed for this
• Simple pages: About us, contact, single pages
• Budget-conscious: No extra plugins/costs
• Performance-focused: Gutenberg is lighter than page builders

When to choose a page builder

• Pixel-perfect designs: Bricks/Elementor give more control
• Advanced layouts: Mega menus, complex grids
• Time: Page builders often have ready-made templates
• Clients: Easier to lock down and hand over

My recommendation

Start with Gutenberg. Only switch to a page builder if you hit limitations.

Read more: Bricks vs Elementor comparison

Troubleshooting

"My block isn't working"

1. Check browser console: F12 → Console → look for errors
2. Deactivate plugins: Test with only default plugins
3. Clear cache: Browser cache and any caching plugins
4. Update WordPress: Run on the latest version

"Gutenberg is slow"

• Too many blocks on one page (keep it under 100)
• Heavy plugins running in the editor
• Low server memory (increase PHP memory limit)

"I miss the classic editor"

Install the "Classic Editor" plugin. But consider giving Gutenberg a chance – it's the future.

"Block styles look different on frontend"

Your theme might style blocks differently. Check:

• Theme's editor styles
• CSS overwriting block styling
• Cache showing old version

FAQ

Is Gutenberg better than the classic editor?

For most people, yes. Gutenberg provides more flexibility and is the future of WordPress. The classic editor is no longer being developed.

Can I use Gutenberg and a page builder together?

Yes, but it rarely makes sense. Choose one approach for consistency. Exception: Gutenberg for blog, page builder for landing pages.

Do my old plugins work with Gutenberg?

Most plugins have been updated for Gutenberg. Check the plugin description for "Gutenberg compatible" or "Block Editor ready".

Can I disable Gutenberg?

Yes, with the "Classic Editor" plugin. But WordPress recommends using Gutenberg.

What's the difference between Gutenberg and Full Site Editing?

Gutenberg is the block editor. Full Site Editing uses Gutenberg to edit the entire site (header, footer, templates) – not just content.

Does Gutenberg have drag-and-drop?

Yes, you can drag blocks around. But it's not as free as page builders – blocks still stack vertically within sections.

Next steps

Gutenberg gets better with every WordPress update. Start by mastering the basic blocks, learn the shortcuts, and experiment with patterns.

Related articles

• WordPress guide for beginners
• Bricks vs Elementor
• How to choose the right theme