[Atomic Glue](atomicglue.co)
CMS
Home › Glossary › Cms· 198 ·

Gutenberg Editor

goo-ten-berg ed-i-torproper noun
Filed underCmsDesign
In brief · quick answer

The Gutenberg Editor is WordPress's block-based content editor, introduced in WordPress 5.0 (December 2018). It replaced the classic TinyMCE editor with a modular block system where every piece of content (paragraph, image, heading, gallery, embed) is a block that can be added, rearranged, and styled independently.

§ 1 Definition

Gutenberg is the block-based content editor that has been the default editor for WordPress since version 5.0 (December 2018). Named after Johannes Gutenberg (the inventor of the printing press), it represented the most significant change to WordPress's editing experience in the platform's history. Gutenberg replaces the classic TinyMCE editor (a single text field with toolbar buttons) with a block-based system. Every content element is a block: paragraphs, headings, images, galleries, videos, buttons, columns, embeds, and more. Users add, remove, and rearrange blocks freely. Each block has its own settings panel for layout and styling. Gutenberg is also the foundation for Full Site Editing (FSE), which extends the block paradigm beyond page content to cover headers, footers, templates, and global styles.

§ 2 The Block System

Gutenberg's core innovation is the block. Every piece of content is a discrete block with three layers: - Content: The actual text, image, video, or embed data. - Settings: Block-specific options (text alignment for a paragraph, width for an image, source URL for an embed). - Styles: Typography, colors, spacing, borders, and other visual properties. Blocks cover common content types out of the box: - Text blocks: Paragraph, heading, list, quote, code, preformatted, pullquote, verse. - Media blocks: Image, gallery, audio, video, file, cover, media & text. - Design blocks: Buttons, columns, group, row, stack, spacer, separator. - Widget blocks: Latest posts, categories, search, shortcode, custom HTML. - Embed blocks: YouTube, Twitter/X, Spotify, Vimeo, and dozens more via oEmbed. The block system has proven more intuitive for content editors than the classic editor. You can see exactly where each element sits and rearrange content without cutting and pasting. The tradeoff for developers is that custom block development requires React knowledge, a higher barrier than the classic editor's PHP-based approach.

§ 3 Custom Blocks and Block Development

Gutenberg's extensibility comes through custom blocks. Any developer can register new block types for their specific use case: - Static blocks: Render fixed content with customizable settings. Example: a testimonial block with fields for name, company, quote, and photo. - Dynamic blocks: Render content that changes based on context. Example: a latest-posts block that queries the database and displays the most recent 5 posts. - Variations: Slight variations of existing blocks. Example: a 'large pullquote' variation of the standard pullquote block. - Block patterns: Pre-designed groups of blocks that users can insert as a single unit. Example: a hero section pattern containing a background cover block, heading, paragraph, and button. - Block styles: Alternative visual styles for existing blocks. Example: an 'outline' style for the button block. Custom blocks are registered using JavaScript (React) and can be rendered on the frontend with PHP or React. The `registerBlockType` API is well-documented, and tools like `@wordpress/create-block` scaffold custom block projects. Advanced Custom Fields (ACF) provides a bridge for PHP developers to create custom blocks without React, making block development accessible without a JavaScript build step.

§ 4 Gutenberg vs Classic Editor vs Page Builders

Three editing paradigms exist in modern WordPress: Classic Editor (TinyMCE): A single rich text field. Simple, familiar, fast. Lacks layout flexibility. Best for content that's primarily text (blog posts, articles). Still available via the Classic Editor plugin for sites that don't need block features. Gutenberg (Block Editor): The default since WordPress 5.0. Moderate learning curve for editors. Good balance of flexibility and performance. Best for most WordPress sites. Continues to improve with each release. Page Builders (Elementor, Divi, Bricks): Full visual drag-and-drop interfaces. Maximum layout flexibility. Significant performance cost. Best for complex page designs that can't be achieved with Gutenberg blocks. Atomic Glue's guidance: Use Gutenberg for most sites. It covers probably 80% of what page builders do with much better performance. Reserve page builders for the 20% of projects that genuinely need their flexibility. The Classic Editor plugin is not recommended for new sites but is fine for maintaining existing classic-theme sites.

§ 5 In code

// Register a custom Gutenberg block (simplified)
wp.blocks.registerBlockType('atomicglue/testimonial', {
  title: 'Testimonial',
  icon: 'format-quote',
  category: 'widgets',
  attributes: {
    quote: { type: 'string', source: 'html', selector: 'blockquote' },
    author: { type: 'string', source: 'text', selector: 'cite' }
  },
  edit: () => <div>Testimonial editor placeholder</div>,
  save: () => null, // dynamic block: rendered server-side
})

§ 6 Common questions

Q. Is Gutenberg the same as a page builder?
A. No. Gutenberg is a block editor. It's more powerful than the classic editor but less feature-rich than page builders like Elementor. The gap is narrowing with each WordPress release.
Q. Can I disable Gutenberg?
A. Yes. Install the Classic Editor plugin to restore the classic TinyMCE editor. This is not recommended for new sites but can be useful for maintaining existing content workflows.
Q. Does Gutenberg slow down my site?
A. Gutenberg is significantly lighter than most page builders. The editor itself loads more scripts in the admin, but the frontend output is clean HTML with minimal bloat.
Key takeaways
  • Gutenberg is WordPress's block-based editor, replacing the classic TinyMCE editor since WordPress 5.0.
  • Every content element is a block that can be independently added, styled, and rearranged.
  • Custom block development requires React knowledge, but ACF provides a PHP bridge.
  • Gutenberg covers most layout needs with better performance than page builders.
How Atomic Glue helps

