WordPressブロックエディタの見出しに自動でクラスを追加する方法

/**
 * 見出しに自動的にクラスを追加
 * 
 * @param string $block_content ブロックのHTML
 * @param array $block ブロックの情報
 * @return string クラス追加後のHTML
 */
function add_custom_heading_class($block_content, $block) {
    // 見出しブロック以外は処理をスキップ
    if ($block['blockName'] === 'core/heading') {
        // levelが設定されていない場合はデフォルトでh2として扱う
        $level = isset($block['attrs']['level']) ? $block['attrs']['level'] : 2;

        // H2にc-title02クラスを追加
        if ($level === 2) {
            // 既存のclass属性がある場合は、そこにクラスを追加
            if (preg_match('/<h2[^>]*class="([^"]*)"/', $block_content)) {
                // 既存のclass="..."に追加
                $block_content = preg_replace('/<h2([^>]*)class="([^"]*)"/', '<h2$1class="$2 c-title02"', $block_content);
            } else {
                // class属性がない場合は新規作成
                $block_content = preg_replace('/<h2/', '<h2 class="c-title02"', $block_content, 1);
            }
        }

        // H3にc-title03クラスを追加
        if ($level === 3) {
            // H2と同様の処理
            if (preg_match('/<h3[^>]*class="([^"]*)"/', $block_content)) {
                $block_content = preg_replace('/<h3([^>]*)class="([^"]*)"/', '<h3$1class="$2 c-title03"', $block_content);
            } else {
                $block_content = preg_replace('/<h3/', '<h3 class="c-title03"', $block_content, 1);
            }
        }
    }
    // クラスを追加（または元のまま）のHTMLを返す
    return $block_content;
}

// render_blockフィルターにフック（各ブロックがレンダリングされる直前に実行）
add_filter('render_block', 'add_custom_heading_class', 10, 2);
```

<h2 class="custom-style c-title02">はじめに</h2>

// 投稿コンテンツ内のスタイル
.p-article__content {
  
  // ==========================================================================
  // 見出しスタイル（h2, h3, h4）
  // ==========================================================================

  // h2見出しスタイル（下線）
  h2 {
    font-size: myrem(20);
    font-weight: bold;
    margin-top: myrem(40);
    margin-bottom: myrem(16);
    padding-bottom: myrem(8);
    color: #333;

    // 最初のh2は上マージンなし
    &:first-child {
      margin-top: 0;
    }
  }

  // h3見出しスタイル（シンプル）
  h3 {
    font-size: myrem(18);
    font-weight: bold;
    margin-top: myrem(30);
    margin-bottom: myrem(12);
    color: #333;
  }

  // h4見出しスタイル（上下線）
  h4 {
    font-size: myrem(16);
    font-weight: bold;
    margin: myrem(30) 0 myrem(12);
    padding: myrem(6) myrem(16);
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: #333;
  }

  // リンクのホバースタイル
  a {
    &:hover {
      color: #06c;
    }
  }

  // インラインコード
  code {
    background-color: #f5f5f5;
    padding: myrem(2) myrem(6);
    border-radius: myrem(3);
    font-family: "Courier New", monospace;
    font-size: 0.9em;
  }

  // コードブロック
  pre {
    background-color: #f5f5f5;
    padding: myrem(20);
    border-radius: myrem(4);
    overflow-x: auto;
    margin: myrem(20) 0;

    // pre内のcodeは背景なし
    code {
      background: none;
      padding: 0;
    }
  }
}