スペーシング（Spacing）

間隔設定

settings.spacing オブジェクトには、設定できるいくつかのプロパティがあります：

• blockGap: サポートされているブロックの ブロック間隔 オプションを有効にするかどうか。真偽値 (true/false) で指定できます。デフォルトは null です。null に設定すると、WordPress が生成した CSS も無効になります。
• margin: サポートされているブロックの マージン オプションを有効にするかどうか。デフォルトは false です。
• padding: サポートされているブロックの パディング オプションを有効にするかどうか。デフォルトは false です。
• customSpacingSize: サポートされているブロックに対して、ユーザーがカスタム間隔値を入力できるようにするかどうか。デフォルトは true です。
• spacingScale: カスタム間隔スケールを定義するための設定オブジェクト。WordPress は、1.5rem ずつ増加する 7 段階のデフォルトスケールを定義します。
• spacingSizes: 間隔スケールを上書きするか、追加する可能性のあるカスタムサイズオブジェクトの配列。
• units: ユーザーがカスタム間隔を追加する際に選択できる可能性のある CSS 単位の配列。

以下は、デフォルトの WordPress theme.json の間隔設定の例です：

{
    "version": 2,
    "settings": {
        "spacing": {
            "blockGap": null,
            "customSpacingSize": true,
            "margin": false,
            "padding": false,
            "spacingScale": {
            "operator": "*",
            "increment": 1.5,
            "steps": 7,
            "mediumStep": 1.5,
            "unit": "rem"
            },
            "spacingSizes": [],
            "units": [ "px", "em", "rem", "vh", "vw", "%" ]
        }
    }
}

間隔オプションの有効化または無効化

前のセクションのデフォルト設定で述べたように、ユーザーインターフェースの要素を有効または無効にするための設定がいくつかあります。このセクションでは、これらの設定をどのように構成するかを学びます。

ブロック間隔の有効化（ブロックギャップ）

WordPress における「ブロックギャップ」とは、ページ上のブロック間の間隔を指します。ほとんどの場合、これはブロック間の垂直間隔です。しかし、ブロックが水平フレックスまたはグリッドレイアウトに設定されている場合、水平間隔を指すこともあります。

フローレイアウト（デフォルト）では、ブロックギャップは CSS margin-top プロパティを使用して兄弟要素に適用されます。フレックスまたはグリッドレイアウトでは、CSS gap プロパティを使用して適用されます。

この設定が完全に無効になっていない限り（デフォルト）、WordPress はブロックギャップのための CSS を自動的に出力します。

ブロックギャップスタイルの定義については、スタイルドキュメント で詳しく学ぶことができますが、用語の基本的な理解があれば、このオプションをどのように扱うかを決定するのに役立つでしょう。

settings.spacing.blockGap の主な目的は、サポートされているブロックの ブロック間隔 コントロールのユーザーインターフェースを有効または無効にすることです。true または false に設定することでこれを行うことができます。

ただし、null（デフォルト値）のままにすることもできます。これにより、ユーザーインターフェースが無効になります。さらに、WordPress が生成したブロック間隔 CSS が削除されます。

デフォルトの null 値のままにすることは、特別な場合を除いて通常は推奨されません。一般的には、デザインの垂直リズムの一部として一貫した間隔を望むでしょう。null に設定すると、カスタム CSS を介して手動で処理する必要があります。

settings.spacing.blockGap にどの値を割り当てるかを決定する際の参考として、この表を使用してください：

設定を構成してみてください。theme.json ファイルを開き、プロパティを true に設定します：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "blockGap": true<br> }<br> }<br>}<br>

プロパティをサポートするブロックでは、ブロック間隔 コントロールが表示されるはずです。以下は、投稿テンプレートブロックでのその様子のスクリーンショットです：



WordPress のレイアウトシステムの動作方法により、個々のコンテナに特有の CSS が出力され、これによりそれらのコンテナ内にネストされたブロック間のギャップが処理されます。スクリーンショットの例では、以下のような CSS になります：


bash<br>.wp-container-17.wp-container-17 > :first-child:first-child {<br> margin-block-start: 0;<br>}<br><br>.wp-container-17.wp-container-17 > * {<br> margin-block-start: var(--wp--preset--spacing--plus-4);<br> margin-block-end: 0;<br>}<br>

もちろん、ID (17) と値はケースバイケースで異なります。


