WordPressのパターン機能がクラシックブロックに変換される原因と解決方法

WordPressのパターン機能は、同じデザインのコンテンツを繰り返し使う際に非常に役立ちます。見出し、画像、ボタンなどがセットになったブロックの組み合わせを、ワンクリックで呼び出せる便利な機能です。

しかし、この便利なパターン機能を使っていると、パターンがクラシックブロックに変換されてしまうことがあります。
この現象が起こると、レイアウトが崩れたり、コンテンツが正しく表示されなくなったりしてしまいます。

この現象は、WordPressのブロックエディターがパターン内の特定のコンテンツを正しく解釈できないときに発生します。

ここでは、WordPressのパターン機能がクラシックブロックに変換される原因と、その解決方法について詳しく解説していきます。

クラシックブロックに変換される原因

WordPressのパターン機能で作成したブロックが、意図せずクラシックブロックに変換されてしまう現象は、いくつかの原因によって発生します。

不正なHTMLコードや、ブロックエディターが認識できないHTMLが含まれている
パターンに含まれるカスタムHTMLブロック内に、pタグなどの構造が不適切だったり、WordPressのブロックエディターが想定しない形式のHTMLコードが含まれていると、エラーが発生し、クラシックブロックに変換されることがあります。
特に、aタグ（リンク）が不適切な形で含まれている場合に発生することが報告されています。

古いテーマやプラグインとの非互換性
使用しているテーマやプラグインが最新のブロックエディター（Gutenberg）に完全に対応していない場合、パターンが正しく読み込まれず、クラシックブロックに変換されることがあります。
クラシックエディタープラグインが有効になっている場合も、同様の問題を引き起こす可能性があります。

ブロックの復旧失敗
何らかの理由でブロックの読み込み中にエラーが発生し、WordPressが「想定されていないコードや無効なコンテンツが含まれている」と判断した場合、そのブロックを修復しようと試みます。
修復がうまくいかない場合、最終手段として「クラシックブロックに変換」のオプションが提示されることがあります。

上記のようなことから、正常にパターンを呼び出すことができないこともあります。

例として、YouTube動画の埋め込みの構造化データを設定するテンプレートを、カスタムHTMLブロックを使ってパターンを作成して利用する流れで見てみます。

ダッシュボードのメニューの「外観」の項目から「パターン」を選択します。

パターンを追加から、パターンの名前と必要であればカテゴリーを設定して追加していきます。

カスタムHTMLブロックで、テンプレートとなるHTMLコードを記述して保存します。

これは、これまで通りのパターンの作成の流れになります。

しかし、実際の投稿で作成したパターンを追加すると、クラシックブロックとなりテンプレートのコードを使うことができないという現象が起きます。ブロックへ変換を行なってもうまくHTMLコードが展開されません。

カスタムHTMLブロックを使って作成したパターンがクラシックブロックに変換される

また、「HTMLとして編集」モードに切り替えると、pタグや改行のbrタグが自動的に挿入され、思い通りの構造にならなかったり、コードによっては正常に認識されません。（特に今回の構造化データの場合は）

クラシックブロックをHTMLとして編集しようとすると自動的にHTMLタグが挿入される

このように、カスタムHTMLブロックを使って作成したパターンは、WordPressのブロックエディターが想定しない形式のHTMLコードが含まれている場合に起こることが多いです。

クラシックブロックに変換される問題の解決方法

このパターン機能がクラシックブロックに変換される問題の解決方法としては、HTMLコードが正しくマークアップされているかを確認して修正を行なったり、テーマやプラグインのアップデートや原因の追求・対応を行うなど様々な方法がありますが、とても手間がかかる作業となります。

そこで、一番手軽にできるのが wp:html のコメントアウトで、カスタムHTMLブロック内のHTMLコードを囲うことです。

カスタムHTMLブロック

<!-- wp:html -->
// HTMLコード
<!-- /wp:html -->

wp:html は、その間に記述されたコンテンツをWordPressが「HTMLブロック」として認識するためのコメントアウトになります。

例えば、YouTube動画の埋め込みの構造化データを設定するテンプレートを、カスタムHTMLブロックを使ってパターンを作成する場合は、以下のようになります。

カスタムHTMLブロック

<!-- wp:html -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "YouTube動画のタイトルを記述",
  "description": "YouTube動画の内容を具体的に説明。キーワードを自然に含め、動画が何について語っているのか、何を解決するのかなどを詳しく記述。",
  "uploadDate": "2025-05-01T10:00:00+09:00",
  "duration": "PT2M17S",
  "thumbnailUrl": "https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg", 
  "contentUrl": "https://www.youtube.com/watch?VIDEO_ID", 
  "embedUrl": "https://www.youtube.com/embed/VIDEO_ID",
  "publisher": {
    "@type": "Organization",
    "name": "企業名 または サイト名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/images/logo.png"
    }
  }
}
</script>
<!-- /wp:html -->

既に作成したパターンを編集する場合でも、問題なく適用させることができます。

WordPressが「HTMLブロック」として認識するためのコメントアウトでHTMLコードを囲う

編集を保存した後、実際にパターンを使ってみると、ブロックの形式で問題なく正常にHTMLコードが展開されるのが確認できます。

カスタムHTMLブロックを使ったパターンがブロックの形式で問題なく正常にHTMLコードが展開される

今回の解決方法は、HTMLブロックとして認識させるものですので、万能にも思えますが注意点もあります。

パターン機能で複雑なレイアウトを作成する際に、複数のブロックから構成することができますが、HTMLブロックの中に、さらに他のブロックを入れ子（ネスト）にすることは原則としてできません。この場合は、各ブロックで wp:html のコメントアウトでコードを囲う必要があります。
また、HTMLコードを編集することがある場合、テーマやWordPressのバージョンなどにもよるかもしれませんが、編集のたびにHTMLブロックとして認識するためのコメントアウトを記述する必要があり、非開発者にとっては扱いにくく、メンテナンス性の問題などもあります。

複雑な構造でパターンを作成したり、頻繁に編集することがないコードであれば、特に気にする必要はないでしょう。

最後に

WordPressのパターン機能は、記事作成を効率化する上で非常に便利なツールです。しかし、カスタムHTMLブロック内のコードがWordPressの仕様と合わない場合に、意図せずクラシックブロックに変換されてしまう問題が発生することがあります。

この記事でご紹介したように、この問題を解決する最も手軽で効果的な方法は、カスタムHTMLブロック内のHTMLコードを、「HTMLブロック」として認識するためのコメントアウトで囲むことです。これにより、WordPressがコードをHTMLブロックとして正しく認識し、デザインが崩れるのを防ぐことができます。

ぜひこの記事を参考に、パターン機能を活用して、より快適なWordPressでの記事作成にお役立てください。