WordPressのブロックエディタをカスタマイズ！カラーバリエーションの選択ボタンをインスペクターに追加する

add_action('enqueue_block_editor_assets', function() {
  wp_enqueue_script('custom-editor', get_template_directory_uri() . '/js/custom-editor.js');
});

// インスペクターにカラー選択ボタンを追加
wp.hooks.addFilter(
  'editor.BlockEdit',
  'my-plugin/heading-color-control',
  wp.compose.createHigherOrderComponent(
    (BlockEdit) => (props) => {
      // 見出し以外ならそのまま返す
      if (props.name !== 'core/heading') return wp.element.createElement(BlockEdit, props);

      const { attributes, setAttributes } = props;
      const { colorClass } = attributes;

      const options = [
        { label: 'デフォルト', value: '' },
        { label: '赤', value: 'red' },
        { label: '黄色', value: 'yellow' },
        { label: '緑', value: 'green' },
      ];

      const handleClick = (value) => {
        // 同じ値をクリックしたらリセット、それ以外ならセット
        if (colorClass === value) {
          setAttributes({ colorClass: '' });
        } else {
          setAttributes({ colorClass: value });
        }
      };

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(BlockEdit, props),
        wp.element.createElement(
          wp.blockEditor.InspectorControls,
          null,
          wp.element.createElement(
            wp.components.PanelBody,
            {
              title: 'カラーバリエーション',
              initialOpen: true // デフォルトで開いているかどうか
            },
            wp.element.createElement(wp.components.ButtonGroup, {},
              options.map((option) =>
                wp.element.createElement(wp.components.Button, {
                  key: option.value || 'default',
                  isPrimary: colorClass === option.value,
                  isSecondary: colorClass !== option.value,
                  onClick: () => handleClick(option.value),
                }, option.label)
              )
            )
          )
        )
      );
    },
    'headingColorControl'
  )
);

// ブロックコメントに選択した情報を保存
wp.hooks.addFilter(
  'blocks.registerBlockType',
  'my-plugin/heading-color-add-comment',
  function(settings, name) {
    if (name === 'core/heading') {
      settings.attributes = {
        ...settings.attributes,
        colorClass: {
          type: 'string',
          default: '',
        },
      };
    }
    return settings;
  }
);

<!-- wp:heading {"colorClass":"red"} -->
<h2 class="wp-block-heading">見出しタイトル</h2>
<!-- /wp:heading -->

// タグにクラスを追加
wp.hooks.addFilter(
  'blocks.getSaveContent.extraProps',
  'my-plugin/heading-color-add-tag',
  function(props, blockType, attributes) {
    if (blockType.name === 'core/heading' && attributes.colorClass) {
      const existingClass = props.className || '';
      props.className = `${existingClass} ${attributes.colorClass}`.trim();
    }
    return props;
  }
);

<!-- wp:heading {"colorClass":"red"} -->
<h2 class="wp-block-heading red">見出しタイトル</h2>
<!-- /wp:heading -->

// ブロックエディタ内の要素にクラスを追加
wp.hooks.addFilter(
  'editor.BlockListBlock',
  'my-plugin/heading-color-add-editor',
  function(BlockListBlock) {
    return (props) => {
      if (props.name === 'core/heading') {
        const customClass = props.attributes.colorClass;
        if (customClass) {
          props.className = [props.className, customClass].filter(Boolean).join(' ');
        }
      }
      return wp.element.createElement(BlockListBlock, props);
    };
  }
);