### マージンとパディングの有効化

マージンとパディングの設定は、もう少し簡単です。デフォルトでは両方とも無効になっており、true を theme.json に設定することで有効にできます：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "margin": true,<br> "padding": true<br> }<br> }<br>}<br>

これにより、サイドバーのインスペクターコントロールでサポートされているブロックに マージン と パディング コントロールが表示されます：



もちろん、これらの両方をデフォルト値の false のままにすることも、好みに応じて構成することもできます。


### ユーザー定義の間隔サイズの無効化

blockGap、margin、または padding のいずれかの間隔設定が有効になっている場合、WordPress はそれらの値を設定するためのユーザーインターフェースを出力します。デフォルトでは、ユーザーはプリセットの間隔サイズのリストから選択することができ（「間隔スケールとサイズ」を参照）、カスタム値を入力することもできます。

このスクリーンショットでは、ボタンブロックに対してカスタム ブロック間隔 設定が選択されていることがわかります：



テーマのために、ユーザーを事前定義された間隔スケールまたはサイズに制限したい場合があります。これは、デザイン全体で一貫した間隔を確保したい場合に良いアイデアです。

これを行うには、customSpacingSizes 設定を false に設定する必要があります。これにより、エディタ UI でカスタム間隔オプションが無効になり、テーマで定義されたサイズのコントロールは利用可能なままになります：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "customSpacingSize": false<br> }<br> }<br>}<br>

カスタム間隔サイズが無効になっている場合、ボタンブロックの例からの ブロック間隔 オプションは、テーマのプリセットサイズに制限されます：




## 許可される間隔単位の定義

前のセクションで説明した settings.spacing.customSpaceSize オプションを有効にすることを選択した場合、もう一つの選択をする必要があります：あなたのテーマはどの CSS 単位値を許可しますか？

デフォルトでは、WordPress はユーザーが選択できる可能性のある CSS 単位のサブセットから選択できるようにします（CSS 仕様には数十種類あります）。サポートしたい単位を選択するには、settings.spacing.units 配列にそれらを追加する必要があります theme.json（デフォルトと共に表示）：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "units": [ "px", "em", "rem", "vh", "vw", "%" ]<br> }<br> }<br>}<br>

現在許可されている可能な単位は次のとおりです：

- px
- %
- em
- rem
- vw
- vh
- vmin
- vmax
- ch
- ex
- cm
- mm
- in
- pc
- pt

WordPress 6.3 現在、許可される単位は上記のリストに制限されています。これを拡張して、より現代的な単位をサポートするための オープンチケット があります。



## 間隔スケールとサイズ

あなたの theme.json ファイルで構成すべき最も重要なことの一つは、間隔プリセットです。WordPress はこれらのプリセットを CSS カスタムプロパティとして生成し、エディタとフロントエンドで読み込みます。

ほとんどのデザイナーは、間隔を処理するための標準的なスケーリングシステムのいずれかを使用し、WordPress はあなたが選択したシステムを使用する柔軟性を提供します。

間隔プリセットを登録する方法は 2 つあります：

- spacingScale: 設定値に基づいて生成されたスケール。
- spacingSizes: 完全にカスタム定義された間隔サイズ。

技術的には、これらの方法の両方を使用し、混合して使用することができます。しかし、一般的には、シンプルさのためにどちらか一方を選択することが推奨されます。

間隔プリセットは、ブロック間隔、マージン、および パディング ブロックコントロールの選択肢として表示されます（サポートされているブロックの場合）。これは、ユーザーにテーマに特有の間隔オプションを提示できることを意味します。また、これらのプリセットを theme.json またはカスタム CSS の スタイル セクションで使用することもできます。

WordPress はデフォルトの間隔スケールを生成します。以下の表に示すように：


| CSS カスタムプロパティ | CSS 値 | ラベル |
| —- | —- | —- |
| --wp-preset--spacing--20 | 0.44rem | 2X-スモール |
| --wp-preset--spacing--30 | 0.67rem | X-スモール |
| --wp-preset--spacing--40 | 1rem | スモール |
| --wp-preset--spacing--50 | 1.5rem | ミディアム |
| --wp-preset--spacing--60 | 2.25rem | ラージ |
| --wp-preset--spacing--70 | 3.38rem | X-ラージ |
| --wp-preset--spacing--80 | 5.06rem | 2X-ラージ |