We build custom Gutenberg blocks that give your content editors the flexibility they need without the performance cost of a page builder. From simple testimonial blocks to complex page-building systems, we make Gutenberg work for you. Get in touch.

Get in touch
Written by Atomic Glue Editorial Team, Atomic Glue · Last updated July 2025
# Gutenberg Editor

The Gutenberg Editor is WordPress's block-based content editor, introduced in WordPress 5.0 (December 2018). It replaced the classic TinyMCE editor with a modular block system where every piece of content (paragraph, image, heading, gallery, embed) is a block that can be added, rearranged, and styled independently.

Category: Cms (also: Design)

Author: Atomic Glue Editorial Team

## Definition

Gutenberg is the block-based content editor that has been the default editor for [WordPress](/glossary/wordpress) since version 5.0 (December 2018). Named after Johannes Gutenberg (the inventor of the printing press), it represented the most significant change to WordPress's editing experience in the platform's history. Gutenberg replaces the classic TinyMCE editor (a single text field with toolbar buttons) with a block-based system. Every content element is a block: paragraphs, headings, images, galleries, videos, buttons, columns, embeds, and more. Users add, remove, and rearrange blocks freely. Each block has its own settings panel for layout and styling. Gutenberg is also the foundation for [Full Site Editing (FSE)](/glossary/full-site-editing-fse), which extends the block paradigm beyond page content to cover headers, footers, templates, and global styles.

## The Block System

Gutenberg's core innovation is the block. Every piece of content is a discrete block with three layers: - **Content:** The actual text, image, video, or embed data. - **Settings:** Block-specific options (text alignment for a paragraph, width for an image, source URL for an embed). - **Styles:** Typography, colors, spacing, borders, and other visual properties. Blocks cover common content types out of the box: - **Text blocks:** Paragraph, heading, list, quote, code, preformatted, pullquote, verse. - **Media blocks:** Image, gallery, audio, video, file, cover, media & text. - **Design blocks:** Buttons, columns, group, row, stack, spacer, separator. - **Widget blocks:** Latest posts, categories, search, shortcode, custom HTML. - **Embed blocks:** YouTube, Twitter/X, Spotify, Vimeo, and dozens more via oEmbed. The block system has proven more intuitive for content editors than the classic editor. You can see exactly where each element sits and rearrange content without cutting and pasting. The tradeoff for developers is that custom block development requires React knowledge, a higher barrier than the classic editor's PHP-based approach.

## Custom Blocks and Block Development

Gutenberg's extensibility comes through custom blocks. Any developer can register new block types for their specific use case: - **Static blocks:** Render fixed content with customizable settings. Example: a testimonial block with fields for name, company, quote, and photo. - **Dynamic blocks:** Render content that changes based on context. Example: a latest-posts block that queries the database and displays the most recent 5 posts. - **Variations:** Slight variations of existing blocks. Example: a 'large pullquote' variation of the standard pullquote block. - **Block patterns:** Pre-designed groups of blocks that users can insert as a single unit. Example: a hero section pattern containing a background cover block, heading, paragraph, and button. - **Block styles:** Alternative visual styles for existing blocks. Example: an 'outline' style for the button block. Custom blocks are registered using JavaScript (React) and can be rendered on the frontend with PHP or React. The `registerBlockType` API is well-documented, and tools like `@wordpress/create-block` scaffold custom block projects. [Advanced Custom Fields (ACF)](https://www.advancedcustomfields.com/) provides a bridge for PHP developers to create custom blocks without React, making block development accessible without a JavaScript build step.

## Gutenberg vs Classic Editor vs Page Builders

Three editing paradigms exist in modern WordPress: **Classic Editor (TinyMCE):** A single rich text field. Simple, familiar, fast. Lacks layout flexibility. Best for content that's primarily text (blog posts, articles). Still available via the Classic Editor plugin for sites that don't need block features. **Gutenberg (Block Editor):** The default since WordPress 5.0. Moderate learning curve for editors. Good balance of flexibility and performance. Best for most WordPress sites. Continues to improve with each release. **Page Builders (Elementor, Divi, Bricks):** Full visual drag-and-drop interfaces. Maximum layout flexibility. Significant performance cost. Best for complex page designs that can't be achieved with Gutenberg blocks. **Atomic Glue's guidance:** Use Gutenberg for most sites. It covers probably 80% of what page builders do with much better performance. Reserve page builders for the 20% of projects that genuinely need their flexibility. The Classic Editor plugin is not recommended for new sites but is fine for maintaining existing classic-theme sites.

## In code

// Register a custom Gutenberg block (simplified)
wp.blocks.registerBlockType('atomicglue/testimonial', {
  title: 'Testimonial',
  icon: 'format-quote',
  category: 'widgets',
  attributes: {
    quote: { type: 'string', source: 'html', selector: 'blockquote' },
    author: { type: 'string', source: 'text', selector: 'cite' }
  },
  edit: () => <div>Testimonial editor placeholder</div>,
  save: () => null, // dynamic block: rendered server-side
})

## Common questions

Q: Is Gutenberg the same as a page builder?

A: No. Gutenberg is a block editor. It's more powerful than the classic editor but less feature-rich than page builders like Elementor. The gap is narrowing with each WordPress release.

Q: Can I disable Gutenberg?

A: Yes. Install the Classic Editor plugin to restore the classic TinyMCE editor. This is not recommended for new sites but can be useful for maintaining existing content workflows.

Q: Does Gutenberg slow down my site?

A: Gutenberg is significantly lighter than most page builders. The editor itself loads more scripts in the admin, but the frontend output is clean HTML with minimal bloat.

## Key takeaways

## Related entries

Last updated July 2025. Permalink: atomicglue.co/glossary/gutenberg-editor

Schedule a call

30 min · Video call

1
Date
2
Time
3
Details