WordPress 6.x ブロックエディタの進化まとめ：サイトエディタ・パターン・スタイルブック完全ガイド

WordPress 6.x系では、ブロックエディタ（Gutenberg）が大幅に進化しました。サイトエディタの安定化、パターンシステムの刷新、スタイルブックの導入など、サイト構築のワークフローが根本から変わっています。この記事では、WordPress 6.0〜6.7で追加された主要機能を実践的に解説します。

サイトエディタ（Full Site Editing）の成熟

WordPress 6.2でサイトエディタがベータから正式版に昇格しました。ヘッダー、フッター、サイドバーを含むサイト全体をブロックエディタで編集できます。

サイトエディタでは「テンプレート」と「テンプレートパーツ」を直接編集できます。PHPテンプレートファイルを触らずに、ビジュアルエディタ上でレイアウトを組み替えられるのは革命的です。

テンプレートの種類

• ページテンプレート: 固定ページ・投稿ごとに異なるレイアウトを適用
• アーカイブテンプレート: カテゴリ・タグ一覧ページのレイアウト
• 検索結果テンプレート: 検索結果ページの表示形式
• 404テンプレート: ページが見つからない場合の表示

パターンシステムの刷新

WordPress 6.3で「再利用ブロック」が「パターン」に統合されました。パターンには2種類あります。

• 同期パターン（旧：再利用ブロック）: 一箇所を編集すると全ての使用箇所に反映される
• 非同期パターン: テンプレートとして挿入。挿入後は独立して編集可能

テーマ開発者は、patternsディレクトリにPHPファイルを配置するだけでカスタムパターンを登録できます。

// patterns/hero-section.php
<?php
/**
 * Title: ヒーローセクション
 * Slug: mytheme/hero-section
 * Categories: featured
 */
?>
<!-- wp:cover {"dimRatio":50} -->
<div class="wp-block-cover">
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"textAlign":"center","level":1} -->
    <h1 class="has-text-align-center">サイトタイトル</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">サブタイトルテキスト</p>
    <!-- /wp:paragraph -->
  </div>
</div>
<!-- /wp:cover -->

スタイルブック

WordPress 6.2で導入されたスタイルブックは、サイト内の全ブロックの見た目を一覧で確認・編集できる機能です。「外観」→「エディター」→「スタイル」からアクセスできます。

見出し、段落、ボタン、テーブルなど全てのブロックタイプのスタイルを、実際のプレビューを見ながらカスタマイズできます。CSSを一行も書かずに、サイト全体のデザインシステムを構築できるのは非常に強力です。

theme.jsonの進化

theme.jsonはブロックテーマの心臓部です。バージョン2（WordPress 6.1〜）では、設定項目が大幅に増えました。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1a73e8", "name": "プライマリ" },
        { "slug": "secondary", "color": "#333", "name": "セカンダリ" }
      ],
      "gradients": [],
      "custom": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
          "slug": "system",
          "name": "システムフォント"
        }
      ],
      "fontSizes": [
        { "slug": "small", "size": "14px", "name": "小" },
        { "slug": "medium", "size": "16px", "name": "中" },
        { "slug": "large", "size": "24px", "name": "大" }
      ]
    },
    "spacing": {
      "units": ["px", "rem", "%"]
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": { "fontWeight": "700" }
      }
    }
  }
}

WordPress 6.5〜6.7の注目機能

• フォントライブラリ（6.5）: Google Fontsやローカルフォントをアップロードして管理画面から適用
• ブロックバインディングAPI（6.5）: ブロックの属性をカスタムフィールドや外部データに動的にバインド
• データビュー（6.6）: 投稿・ページ一覧がグリッド表示に対応、フィルタ・ソート機能が強化
• セクションスタイル（6.7）: グループブロックにスタイルバリエーションを適用して、セクション単位でデザインを切り替え

クラシックテーマからの移行

既存のクラシックテーマ（PHPテンプレートベース）からブロックテーマへの移行は段階的に行えます。まずは「テーマサポート」を追加してブロックエディタの機能を有効にし、徐々にテンプレートをブロックベースに置き換えていくアプローチが現実的です。

まとめ

WordPress 6.x系のブロックエディタは、もはや単なる記事エディタではなく、サイト全体を構築するフルサイトエディティングツールへと進化しました。theme.jsonとパターンを活用すれば、コードを最小限に抑えつつ、高品質なテーマを開発できます。