このスケールがあなたのデザインに合うことはほとんどありません。したがって、これらのデフォルト値を上書きする方法を選択する必要があります。


### カスタム間隔スケール

WordPress は、テーマ作者が設定指示のセットを提供することによってカスタム間隔スケールを作成することを許可します。スケールの各ステップは、--wp--preset--spacing--{step} のスラッグを持つカスタム CSS プロパティを生成します（ステップはその値に関係なく 10 の増分で表示されます）。

spacingScale オブジェクトには、テーマが構成できる 5 つのサブ設定があります：

- operator: スケールを増加させるために使用される演算子。利用可能なオプションは +（加算）と *（乗算）です。デフォルト値は * です。
- increment: operator 設定と組み合わせて使用する際に、スケールを増加させる数値。デフォルト値は 1.5 です。
- steps: スケールの総ステップ数。デフォルト値は 7 です。
- mediumStep: スケールの中間値。デフォルト値は 1.5 です。
- unit: 有効な CSS 間隔単位。利用可能なオプションは px、em、rem、vh、vw、および % です。デフォルト値は rem です。

以下の例は、0.25rem ずつ増加する 7 段階のカスタムスケールです：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "spacingScale": {<br> "operator": "+",<br> "increment": 0.25,<br> "steps": 7,<br> "mediumStep": 1,<br> "unit": "rem"<br> }<br> }<br> }<br>}<br>

スクリーンショットに示されているように、登録された値を設定するための パディング、マージン、および ブロック間隔 コントロールの範囲スライダーが表示されるはずです：



間隔プリセットが 7 つ以下の場合、インターフェースは間隔コントロールの範囲スライダーを表示します。しかし、7 つを超えるとドロップダウン選択が表示されます。これは、ここで使用されている spacingScale メソッドと次のセクションの spacingSizes メソッドの両方に適用されます。

この表は、カスタム間隔スケールを表します（デフォルトスケールと比較して、どのように変わったかを確認してください）：


| CSS カスタムプロパティ | CSS 値 | ラベル |
| —- | —- | —- |
| --wp-preset--spacing--20 | 0.25rem | 2X-スモール |
| --wp-preset--spacing--30 | 0.5rem | X-スモール |
| --wp-preset--spacing--40 | 0.75rem | スモール |
| --wp-preset--spacing--50 | 1rem | ミディアム |
| --wp-preset--spacing--60 | 1.25rem | ラージ |
| --wp-preset--spacing--70 | 1.5rem | X-ラージ |
| --wp-preset--spacing--80 | 1.75rem | 2X-ラージ |

mediumStep 値は、WordPress が CSS を生成する際に常に --wp--preset--spacing--50 プリセットに割り当てられ、スケール内の他のプリセットスラッグはこの中間値から 10 の増分で上下に拡張されます。

間隔スケールは --wp--preset--spacing--10 を下回ることはありません。10 ステップ以上のスケールでは、スケールの下端はプリセットを生成しません。なぜなら、mediumStep は常に --wp--preset--spacing--50 に設定されているからです。

#### 間隔スケールの無効化

WordPress の間隔スケールを完全に無効にしたい場合は、steps を 0 に設定できます theme.json：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "spacingScale": {<br> "steps": 0<br> }<br> }<br> }<br>}<br>

これは、次のセクションで説明する完全にカスタムの間隔サイズを登録することを選択する際に便利です。


### カスタム間隔サイズ

間隔オプションをより正確に制御したい場合は、WordPress の間隔スケールシステムを使用するのではなく、個々の間隔サイズを構築できます。これにより、各オプションの名前、サイズ、およびスラッグを制御できます。

spacingSizes プロパティを使用すると、サイズオブジェクトの配列を定義できます。各サイズオブジェクトは 3 つの値を受け入れます：

- name: サイズの人間が読み取れるタイトルで、翻訳可能です。
- size: 有効な CSS サイズ。これは数値と単位、clamp() を使用した流動サイズ、または他のカスタム CSS プロパティへの参照である可能性があります。
- slug: サイズのスラッグで、生成された CSS カスタムプロパティに追加されます： --wp--preset--spacing--{slug}。

以下は、0.25rem ずつ増加する 5 段階のスケールを作成する例です：


bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "spacingSizes": [<br> {<br> "name": "Step 1",<br> "size": "0.25rem",<br> "slug": "10"<br> },<br> {<br> "name": "Step 2",<br> "size": "0.5rem",<br> "slug": "20"<br> },<br> {<br> "name": "Step 3",<br> "size": "0.75rem",<br> "slug": "30"<br> },<br> {<br> "name": "Step 4",<br> "size": "1rem",<br> "slug": "40"<br> },<br> {<br> "name": "Step 5",<br> "size": "1.25rem",<br> "slug": "50"<br> }<br> ]<br> }<br> }<br>}<br>

登録された値を設定するための パディング、マージン、および ブロック間隔 コントロールの範囲スライダーが表示されるはずです。以下に示すように：



この表は、カスタム間隔サイズを表します：


| CSS カスタムプロパティ | CSS 値 | ラベル |
| —- | —- | —- |
| --wp-preset--spacing--10 | 0.25rem | ステップ 1 |
| --wp-preset--spacing--20 | 0.5rem | ステップ 2 |
| --wp-preset--spacing--30 | 0.75rem | ステップ 3 |
| --wp-preset--spacing--40 | 1rem | ステップ 4 |
| --wp-preset--spacing--50 | 1.25rem | ステップ 5 |

流動サイズの作成

流動的な間隔を使用したい場合は、サイズプリセットを制御するために settings.spacing.spacingSizes メソッドを使用する必要があります。

流動サイズを使用するには、size パラメータとして各サイズオブジェクトの下に追加するだけです。clamp()、min()、max()、および他の有効な CSS 値がサポートされています。

以下は、theme.json に登録された個々のサイズとしての 7 段階の流動間隔スケールの例です：

bash<br>{<br> "version": 2,<br> "settings": {<br> "spacing": {<br> "spacingSizes": [<br> {<br> "name": "Fluid Scale -3",<br> "size": "clamp( 0.31rem, 0.11vw + 0.28rem, 0.35rem )",<br> "slug": "minus-3"<br> },<br> {<br> "name": "Fluid Scale -2",<br> "size": "clamp( 0.47rem, 0.16vw + 0.42rem, 0.53rem )",<br> "slug": "minus-2"<br> },<br> {<br> "name": "Fluid Scale -1",<br> "size": "clamp( 0.71rem, 0.25vw + 0.63rem, 0.79rem )",<br> "slug": "minus-1"<br> },<br> {<br> "name": "Fluid Scale +/- 0 (Base)",<br> "size": "clamp( 1.06rem, 0.37vw + 0.95rem, 1.19rem )",<br> "slug": "base"<br> },<br> {<br> "name": "Fluid Scale +1",<br> "size": "clamp( 1.20rem, 0.85vw + 0.94rem, 1.48rem )",<br> "slug": "plus-1"<br> },<br> {<br> "name": "Fluid Scale +2",<br> "size": "clamp( 1.34rem, 1.5vw + 0.89rem, 1.86rem )",<br> "slug": "plus-2"<br> },<br> {<br> "name": "Fluid Scale +3",<br> "size": "clamp( 1.86rem, 3.7vw + -0.05rem, 2.32rem )",<br> "slug": "plus-3"<br> }<br> ]<br> }<br> }<br>}<br>

これにより、以下の値が生成されます。以下の表に示すように：


| CSS カスタムプロパティ | CSS 値 | ラベル |
| —- | —- | —- |
| --wp-preset--spacing--minus-1 | clamp( 0.31rem, 0.11vw + 0.28rem, 0.35rem ) | 流動スケール -3 |
| --wp-preset--spacing--minus-2 | clamp( 0.47rem, 0.16vw + 0.42rem, 0.53rem ) | 流動スケール -2 |
| --wp-preset--spacing--minus-3 | clamp( 0.71rem, 0.25vw + 0.63rem, 0.79rem ) | 流動スケール -1 |
| --wp-preset--spacing--base | clamp( 1.06rem, 0.37vw + 0.95rem, 1.19rem ) | 流動スケール +/- 0 (ベース) |
| --wp-preset--spacing--plus-1 | clamp( 1.20rem, 0.85vw + 0.94rem, 1.48rem ) | 流動スケール +1 |
| --wp-preset--spacing--plus-2 | clamp( 1.34rem, 1.5vw + 0.89rem, 1.86rem ) | 流動スケール +2 |
| --wp-preset--spacing--plus-3 | clamp( 1.86rem, 3.7vw + -0.05rem, 2.32rem ) | 流動スケール +3 |