ブロック設定の仕組み

前のページの theme.json 設定ドキュメントでは、グローバルレベルで特定のプロパティを構成する方法を学びました。基本的に、これは特定のプロパティ/機能をサポートするすべてのブロックに適用されることを意味します。

あなたは、theme.json で多くのこれらのプロパティを構成したでしょう（例として短縮されています—利用可能なすべてのプロパティは、メインの 設定ドキュメント を通じて確認できます）： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "border": {},
  5.         "color": {},
  6.         "custom": {},
  7.         "spacing": {},
  8.         "typography": {}
  9.     }
  10. }

しかし、個々のブロックレベルで設定を追加する必要がある場合があります。ブロックに設定されたものは、そのグローバル設定を上書きします。したがって、グローバル設定を上書きするブロック固有の設定を示す例を見てみましょう。

この例では、カスタムカラーパレットを作成します。これは、カラー設定ドキュメント で学ぶことができます。これはグローバルに適用され、すべてのブロックのカラーピッカーに使用されます。次に、Cover ブロック専用のカスタムカラーパレットを作成します。

まず、theme.json に base と contrast という2つの色を持つグローバルカラーパレットを追加します： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "palette": [
  6.             {
  7.             "color": "#0284c7",
  8.             "name": "Base",
  9.             "slug": "base"
  10.             },
  11.             {
  12.             "color": "#ffffff",
  13.             "name": "Contrast",
  14.             "slug": "contrast"
  15.             }
  16.             ]
  17.         }
  18.     }
  19. }

次に、WordPress エディターで Cover ブロックといくつかのネストされたテキストを追加し、ブロックの テキスト と オーバーレイ の色をあなたの2つのカスタムカラーに保存します：

青い背景と白いテキストの Cover ブロックを表示する WordPress 投稿エディター。

ご覧のとおり、Cover ブロックは現在、theme.json ファイルで構成したグローバルカラーパレットを使用しています。

Cover ブロックにオレンジのカラーパレットを使用させたいと仮定します。settings.blocks[core/cover].color.palette を theme.json ファイルでターゲットにし、カスタムカラーの配列を渡すことでそれを構成できます。

この新しいセクションを既存の theme.json に追加して、次のようにします： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "color": {
  5.             "palette": [
  6.             {
  7.             "color": "#0284c7",
  8.             "name": "Base",
  9.             "slug": "base"
  10.             },
  11.             {
  12.             "color": "#ffffff",
  13.             "name": "Contrast",
  14.             "slug": "contrast"
  15.             }
  16.             ]
  17.         }
  18.         "blocks": {
  19.             "core/cover": {
  20.             "color": {
  21.             "palette": [
  22.             {
  23.             "color": "#ea580c",
  24.             "name": "Base",
  25.             "slug": "base"
  26.             },
  27.             {
  28.             "color": "#fff7ed",
  29.             "name": "Contrast",
  30.             "slug": "contrast"
  31.             }
  32.             ]
  33.             }
  34.             }
  35.         }
  36.     }
  37. }

theme.json の例に示されているように、ブロック設定のための組織構造は、グローバル設定と同じです（つまり、settings.color はグローバルレベルですが、settings.blocks[core/cover].color はブロックレベルです）。

ブラウザウィンドウを更新すると、Cover ブロックは新しい色を表示するはずです：

オレンジの背景と白いテキストの Cover ブロックを表示する WordPress 投稿エディター。

他のブロックを確認すると、それらはまだグローバルカラーパレットを使用します。Cover ブロックだけがこのカスタムオレンジパレットを使用します。

ブロックごとのカラーパレットは、氷山の一角に過ぎません。任意のブロックに対して任意の theme.json を構成できます（ブロックがそれをサポートしている場合）。これにより、テーマの動作に対する驚異的な制御が得られます。

ブロックの設定をターゲットにする場合、その名前空間とスラグの両方を知っておく必要があります。上記では、Cover ブロックが名前空間（core）とスラグ（cover）を持ち、core/cover の名前空間/スラグの組み合わせを作成していることを学びました。すべてのコア WordPress ブロックは core 名前空間を持ち、この情報は任意のブロック（サードパーティのプラグインを含む）の block.json ファイルで見つけることができます。

デフォルトのブロック設定

信じられないかもしれませんが、WordPress は実際に theme.json でいくつかのデフォルトのブロック設定を構成しています。一般的に、これはテーマに任せられますが、これらの設定は主に古いバージョンの WordPress の機能との後方互換性のために有効になっています。

WordPress は、デフォルトで Button と Pullquote ブロックのいくつかの設定を有効にしています。デフォルトの theme.json では次のようになります： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "blocks": {
  5.             "core/button": {
  6.             "border": {
  7.             "radius": true
  8.             }
  9.             },
  10.             "core/pullquote": {
  11.             "border": {
  12.             "color": true,
  13.             "radius": true,
  14.             "style": true,
  15.             "width": true
  16.             }
  17.             }
  18.         }
  19.     }
  20. }

これらのブロック固有の設定は、前のセクションで学んだように、theme.json ファイルで上書きできます。

もし、あなたのグローバル設定のいくつかが特定のブロック、特に Button と Pullquote に適用されないように見える理由を疑問に思っているなら、それはおそらくブロックレベルで設定されているからです。異なる動作を望む場合は、settings.blocks を theme.json で上書きする必要があります。