iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Gutenberg Blocks

By · Reviewed & last updated · Part of WordPress Tutorial

Gutenberg blocks are the modern editor unit. Each block is a React component with controls, an HTML/JSON output, and registration metadata. Plugins ship custom blocks; themes lay them out with block.json + theme.json.

A real custom block

EXAMPLE
// my-plugin/src/blocks/notice/block.json
{
    "$schema":         "https://schemas.wp.org/trunk/block.json",
    "apiVersion":      3,
    "name":            "my-plugin/notice",
    "title":           "Notice",
    "category":        "design",
    "icon":            "info",
    "description":     "Coloured callout block.",
    "keywords":        ["callout", "alert"],
    "textdomain":      "my-plugin",
    "attributes": {
        "message": { "type": "string",  "default": "" },
        "variant": { "type": "string",  "default": "info" }
    },
    "supports": {
        "html":  false,
        "color": { "background": true, "text": true }
    },
    "editorScript":     "file:./edit.js",
    "style":            "file:./style.css",
    "render":           "file:./render.php"
}

// my-plugin/src/blocks/notice/edit.js — the editor UI
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
    const { message, variant } = attributes;
    const blockProps = useBlockProps({ className: `notice notice-${variant}` });
    return (
        <>
            <InspectorControls>
                <PanelBody title="Notice">
                    <SelectControl
                        label="Variant"
                        value={variant}
                        options={[
                            { value: 'info',    label: 'Info'    },
                            { value: 'success', label: 'Success' },
                            { value: 'danger',  label: 'Danger'  },
                        ]}
                        onChange={(v) => setAttributes({ variant: v })}
                    />
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                <RichText
                    tagName="p"
                    value={message}
                    onChange={(m) => setAttributes({ message: m })}
                    placeholder="Write your notice…"
                />
            </div>
        </>
    );
}

// my-plugin/src/blocks/notice/render.php — server-rendered (recommended)
<?php
$variant = isset($attributes['variant']) ? esc_attr($attributes['variant']) : 'info';
$message = isset($attributes['message']) ? wp_kses_post($attributes['message']) : '';
echo '<div class="notice notice-' . $variant . '">' . $message . '</div>';

Why it matters

Server-rendered blocks (render.php) are the modern default. They keep markup out of post content (easier theming, easier future-rename) and let you read live data at render time.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Gutenberg — the block editor.
// Add paragraphs, headings, images, columns, reusable blocks.
Try it Yourself »

Discussion

Loading…