【WordPress】createNotice の使い方｜ブロックエディターに通知メッセージを表示する方法

import { useBlockProps } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

export default function Edit() {
    const blockProps = useBlockProps();

    // notices ストアから createNotice を取り出す
    const { createNotice } = useDispatch( noticesStore );

    return (
        <div { ...blockProps }>
            <Button
                variant="primary"
                onClick={ () =>
                    createNotice( 'success', '読み込みが完了しました。', {
                        type: 'snackbar',
                    } )
                }
            >
                通知を出す
            </Button>
        </div>
    );
}

createNotice( status, content, options );

// status  : 'success' | 'info' | 'warning' | 'error'（省略時は 'info'）
// content : 表示する文言（文字列）
// options : 表示方法を指定するオブジェクト（省略可）

createNotice( 'warning', 'この API キーはまだ設定されていません。', {
    actions: [
        {
            // onClick を持たせるとボタンになる
            label: '既定値を入れる',
            onClick: () => setAttributes( { apiKey: 'demo-key' } ),
        },
        {
            // url を持たせるとリンクになる
            label: '設定画面を開く',
            url: '/wp-admin/options-general.php',
        },
    ],
} );

const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );

// 成功はスナックバーで軽く伝える
createSuccessNotice( '設定を保存しました。', { type: 'snackbar' } );

// 失敗は上部のバナーで残す
createErrorNotice( '設定を保存できませんでした。' );

const NOTICE_ID = 'my-blocks/fetch-status';

const { createErrorNotice, removeNotice } = useDispatch( noticesStore );

// 何度押しても1本だけ表示される
const showError = () => {
    createErrorNotice( 'データを取得できませんでした。', {
        id: NOTICE_ID,
    } );
};

// 再取得に成功したら自分で引っ込める
const clearError = () => {
    removeNotice( NOTICE_ID );
};

import { useState } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { Button, Placeholder } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import apiFetch from '@wordpress/api-fetch';
import { __, sprintf } from '@wordpress/i18n';

const NOTICE_ID = 'my-blocks/latest-post';

export default function Edit( { attributes, setAttributes } ) {
    const { title } = attributes;
    const blockProps = useBlockProps();
    const [ isLoading, setIsLoading ] = useState( false );

    const { createSuccessNotice, createErrorNotice, removeNotice } =
        useDispatch( noticesStore );

    const fetchLatestPost = async () => {
        setIsLoading( true );

        // 前回のエラーが残っていれば先に消す
        removeNotice( NOTICE_ID );

        try {
            const posts = await apiFetch( {
                path: '/wp/v2/posts?per_page=1&_fields=title',
            } );

            if ( ! posts.length ) {
                throw new Error( __( '記事が見つかりません。', 'my-blocks' ) );
            }

            setAttributes( { title: posts[ 0 ].title.rendered } );

            // 成功はスナックバーで軽く知らせる
            createSuccessNotice(
                __( '最新記事のタイトルを読み込みました。', 'my-blocks' ),
                {
                    type: 'snackbar',
                    id: NOTICE_ID,
                }
            );
        } catch ( error ) {
            // 失敗は上部のバナーに残し、再試行ボタンを添える
            createErrorNotice(
                sprintf(
                    /* translators: %s: エラーメッセージ */
                    __( '読み込みに失敗しました: %s', 'my-blocks' ),
                    error.message
                ),
                {
                    id: NOTICE_ID,
                    actions: [
                        {
                            label: __( '再試行', 'my-blocks' ),
                            onClick: fetchLatestPost,
                        },
                    ],
                }
            );
        } finally {
            setIsLoading( false );
        }
    };

    return (
        <div { ...blockProps }>
            { title ? (
                <p>{ title }</p>
            ) : (
                <Placeholder label={ __( '最新記事', 'my-blocks' ) }>
                    <Button
                        variant="primary"
                        isBusy={ isLoading }
                        disabled={ isLoading }
                        onClick={ fetchLatestPost }
                    >
                        { __( '読み込む', 'my-blocks' ) }
                    </Button>
                </Placeholder>
            ) }
        </div>
    );
}

import { registerPlugin } from '@wordpress/plugins';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { store as noticesStore } from '@wordpress/notices';
import { useEffect, useRef } from '@wordpress/element';

function SaveWatcher() {
    const { createSuccessNotice } = useDispatch( noticesStore );

    // 保存中かどうかを監視する
    const isSaving = useSelect(
        ( select ) => select( editorStore ).isSavingPost(),
        []
    );

    // 直前の状態を覚えておく
    const wasSaving = useRef( false );

    useEffect( () => {
        // 「保存中だった」→「保存中でなくなった」= 保存が終わった瞬間
        if ( wasSaving.current && ! isSaving ) {
            createSuccessNotice( '保存処理が完了しました。', {
                type: 'snackbar',
                id: 'my-plugin/after-save',
            } );
        }

        wasSaving.current = isSaving;
    }, [ isSaving, createSuccessNotice ] );

    // 通知を出すだけなので何も描画しない
    return null;
}

registerPlugin( 'my-plugin-save-watcher', { render: SaveWatcher } );

import { dispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

// フックではないので、ただの関数の中からでも呼べる
export function notifyError( message ) {
    dispatch( noticesStore ).createErrorNotice( message, {
        id: 'my-blocks/util-error',
    } );
}