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

WordPressのブロックエディタ（Gutenberg）では、標準でも「追加CSSクラス」を手動で入力できますが、選択式でカスタムクラスを設定できると、誤入力を防ぎながら統一感のあるデザインを保つことができます。この記事では、カスタムクラスをドロップダウンで選べるようにするカスタマイズ方法を解説します。

ブロックにカスタムクラス選択機能を追加するメリット

ブロックごとに事前に用意したクラス名を選択できるようにすると、以下のようなメリットがあります。

• 誤ったクラス名の入力を防げる
• 編集者が統一されたスタイルを選べる
• スタイルの管理がしやすくなる

Step1：テーマにJavaScriptファイルを追加する

まずはブロックエディタにカスタムJSを読み込む準備をします。functions.php に以下を追加してください。

function enqueue_block_editor_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', 'enqueue_block_editor_assets');

Step2：block-class-control.js の作成

/js/block-class-control.js に以下のコードを記述します。

(function (wp) {
  const { addFilter } = wp.hooks;
  const { assign } = lodash;
  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);

Step3：CSSを追加する

選択されたクラスに応じたスタイルをテーマのCSSファイルなどに定義しておきましょう。

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

まとめ

Gutenbergブロックにカスタムクラスの選択機能を追加することで、編集者はスタイルの統一がしやすくなり、手入力によるミスも防げます。特に複数の編集者で運用するサイトや、スタイルガイドに従いたいサイトにおいて非常に有効なカスタマイズです。必要に応じて、使用するクラス