Building Custom Gutenberg Blocks with React

When Gutenberg launched, many developers resisted it. But once I realized it was essentially a React application, I started seeing the potential. Custom Gutenberg blocks let you give clients exactly the editing experience they need, without page builder bloat.

Setting Up the Block

The fastest way to scaffold a custom block is with the official create-block tool:

npx @wordpress/create-block my-custom-block
cd my-custom-block
npm start

This generates the full block structure: block.json for metadata, edit.js for the editor view, save.js for the frontend output, and the build configuration.

The Edit Component

The edit function is a standard React component. You get access to WordPress hooks like useBlockProps, RichText, and InspectorControls:

import { useBlockProps, RichText, InspectorControls } from "@wordpress/block-editor";
import { PanelBody, ToggleControl } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();

    return (
        <>
            <InspectorControls>
                <PanelBody title="Settings">
                    <ToggleControl
                        label="Show icon"
                        checked={attributes.showIcon}
                        onChange={(val) => setAttributes({ showIcon: val })}
                    />
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                <RichText
                    tagName="h3"
                    value={attributes.heading}
                    onChange={(heading) => setAttributes({ heading })}
                    placeholder="Enter heading..."
                />
            </div>
        </>
    );
}

Dynamic Blocks for Server-Side Rendering

For blocks that need PHP data (like recent posts or custom queries), I use dynamic blocks. Instead of a save function, you register a render_callback in PHP:

register_block_type("my-plugin/latest-projects", [
    "render_callback" => function ($attributes) {
        $projects = get_posts(["post_type" => "project", "posts_per_page" => 3]);
        ob_start();
        // Render your HTML here
        return ob_get_clean();
    },
]);

This gives you the best of both worlds: a React-powered editor experience with PHP rendering on the frontend.

Why This Matters

Custom blocks replace the need for shortcodes, custom fields, and page builders for most use cases. They are faster, more maintainable, and give content editors a much better experience. If you know React, you already know 80% of what you need.