Gutenberg

Gutenberg, officially known as the Block Editor, is the default content editor introduced in WordPress 5.0 (released in December 2018). It replaces the Classic Editor with a modern, block-based interface that allows users to create rich, flexible layouts without writing any code.

What Are Blocks?

In Gutenberg, everything is a block:

• Paragraphs
• Images
• Headings
• Buttons
• Galleries
• Embeds (YouTube, Tweets, etc.)
• Widgets (e.g., Recent Posts, Search)
• Custom HTML

This block-based system gives users granular control over each content element, including layout, alignment, colors, and spacing.

Key Features

• Visual editing – see what your content will look like as you build it.
• Reusable blocks – create once, reuse anywhere.
• Block patterns – pre-designed layout sections for quick composition.
• Full Site Editing (FSE) – extend blocks to headers, footers, templates (in block themes).
• Drag-and-drop interface – intuitive for non-technical users.

Developer Perspective

• Blocks are built with React, JavaScript, and JSON block metadata.
• Developers can create custom blocks using registerBlockType().
• Gutenberg is extensible via custom block plugins or theme block support.

Example Block Code (Registering a Custom Block)

wp.blocks.registerBlockType('myplugin/alert-box', {
    title: 'Alert Box',
    icon: 'warning',
    category: 'common',
    edit() {
        return wp.element.createElement('div', null, 'This is an alert box!');
    },
    save() {
        return wp.element.createElement('div', null, 'This is an alert box!');
    }
});

Classic Editor vs Gutenberg

Feature	Classic Editor	Gutenberg Block Editor
Interface	TinyMCE WYSIWYG	Block-based, visual
Layout control	Limited (shortcodes, HTML)	Visual layout via blocks
Extensibility	Plugins, shortcodes	Blocks, block patterns, custom blocks
Theme integration	Standard	Deep integration with block themes