WordPress 5.0 shipped Gutenberg — the block-based editor — in December 2018 to a polarised reception. Power users complained about losing the familiar TinyMCE editor; developers grappled with a React-based JavaScript API that felt alien in a PHP world. Two months later, the community is coming to terms with the change, and developers who invest in understanding the Block API are finding it genuinely powerful.
What Is a Block?
A block is a self-contained piece of content with its own editor UI and saved output. Every paragraph, image, heading, quote, and widget is now a block. The editor is a React application; blocks define how they render in the editor (edit) and what HTML they save to the database (save).
Registering a Custom Block
Install @wordpress/scripts for a zero-config build pipeline, then register your block:
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
registerBlockType('mytheme/callout', {
title: 'Callout',
icon: 'megaphone',
category: 'common',
attributes: {
content: { type: 'string', source: 'html', selector: 'p' },
},
edit: ({ attributes, setAttributes }) => (
<div className="callout-editor">
<RichText
tagName="p"
value={attributes.content}
onChange={val => setAttributes({ content: val })}
placeholder="Write your callout..."
/>
</div>
),
save: ({ attributes }) => (
<div className="callout">
<RichText.Content tagName="p" value={attributes.content} />
</div>
),
});InspectorControls: Sidebar Settings
Use InspectorControls to add per-block settings to the editor sidebar — perfect for colour pickers, toggle switches, and select dropdowns that configure your block.
Dynamic Blocks with PHP
For blocks that need server-side rendering (live data, CPT queries), use a dynamic block. The save function returns null and you register a PHP render callback in register_block_type().
Block Patterns and Reusable Blocks
Group multiple blocks into a reusable block or a pattern — a pre-built layout that editors can insert with one click. Patterns are registered via register_block_pattern().
Gutenberg is WordPress’s biggest architectural shift since custom post types. The learning curve is steep, but the payoff is a content editing experience that finally rivals dedicated page builders — without the plugin overhead.
