Simplify your site editing with WordPress Gutenberg

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

Gutenberg editor vs Classic editor
Building with blocks

Mastering Gutenberg: Your guide to WordPress blocks

The Gutenberg editor is the default WordPress content editor, providing a block-based interface for building rich pages and posts without writing code. It powers the modern WordPress website builder experience, making layout customization, media embedding, and formatting intuitive for users of all levels.

This guide covers everything from adding blocks to advanced features like keyboard shortcuts and custom HTML.

Key takeaways

  • Gutenberg is WordPress’s built-in block editor for easy visual content creation.
  • Adding, customizing, and rearranging blocks is user-friendly and efficient.
  • Advanced features include media embedding, custom CSS/HTML, and keyboard shortcuts.
  • You can switch back to the Classic Editor using a free plugin.
  • The Gutenberg plugin adds cutting-edge features beyond the core editor.

What are WordPress blocks?

WordPress blocks are individual elements used to create and style content visually. These include paragraphs, headings, images, videos, columns, and embeds—all accessible from the Gutenberg block library (also called the Gutenberg template library or WP block templates).

These reusable blocks can be rearranged and styled independently, offering layout flexibility for any WordPress website.

How to add a Gutenberg block

  1. Go to your WordPress dashboard and open a post or page editor.
  2. Click the “+” (Add Block) button in the top-left corner.
  3. Search for the block type (e.g., image, paragraph, list).
  4. Click the block to insert it into your page or post.

Configuring advanced block settings

While most Gutenberg blocks offer basic customization, others like the List Block or Group Block allow for more advanced layout and style changes.

You can adjust:

  • Text size and font
  • Icons or bullet types
  • Padding, margin, and line height
  • Block background color and borders

These features give you design control without using a page builder plugin.

Rearranging blocks in Gutenberg

  1. Click the block you want to move.
  2. Use the up/down arrow icons to reposition it step-by-step.
  3. For freeform layout changes, click the six-dot handle and drag the block to a new position.

This drag-and-drop experience makes layout editing fast and intuitive.

Embedding images and media

To embed media content like images or videos:

  • Click the “+” button and select Image, Gallery, or Embed.
  • Drag and drop media files, or upload using the media browser.
  • Use the block toolbar to align media, add alt text, and customize captions.
  • Add links or buttons to enhance interactivity and navigation.

Keyboard shortcuts in Gutenberg

Boost your productivity with these popular shortcuts:

  • Ctrl + C – Copy selected block
  • Ctrl + V – Paste copied block
  • Ctrl + Z – Undo last action
  • Shift + Alt + H – View all available shortcuts
  • / (forward slash) – Quickly insert a new block

These keyboard commands save time when creating long-form content or building pages.

How to switch back to the Classic Editor

Prefer the old WordPress editor? Here’s how to revert:

  1. Go to Plugins > Add New in your dashboard.
  2. Search for Classic Editor, then install and activate it.
  3. Navigate to Settings > Writing.
  4. Under “Default editor for all users,” select Classic Editor.
  5. Click Save Changes.

Once activated, all posts and pages will open in the Classic Editor instead of Gutenberg.

Gutenberg editor vs Classic editor
Gutenberg editor vs Classic editor

How do I download the Gutenberg editor?

If you’re using WordPress 5.0 or newer, there’s no need to download the Gutenberg editor separately—it’s already built into WordPress as the default block editor.

To access the Gutenberg editor:

  1. Log in to your WordPress dashboard.
  2. Navigate to Posts or Pages.
  3. Click Add New to create a new post or page, or select an existing one to edit.

You’ll be taken directly to the Gutenberg editor, where you can begin building your content with blocks.

Understanding the difference: Gutenberg core vs. Gutenberg plugin

While both “Gutenberg” versions enable block-based editing, there are key differences in how they function and when to use them.

Gutenberg core (default block editor)

  • Included in WordPress since version 5.0
  • Built directly into the core software—no installation required
  • Provides stable, essential block editing features
  • Updated with each official WordPress release
  • Suitable for everyday website content creation

Gutenberg plugin (advanced & experimental features)

  • Available on the WordPress Plugin Directory
  • Originally released to test Gutenberg before core integration
  • Can be installed to access experimental features and beta tools
  • Updated weekly with features not yet included in core
  • Ideal for developers, testers, and users who want the latest updates

📝 Tip: If you’re on WordPress 4.9 or earlier, you can install the Gutenberg plugin to get the block editor experience without updating your core software.

How to customize blocks in Gutenberg

Gutenberg gives you extensive tools to customize individual blocks so your content looks exactly how you want it. Here’s how to do it:

1. Select the block

Click on any block to highlight it or place your cursor inside it.

2. Use the block toolbar

Once selected, a floating toolbar will appear. Depending on the block type, you’ll see options like:

  • Bold/italic
  • Alignment
  • Add link
  • Block-specific controls (e.g., list type, heading level)

3. Adjust block settings in the sidebar

