Gutenbergエディターのブロックに独自のスタイル追加する方法

以下のコードをfunctions.phpに追加します。

/**
 * カスタム段落スタイルの一覧を取得
 *
 * @return array スタイル識別子（クラス名）をキーとし、ラベルとCSS文字列を持つ連想配列
 */
if (!function_exists('get_my_custom_paragraph_styles')):
function get_my_custom_paragraph_styles() {
  return [
    'is-style-border-solid'  => ['label' => '実線', 'css' => 'border:2px solid #000; padding:5px;'],
    'is-style-border-dashed' => ['label' => '破線', 'css' => 'border:2px dashed #000; padding:5px;'],
    'is-style-border-dotted' => ['label' => '点線', 'css' => 'border:2px dotted #000; padding:5px;'],
  ];
}
endif;


/**
 * 指定されたスタイルハンドルにカスタム段落のインラインCSSを追加
 *
 * @param string $handle スタイルハンドル名
 * @return void
 */
if (!function_exists('enqueue_my_custom_paragraph_inline_styles')):
function enqueue_my_custom_paragraph_inline_styles($handle) {
  $paragraph_styles = get_my_custom_paragraph_styles();
  $generated_css    = '';

  foreach ($paragraph_styles as $class_name => $data) {
    $generated_css .= '.' . esc_attr($class_name) . ' {' . $data['css'] . "}\n";
  }

  wp_add_inline_style($handle, $generated_css);
}
endif;


// エディター用JS・CSSを追加
add_action('enqueue_block_editor_assets', function () {
  // JSファイルを登録
  wp_register_script('custom-paragraph-controls', get_theme_file_uri('/custom-editor.js'), ['wp-blocks', 'wp-element', 'wp-components', 'wp-block-editor', 'wp-hooks'], null, true);

  // スタイル一覧をJavaScriptへ渡す
  $paragraph_styles = get_my_custom_paragraph_styles();
  wp_add_inline_script('custom-paragraph-controls', 'const paragraphStyles = ' . wp_json_encode($paragraph_styles) . ';', 'before');

  // エディター用JS・CSSを追加
  enqueue_my_custom_paragraph_inline_styles('wp-edit-blocks');
  wp_enqueue_script('custom-paragraph-controls');
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  enqueue_my_custom_paragraph_inline_styles('wp-block-library');
});

以下のコードをcustom-editor.jsに追加します。

/**
 * ブロックエディターの段落ブロックにカスタムスタイル選択パネルを追加
 */
(function () {
  var addFilter         = wp.hooks.addFilter;
  var InspectorControls = wp.blockEditor.InspectorControls;
  var PanelBody         = wp.components.PanelBody;
  var el                = wp.element.createElement;

  /**
   * CSS文字列をReactのstyleオブジェクトに変換
   *
   * @param {string} cssString CSS文字列
   * @return {Object} 変換されたstyleオブジェクト
   */
  var parseCssToObj = function (cssString) {
    if (!cssString) {
      return {};
    }

    return cssString.split(';').reduce(function (acc, rule) {
      var parts    = rule.split(':');
      var property = parts[0];
      var value    = parts[1];

      if (property && value) {
        var formattedProperty = property.trim().replace(/-([a-z])/g, function (g) {
          return g[1].toUpperCase();
        });
        acc[formattedProperty] = value.trim();
      }

      return acc;
    }, {});
  };

  /**
   * 段落ブロックにカスタムコントロールを追加
   *
   * @param {Function} BlockEdit 既存のBlockEditコンポーネント
   * @return {Function} 拡張されたコンポーネント
   */
  var withCustomControls = function (BlockEdit) {
    return function (props) {
      var attributes    = props.attributes;
      var setAttributes = props.setAttributes;
      var isSelected    = props.isSelected;

      // 対象外のブロックは終了
      if (props.name !== 'core/paragraph') {
        return el(BlockEdit, props);
      }

      // カスタムスタイル一覧を取得
      var styles = typeof paragraphStyles !== 'undefined' ? paragraphStyles : {};

      var inspectorControls = null;

      // ブロック選択時のみパネルを生成
      if (isSelected) {
        // スタイル選択ボタンを生成
        var buttons = Object.keys(styles).map(function (key) {
        var isCurrent = attributes.className === key;
          
          // プレビューを生成
          var previewDiv = el('div', {
            style: Object.assign({
              marginBottom: '8px',
              minHeight:    '20px'
            }, parseCssToObj(styles[key].css))
          }, 'サンプル');

          // ラベルを生成
          var labelDiv = el('div', {
            style: {
              fontSize: '12px',
              color:    '#333'
            }
          }, styles[key].label);

          // ボタンを生成
          return el('button', {
            key: key,
            type: 'button',
            onClick: function () {
              setAttributes({ className: isCurrent ? '' : key });
            },
            style: {
              padding:      '10px',
              cursor:       'pointer',
              background:   isCurrent ? '#f0f0f0' : '#fff',
              border:       isCurrent ? '2px solid #00a0d2' : '1px solid #ccc',
              borderRadius: '4px',
              textAlign:    'center'
            }
          }, previewDiv, labelDiv);
        });

        // インスペクターパネルを生成
        inspectorControls = el(InspectorControls, null,
          el(PanelBody, { title: '段落スタイル', initialOpen: true },
            el('div', {
              style: {
                display:             'grid',
                gridTemplateColumns: 'repeat(2, 1fr)',
                gap:                 '10px'
              }
            }, buttons)
          )
        );
      }

      // ブロック編集画面とカスタムパネルを表示
      return el(wp.element.Fragment, null,
        el(BlockEdit, props),
        inspectorControls
      );
    };
  };

  addFilter('editor.BlockEdit', 'custom/paragraph-controls', withCustomControls);
})();