Notices

In the WordPress Block Editor, Notices are UI messages used to inform users about events, errors, warnings, or successful operations. They are typically displayed at the top of the editor or inside specific UI components.

WordPress provides a Notices API through the @wordpress/notices package, which integrates with the WordPress data store system.

Common use cases:

• Showing validation errors
• Confirming successful actions
• Displaying warnings or info messages
• Communicating background processes to the user

Types of Notices

The main types of notices include:

• success – indicates successful completion
• error – shows an error message
• warning – warns about a potential issue
• info – provides general information

Creating Notices

Notices are created using the createNotice function from the core/notices store.

Example: Creating a Notice

import { dispatch } from '@wordpress/data';

dispatch('core/notices').createNotice(
    'success',
    'Post updated successfully!'
);

Explanation:

• dispatch is used to trigger actions in a WordPress data store.
• 'core/notices' is the notices store.
• 'success' defines the notice type.

Creating Notices with Additional Options

You can provide options such as dismissibility or custom IDs.

import { dispatch } from '@wordpress/data';

dispatch('core/notices').createNotice(
    'error',
    'Something went wrong!',
    {
        isDismissible: true,
        id: 'custom-error-notice'
    }
);

Options include:

• isDismissible – allows users to close the notice
• id – custom identifier for the notice
• type – snackbars or default notices

Snackbar Notices

Snackbars are temporary notifications that appear briefly.

dispatch('core/notices').createNotice(
    'success',
    'Settings saved!',
    {
        type: 'snackbar'
    }
);

Snackbars disappear automatically after a few seconds.

Removing Notices

Notices can also be removed programmatically.

import { dispatch } from '@wordpress/data';

dispatch('core/notices').removeNotice('custom-error-notice');

Best Practices

• Use clear and concise messages
• Prefer snackbars for quick confirmations
• Use error notices for actionable issues
• Avoid showing too many notices at once

Block API

The Block API is the core system used to create and manage blocks in the WordPress Block Editor (Gutenberg). It provides the structure and tools needed to build custom blocks that can be inserted into posts, pages, and templates.

Blocks are registered using JavaScript and optionally supported with PHP for dynamic rendering.

The Block API consists of several key components:

• Block registration
• Block attributes
• Edit function
• Save function
• Block metadata (block.json)
• Editor components

Registering a Block

Blocks are registered using registerBlockType.

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('my-plugin/example-block', {
    title: 'Example Block',
    icon: 'smiley',
    category: 'widgets',

    edit() {
        return <p>Hello from the editor!</p>;
    },

    save() {
        return <p>Hello from the frontend!</p>;
    }
});

Explanation:

• title – block name displayed in the editor
• icon – icon shown in the block inserter
• category – block category in the inserter
• edit() – editor view
• save() – frontend output

Block Attributes

Attributes define data stored in the block. They are typically saved in post content.

Example:

registerBlockType('my-plugin/text-block', {
    attributes: {
        message: {
            type: 'string',
            default: 'Hello World'
        }
    },

    edit({ attributes, setAttributes }) {
        return (
            <input
                value={attributes.message}
                onChange={(e) =>
                    setAttributes({ message: e.target.value })
                }
            />
        );
    },

    save({ attributes }) {
        return <p>{attributes.message}</p>;
    }
});

Explanation:

• attributes define stored data
• setAttributes() updates block state

Using block.json

Modern WordPress blocks are registered using block metadata through block.json.

Example:

{
  "apiVersion": 2,
  "name": "my-plugin/example-block",
  "title": "Example Block",
  "category": "widgets",
  "icon": "smiley",
  "editorScript": "file:./index.js"
}

Benefits:

• Standardized configuration
• Automatic asset loading
• Better compatibility with WordPress core

Registering Block in PHP

Blocks using block.json can be registered in PHP.

function my_plugin_register_block() {
    register_block_type( __DIR__ . '/build/example-block' );
}
add_action( 'init', 'my_plugin_register_block' );

This automatically loads scripts and styles defined in block.json.

Dynamic Blocks

Dynamic blocks render content using PHP instead of static HTML.

Example:

register_block_type( 'my-plugin/latest-post', [
    'render_callback' => 'render_latest_post'
]);

function render_latest_post() {
    return '<p>Dynamic content from server</p>';
}

Advantages:

• Always displays fresh data
• Can query database content
• Useful for posts, users, or external data

Editor Components

WordPress provides React components to build block UI.

Common components:

• TextControl
• SelectControl
• PanelBody
• ToggleControl
• InspectorControls

Example:

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

function Edit({ attributes, setAttributes }) {
    return (
        <>
            <InspectorControls>
                <PanelBody title="Settings">
                    <TextControl
                        label="Message"
                        value={attributes.message}
                        onChange={(value) =>
                            setAttributes({ message: value })
                        }
                    />
                </PanelBody>
            </InspectorControls>

            <p>{attributes.message}</p>
        </>
    );
}

This adds a sidebar settings panel for the block.