On the right-hand sidebar, you’ll find additional block settings like:

  • Text formatting (font size, color, spacing)
  • Media settings (image size, alt text, layout)
  • Background and border styling
  • Advanced settings, like anchor links or HTML tags

4. Apply block styles

Some blocks offer predefined styles or design presets. You can switch these under the Styles tab in the sidebar.

5. Add custom CSS classes

Want full control over styling? Go to the Advanced section and enter a custom class name in the “Additional CSS Class” field. Then style it in your theme or Customizer.

6. Create reusable blocks

If you’ve customized a block and plan to use it again:

  • Click the three-dot menu (⋮) on the block
  • Select “Add to Reusable Blocks”
  • Name and save it

Now you can insert this block anywhere across your site.

7. Use block patterns

Block patterns are pre-designed groups of blocks—ready to insert with a click. To use them:

  • Click the “+” Add Block icon
  • Switch to the Patterns tab
  • Choose a layout (e.g., testimonial, pricing table, call to action)

Block patterns save time and ensure consistent design across your site.

Build like a pro

How to create reusable block templates in WordPress

Create a reusable block:

  1. Select the block you want to reuse.
  2. Click on the three-dot menu in the block toolbar.
  3. Choose “Add to Reusable Blocks”.
  4. Name your block.
  5. Click Publish and then Save.

Reusable blocks can be added to any post or page and help maintain consistent design and formatting.

How to use the Gutenberg Navigation Block

Add the Navigation Block:

  • Open the block inserter (“+”).
  • Search for “Navigation” and add it to your layout.

Customize the Navigation Block:

  • Navigation style: Choose horizontal or vertical.
  • Menu settings: Select menu, adjust depth, enable dropdowns.
  • Typography and colors: Change font, size, and link colors.
  • Alignment and spacing: Control layout spacing.

Add menu items:

  • Click Edit Menu to open the menu editor.
  • Create a new menu or choose an existing one.
  • Add menu items and rearrange by dragging.

Save and preview:

  • Click Update or Save Draft, then preview your page.

The Navigation Block makes it easy to build flexible, responsive menus without code.

Creating custom templates in Gutenberg

Design your template:

  • Use block-based plugins like MaxiBlocks to combine blocks into a custom layout.

Save the template:

  • Save the layout within the plugin and give it a clear name.

Apply the template:

  • Create a new post/page.
  • Choose the template from the sidebar options.

Custom templates help speed up content creation while keeping your design consistent.

Creating custom blocks with HTML and CSS

Advanced users can create fully custom blocks using HTML and CSS:

  • Build blocks for pricing tables, styled galleries, or branded CTAs.
  • Add custom CSS classes in the block sidebar.
  • Use the Custom HTML block or develop with block plugins.

This allows for complete control over design and functionality.

Adding written content using Gutenberg

Use blocks like Paragraph, Heading, Image, and HTML to structure and enhance your written content:

  • Use short paragraphs and headings for readability.
  • Leverage reusable blocks and block patterns to streamline your workflow.
  • Use keyboard shortcuts (e.g., Ctrl + B for bold) for faster formatting.

Gutenberg supports full-site editing, so your layout can extend to headers, footers, and sidebars.

Editing headers with blocks

  • Use the Heading block for SEO-friendly titles (H1–H6).
  • Use the Cover block to add visual header images or background videos.

This allows you to create engaging page headers.

Adding a site title in Gutenberg

  • Click the block inserter (“+”).
  • Search for “Site Title”.
  • Or type /title on a new line to insert it quickly.

Editing images with the Gutenberg Image Block

  • Upload or drag and drop your image into the Image Block.
  • Use built-in tools to crop, resize, and apply filters.
  • Add alt text and captions for accessibility.
  • Customize the layout using columns, padding, or alignment tools.

Editing a hyperlink in Gutenberg

  • Select the block containing the link.
  • Click the link icon in the toolbar.
  • Edit the URL, set target (new tab), and add link title or alt text.

Adding a button to your post or page

  • Click the block inserter.
  • Search for “Buttons” and add it.
  • Type your call-to-action text and link it as needed.

How to remove Gutenberg blocks

  1. Select the block you want to delete.
  2. Click the three-dot menu (⋮) in the block toolbar.
  3. Choose “Remove Block” or click the trash icon.
  4. Or use keyboard shortcuts:Windows: Ctrl + Alt + Backspace. Mac: Cmd + Option + Backspace

By mastering these block features, templates, and customization tools, you’ll be able to fully harness the power of the WordPress Gutenberg editor to build engaging, flexible websites.

How Gutenberg and WordPress work together
Gutenberg WordPress

Using pre-made templates to simplify content creation

Gutenberg provides a powerful way to streamline your workflow with pre-made block templates. These templates are professionally designed layouts that you can insert and customize in seconds, making it easy to build attractive pages without needing to code.

