【WordPress】InspectorControls と PanelBody でブロックの設定サイドバーを作る方法

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "webool/feature-box",
    "title": "注目ボックス",
    "category": "design",
    "textdomain": "webool",
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "p.feature-box__text",
            "default": ""
        },
        "showIcon": {
            "type": "boolean",
            "default": true
        },
        "boxStyle": {
            "type": "string",
            "default": "info"
        },
        "padding": {
            "type": "number",
            "default": 24
        }
    },
    "editorScript": "file:./index.js",
    "style": "file:./style-index.css"
}

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

export default function Edit( { attributes, setAttributes } ) {
    const { content, showIcon, boxStyle, padding } = attributes;

    const blockProps = useBlockProps( {
        className: `feature-box feature-box--${ boxStyle }`,
        style: { padding: `${ padding }px` },
    } );

    return (
        <>
            {/* この中身はサイドバーに表示される */}
            <InspectorControls>
                <PanelBody title="表示設定" initialOpen={ true }>
                    <ToggleControl
                        __nextHasNoMarginBottom
                        label="アイコンを表示する"
                        help={ showIcon ? '左側にアイコンが付きます' : 'テキストのみ表示します' }
                        checked={ showIcon }
                        onChange={ ( value ) =>
                            setAttributes( { showIcon: value } )
                        }
                    />

                    <SelectControl
                        __nextHasNoMarginBottom
                        label="配色"
                        value={ boxStyle }
                        options={ [
                            { label: '情報（青）', value: 'info' },
                            { label: '注意（黄）', value: 'warning' },
                            { label: '成功（緑）', value: 'success' },
                        ] }
                        onChange={ ( value ) =>
                            setAttributes( { boxStyle: value } )
                        }
                    />

                    <RangeControl
                        __nextHasNoMarginBottom
                        label="内側の余白（px）"
                        value={ padding }
                        min={ 0 }
                        max={ 64 }
                        step={ 4 }
                        allowReset
                        resetFallbackValue={ 24 }
                        onChange={ ( value ) =>
                            // リセット時に undefined が渡ることがある
                            setAttributes( { padding: value ?? 24 } )
                        }
                    />
                </PanelBody>
            </InspectorControls>

            {/* こちらは通常どおり本文の位置に描画される */}
            <div { ...blockProps }>
                { showIcon && (
                    <span className="feature-box__icon" aria-hidden="true">
                        ！
                    </span>
                ) }
                <RichText
                    tagName="p"
                    className="feature-box__text"
                    value={ content }
                    onChange={ ( value ) =>
                        setAttributes( { content: value } )
                    }
                    placeholder="お知らせの本文を入力"
                />
            </div>
        </>
    );
}

<InspectorControls>
    <PanelBody title="表示設定">
        {/* 「設定」タブに入る */}
    </PanelBody>
</InspectorControls>

<InspectorControls group="styles">
    <PanelBody title="見た目の調整">
        {/* 「スタイル」タブに入る */}
    </PanelBody>
</InspectorControls>

<InspectorControls group="advanced">
    {/* 「高度な設定」パネルの中に入る。PanelBody で囲まない */}
</InspectorControls>

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const { content, showIcon, boxStyle, padding } = attributes;

    // edit 側と同じ className・style を出力する
    const blockProps = useBlockProps.save( {
        className: `feature-box feature-box--${ boxStyle }`,
        style: { padding: `${ padding }px` },
    } );

    return (
        <div { ...blockProps }>
            { showIcon && (
                <span className="feature-box__icon" aria-hidden="true">
                    ！
                </span>
            ) }
            <RichText.Content
                tagName="p"
                className="feature-box__text"
                value={ content }
            />
        </div>
    );
}

<?php
$wrapper_attributes = get_block_wrapper_attributes(
    array(
        'class' => 'feature-box feature-box--' . esc_attr( $attributes['boxStyle'] ),
        'style' => 'padding:' . intval( $attributes['padding'] ) . 'px',
    )
);
?>
<div <?php echo $wrapper_attributes; ?>>
    <?php if ( ! empty( $attributes['showIcon'] ) ) : ?>
        <span class="feature-box__icon" aria-hidden="true">！</span>
    <?php endif; ?>
    <p class="feature-box__text">
        <?php echo wp_kses_post( $attributes['content'] ); ?>
    </p>
</div>

import { useBlockProps, RichText } from '@wordpress/block-editor';

// 設定項目を足す前の、古い save の内容をそのまま書く
const v1 = {
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p.feature-box__text',
            default: '',
        },
    },
    save( { attributes } ) {
        const blockProps = useBlockProps.save( {
            className: 'feature-box',
        } );

        return (
            <div { ...blockProps }>
                <RichText.Content
                    tagName="p"
                    className="feature-box__text"
                    value={ attributes.content }
                />
            </div>
        );
    },
};

// 新しいものから順に並べる
export default [ v1 ];

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
import Edit from './edit';
import save from './save';
import deprecated from './deprecated';

registerBlockType( metadata.name, {
    edit: Edit,
    save,
    deprecated,
} );