【WordPress】ブロックエディタでカスタムクラスを選択できるようにする方法

function custom_block_class_control_enqueue_assets() {
  wp_enqueue_script(
    'custom-block-class-control',
    get_template_directory_uri() . '/js/block-class-control.js',
    array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
    null,
    true
  );
}
add_action('enqueue_block_editor_assets', 'custom_block_class_control_enqueue_assets');

(function (wp) {
  const { addFilter } = wp.hooks;
  const { Fragment } = wp.element;
  const { InspectorControls } = wp.blockEditor;
  const { PanelBody, SelectControl } = wp.components;

  const customClassOptions = [
    { label: '選択なし', value: '' },
    { label: '赤文字', value: 'is-red' },
    { label: '太字', value: 'is-bold' },
    { label: '枠付き', value: 'has-border' },
  ];

  const withCustomClassControl = wp.compose.createHigherOrderComponent((BlockEdit) => {
    return (props) => {
      if (!props.isSelected || !props.name.startsWith('core/')) {
        return <BlockEdit {...props} />;
      }

      const currentClass = props.attributes.className || '';

      return (
        <Fragment>
          <BlockEdit {...props} />
          <InspectorControls>
            <PanelBody title="カスタムクラス" initialOpen={true}>
              <SelectControl
                label="スタイル選択"
                value={currentClass}
                options={customClassOptions}
                onChange={(value) => {
                  props.setAttributes({ className: value });
                }}
              />
            </PanelBody>
          </InspectorControls>
        </Fragment>
      );
    };
  }, 'withCustomClassControl');

  addFilter(
    'editor.BlockEdit',
    'custom/block-class-control',
    withCustomClassControl
  );
})(window.wp);

.is-red {
  color: red;
}
.is-bold {
  font-weight: bold;
}
.has-border {
  border: 1px solid #ccc;
  padding: 10px;
}