How to use WordPress block templates:

  1. Open the Gutenberg editor: Log in to your WordPress dashboard, open the page or post you want to edit, and click “Edit”.
  2. Insert a template block: Click the “+” icon to add a new block. Navigate to the “Patterns” tab or search for “Template Block.”
  3. Browse available templates: Choose from a library of pre-designed layouts tailored for different use cases like landing pages, testimonials, calls to action, and more.
  4. Apply the template: When selected, the template is inserted into your page or post, including all the blocks it contains.
  5. Customize the layout: Modify text, images, colors, and styling to match your branding.
  6. Add additional blocks: Use the “+” icon to insert new blocks if needed.
  7. Preview and publish: After editing, click Preview to check the design, then Publish or Update to make your content live.

Using templates accelerates page creation while maintaining professional design standards.

How to create multi-column layouts in WordPress

Creating multi-column layouts in Gutenberg is simple and helps enhance readability and visual structure.

Steps to create a column layout:

  1. Insert the Columns block: Click the “+” button and search for “Columns” or find it in the Layout Elements section.
  2. Choose a column structure: Select from preset options (2, 3, or more columns).
  3. Resize columns: Drag the divider between columns to adjust widths.
  4. Add content inside each column: Click inside a column and use the “+” button to insert blocks (text, images, buttons, etc.).
  5. Customize each column: Use block settings in the sidebar to modify styling, spacing, and alignment.
  6. Rearrange or delete columns: Drag columns to new positions or use the three-dot menu to remove them.
  7. Preview and publish: Review your layout before publishing.

Columns are perfect for services, pricing tables, team bios, and feature comparisons.

How to publish your WordPress Gutenberg post

To publish a blog post in WordPress using Gutenberg:

  • Click “Publish” in the top-right corner of the screen.
  • Use the Preview button to check for formatting or content issues.
  • Use the Scheduling feature to set a future date/time for automatic publishing.
  • Include relevant keywords in your headings and body text for better SEO.

Previewing your post helps ensure a clean, error-free layout before it goes live.

What are the cons of WordPress Gutenberg?

While Gutenberg is a modern and intuitive editor, there are some potential drawbacks to consider:

1. Learning curve

Users familiar with the Classic Editor may need time to learn the block-based workflow. This can slow down productivity during the transition period.

2. Compatibility issues

Older themes and plugins may not fully support Gutenberg. Always check compatibility to avoid broken layouts or missing features.

3. Limited plugin support

Although growing, the Gutenberg plugin ecosystem still lacks full support for some niche or advanced plugins.

4. Workflow disruption

Switching to Gutenberg can disrupt established content processes, especially for large or content-heavy sites.

5. Limited HTML/CSS control

For developers, the block abstraction may reduce control over fine-tuned HTML and CSS markup.

6. Performance concerns

Gutenberg’s visual interface and added features may impact performance on older servers or low-resource hosting environments.

SEO tip: To minimize these cons, choose a Gutenberg-compatible theme, keep your plugins updated, and test performance using staging environments before making changes live.

Subscribe to our newsletter

How do I get Gutenberg on WordPress?

WordPress versions 5.0 and up have Gutenberg, the new editor, included. Update your version to access it. The Classic Editor plugin can be installed if you prefer the old editor. However, this plugin may not be supported indefinitely as WordPress is moving towards Gutenberg.

Here are some useful links

Create faster with Gutenberg WordPress blocks and layouts

Build smarter websites with Gutenberg WordPress blocks patterns and easy design workflows.

HomePage-Maxi-Pils

FAQs About WordPress Gutenberg and Block Templates

What is the WordPress Gutenberg editor?

Gutenberg is WordPress’s default block editor, introduced in version 5.0. It allows users to create pages and posts visually using a system of blocks for text, images, layouts, buttons, and more.

What are Gutenberg blocks?

Gutenberg blocks are individual content elements like paragraphs, headings, images, columns, and buttons. Each block can be styled and moved to create custom page layouts.

Can I use pre-made templates with Gutenberg?

Yes! Gutenberg supports block patterns and pre-designed templates that you can insert with one click. These templates simplify design and ensure consistency across pages.

How do I create a reusable block in Gutenberg?

To create a reusable block, select any block you’ve customized, click the three-dot menu, and choose “Add to Reusable Blocks.” You can then insert it into other pages anytime.

What’s the difference between Gutenberg core and the Gutenberg plugin?

The core editor comes built into WordPress. The Gutenberg plugin offers access to beta features and experimental tools before they’re added to core in future updates.

Is Gutenberg compatible with all WordPress themes?

Most modern themes support Gutenberg. For best results, use a block-based theme specifically designed for Gutenberg or full-site editing, like those offered by MaxiBlocks.

Can I customize Gutenberg blocks with CSS?

Yes. Each block has an “Advanced” section where you can add custom CSS classes. This gives developers and designers more control over styling.

What are block patterns in Gutenberg?

Block patterns are groups of pre-arranged blocks designed for a specific layout or section, like testimonials, pricing tables, or CTAs. They can be inserted and customized easily.

How do I create multi-column layouts in Gutenberg?

Use the “Columns” block to set up side-by-side content. You can customize column width, add any blocks inside each column, and adjust styling in the sidebar.

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