WordPressのブロックエディタで複数ページに共通のセクション（CTAバナー、サービス紹介枠、スタッフ紹介カードなど）を配置する際、「レイアウトの骨格や余白は全ページで統一したいが、ページごとに背景の配色トーンや見出し・ボタンの文言だけは変えたい」という場面があります。こうしたデザインの一貫性と柔軟なコンテンツ編集を両立する標準機能が「Section Styles（セクションスタイル）」と「同期パターンの部分上書き（Synced Pattern Overrides）」です。

Section Stylesを使うと、グループやカラムなどの親コンテナを選択して1クリックするだけで、内部に含まれる見出し・段落・ボタン・リンクの配色までまとめて切り替えられます。さらに同期パターンの部分上書き（core/pattern-overrides）を組み合わせれば、ブロック構造をロックしたまま、指定したテキストや画像だけを配置先ページごとに書き換えることが可能です。本記事では、両機能の仕組みと管理画面・ブロックエディタ上のどの箇所を操作するのかを、図解と実際の画面キャプチャーとともに整理します。

従来のブロック個別設定・同期パターンと新方式の違い

これまでセクション単位で「ダーク背景＋白文字＋反転ボタン」のような配色を作る場合、親のグループブロックだけでなく、中に入っている見出しや段落、ボタンの色を1つずつ手動で変更するか、専用のCSSクラスを用意してstyle.cssに記述する必要がありました。また、従来の同期パターン（旧：再利用ブロック）は「1箇所でテキストを直すと全ページの同じパターンが書き換わる」仕様だったため、文言だけを変えたい場合は同期を解除して複製するしかなく、後からレイアウトや余白を一括修正できなくなる課題がありました。

Section Stylesと同期パターンの部分上書きを導入することで、「配色スキームの切り替えはSection Styles」「構造の維持と文言の個別変更はPattern Overrides」と役割を分担でき、独自CSSや非同期コピーを増やさずにサイト全体のデザイン統一を保てるようになります。

実際のWordPressブロックエディタ画面でSection Stylesを適用する操作箇所は以下の通りです。まず左側の「ドキュメント概観（リスト表示）」で親コンテナとなる「グループ」ブロックを選択します（画面内の①）。続いて画面右側の設定サイドバーで「スタイル（◐）」タブを開くと（②）、「スタイル」欄にカスタム定義した「ダーク強調セクション」ボタンが表示されます（③）。このボタンを1クリックするだけで、グループ全体の背景色だけでなく、内部の見出し・本文・ボタンの配色まで一括で切り替わります。

Section Styles（セクションスタイル）の仕組みとJSON定義

Section Stylesは、ブロックテーマのstylesディレクトリ内にJSONファイル（theme.json version 3形式の部分定義ファイル）を配置することで、複数のコンテナブロックに対して共通のスタイルバリエーションを一括登録できる機能です。

styles/section-dark.json の配置場所と実装コード例

テーマフォルダ内のどこにファイルを保存し、JSON内の各項目がブロックエディタ画面のどの部分に対応するかを実際のファイル構成・コード画面で示すと以下のようになります。テーマ直下の「styles」フォルダ内に section-dark.json を作成して保存すると（①）、"title" に記述した名称がエディタ右サイドバーのボタン名になり（②）、"blockTypes" で指定したブロック（グループ・カラム・カバー）を選択したときだけそのボタンが表示されます（③）。そして "elements" 内の設定によってコンテナ内部の見出し・リンク・ボタンの配色が連動します（④）。

そのままコピーして使える styles/section-dark.json の実装コードは以下の通りです。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "ダーク強調セクション",
  "slug": "section-dark",
  "blockTypes": [
    "core/group",
    "core/columns",
    "core/cover"
  ],
  "styles": {
    "color": {
      "background": "#0f172a",
      "text": "#f8fafc"
    },
    "elements": {
      "heading": {
        "color": {
          "text": "#ffffff"
        }
      },
      "link": {
        "color": {
          "text": "#38bdf8"
        }
      },
      "button": {
        "color": {
          "background": "#38bdf8",
          "text": "#0f172a"
        },
        "border": {
          "radius": "6px"
        }
      }
    }
  }
}

同期パターンの部分上書き（Pattern Overrides）の仕組み

同期パターンの部分上書き（Pattern Overrides）は、Block Bindings APIを基盤として動作する機能です。同期パターン内の特定のブロックに対して「上書きを許可」すると、ブロックの属性（metadata.bindings）にcore/pattern-overridesソースが自動で紐づけられます。

• 見出しブロック（core/heading）：表示テキスト（content）の上書きに対応しています。
• 段落ブロック（core/paragraph）：説明文などのテキスト（content）の上書きに対応しています。
• ボタンブロック（core/button）：ボタンのラベル文字列（text）、リンク先URL（url）、リンクターゲット（linkTarget・rel）の上書きに対応しています。
• 画像ブロック（core/image）：画像URL（url）、代替テキスト（alt）、タイトル属性（title）、メディアID（id）の上書きに対応しています。

同期パターン編集画面で「上書きを有効化」を設定する場所と内部マークアップ

同期パターンの編集画面上で「部分上書き」を有効化する具体的な操作箇所は以下の通りです。まず同期パターン内のリスト表示またはキャンバス上で、配置先ページごとに変更を許可したい見出し・段落・ボタンなどの対象ブロックを選択します（画面内の①）。次に、画面右側の「ブロック」サイドバーで「設定（⚙）」タブを開き、一番下にある「高度な設定（Advanced）」パネルを展開して「上書きを有効化（Enable overrides）」ボタンをクリックします（②）。すると確認ダイアログが表示されるので、識別用の名前（例：cta_heading）を入力して「有効化」をクリックします（③）。

上記の手順で「上書きを有効化」を設定すると、ブロックの内部マークアップには以下のように固有の metadata.name と metadata.bindings が自動で記録されます。

<!-- wp:group {"className":"is-style-section-dark","layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-section-dark">

  <!-- wp:heading {"metadata":{"name":"cta_heading","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
  <h2 class="wp-block-heading">無料相談・資料請求はこちら</h2>
  <!-- /wp:heading -->

  <!-- wp:paragraph {"metadata":{"name":"cta_description","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
  <p>導入手順や料金プランについて、担当者が詳しくご案内いたします。</p>
  <!-- /wp:paragraph -->

  <!-- wp:buttons -->
  <div class="wp-block-buttons">
    <!-- wp:button {"metadata":{"name":"cta_button","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
    <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">詳しく見る</a></div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->

</div>
<!-- /wp:group -->

Section Stylesと部分上書きパターンを組み合わせる手順

実務でSection Stylesと同期パターンの部分上書きを組み合わせて運用する流れは、以下の4ステップに集約されます。

作成した同期パターンを実際の各ページ（例：料金プランページ）へ配置して編集する際の画面は以下の通りです。同期パターン全体は紫色の枠線で囲まれ、余白やブロックの並び順といったレイアウト構造はロックされていますが、上書きを許可した見出し・説明文・ボタンだけはキャンバス上で直接そのページ専用の文言やリンク先URLへ書き換えることができます（画面内の①）。また、右サイドバーの「コンテンツ」欄では上書き可能な要素が一覧表示され、いつでも元の初期テキストへリセットできるほか（②）、下の「スタイル」欄からページの文脈に合わせてSection Stylesの配色を1クリックで切り替えられます（③）。

この構成を作っておくと、たとえば後から「全ページのCTAセクションの角丸や余白を変更したい」「ダークセクションのボタン色をブランドカラーに変えたい」といったデザイン改修が発生した際にも、元の同期パターンまたはstylesフォルダのJSONを1箇所修正するだけで、各ページで個別に書き換えた文言やリンク先を保ったままデザインだけを一斉に更新できます。

まとめ

WordPressの「Section Styles（セクションスタイル）」と「同期パターンの部分上書き（Pattern Overrides）」は、ブロックテーマにおけるデザインの統一管理と各ページの柔軟なテキスト編集を両立させる機能です。

複数ページで繰り返し使うCTA枠やカードレイアウトを作成する際は、ぜひSection StylesのJSON定義と同期パターンの部分上書きを取り入れてみてください。