ルートパディングとは何ですか？

settings.useRootPaddingAwareAlignments プロパティがどのように機能するかを理解する前に、まずルートパディングが何であるかを理解する必要があります。

ルートパディングは、ウェブページの「ルート」要素に適用されるパディングです。WordPress テーマの場合、これは <body> 要素です。ルート要素の間隔をカスタマイズするには、theme.json で styles.spacing.padding 要素をターゲットにする必要があります。

次の theme.json スニペットを例にとってみましょう。これは、上部と下部のパディングに 0 を追加し、左側と右側のパディングに 2rem を追加します: 

  1. {
  2.     "version": 2,
  3.     "styles": {
  4.         "spacing": {
  5.             "padding": {
  6.             "top": "0",
  7.             "bottom": "0",
  8.             "left": "2rem",
  9.             "right": "2rem"
  10.             }
  11.         }
  12.     }
  13. }

デフォルトでは、これにより <body> (ルート) 要素の左側と右側に 2rem のパディングが追加されます。

このスクリーンショットに示されているように、ルートには水平パディングがあり、フル幅のカバーブロックはそのパディングに当たるまで伸びます:

カバーブロックの背景を持つWordPressサイトのヘッダー。画面のフル幅に伸びないように、左側と右側にパディングがあります。

これは、上記の theme.json コードに基づいて WordPress が出力する CSS です: 

  1. body {
  2.     padding-top: 0;
  3.     padding-right: 2rem;
  4.     padding-bottom: 0;
  5.     padding-left: 2rem;
  6. }

しかし、ここで経験豊富なデザイナーには奇妙に見えるかもしれませんが、settings.useRootPaddingAwareAlignments が有効になっていると、ルートパディングはもはやルート要素に適用されません。これは、グループのようなコンテナブロックに適用されます。

なぜこれが起こるのかについては、次のセクションで詳しく学びます。今の主な目標は、ルートパディングが伝統的に <body> 要素に適用されることを理解することであり、これはほとんどのテーマ作成者が期待することです。

ルートパディングを意識したアラインメントに関して、WordPress は水平 (左と右) パディングのみに関心があります。したがって、垂直 (上と下) パディングはこの文書には関連しません。

ルートパディングを意識したアラインメントの有効化

デフォルトでは、WordPress は <body> 要素にルートパディングを適用します。これがテーマのデザインにとって意味がある場合、他に何もする必要はありません。

しかし、フル幅のアイテムを画面の端まで伸ばし、**かつ** ルート要素にパディングを持たせたい場合はどうしますか？

最初のスクリーンショットと比較して、カバーブロックが画面の端まで伸びていることに気付いてくださいが、ここではネストされたブロックにまだパディングが適用されています:

画面のフル幅に伸びるカバーブロックの背景を持つWordPressサイトのヘッダー。

これは一般的なデザインパターンであり、CSS で要素をコンテナの外に伸ばす方法はいくつかあります。しかし、WordPress にはどのテーマでも機能する標準的なアプローチがあります。

そこで settings.useRootPaddingAwareAlignments が登場します。このプロパティが true に設定されると、ルートパディングは <body> ではなくコンテナ要素に適用されます。これは、特に水平パディングが適用された styles.spacing.padding オブジェクトと組み合わせる必要があります。

このコードを theme.json に試してみてください: 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "useRootPaddingAwareAlignments": true
  5.     },
  6.     "styles": {
  7.         "spacing": {
  8.             "padding": {
  9.             "top": "0",
  10.             "bottom": "0",
  11.             "left": "2rem",
  12.             "right": "2rem"
  13.             }
  14.         }
  15.     }
  16. }

ルートパディングを扱う正しい方法や間違った方法はありません。それは状況に応じた設定であり、テーマのデザインに最適なオプションを決定する必要があります。

これはどのように機能しますか？

WordPress がこれをどのように処理しているかを知ることは特に重要ではありませんが、時には何が起こっているのかをより深く理解したい場合があります。

settings.useRootPaddingAwareAlignments を有効にすると、前の theme.json の例に示されているように、WordPress は 2 つの新しい CSS を生成します。最初は、ルートパディングのためのいくつかの CSS カスタムプロパティを定義します: 

  1. body {
  2.     --wp--style--root--padding-top: 0;
  3.     --wp--style--root--padding-right: 2rem;
  4.     --wp--style--root--padding-bottom: 0;
  5.     --wp--style--root--padding-left: 2rem;
  6. }

2 番目は、.has-global-padding クラスを追加します: 

  1. .has-global-padding {
  2.     padding-right: var(--wp--style--root--padding-right);
  3.     padding-left: var(--wp--style--root--padding-left);
  4. }

このクラスは、制約のあるレイアウトを持つコンテナブロックに与えられます (たとえば、レイアウト > 内部ブロックはコンテンツ幅を使用 オプションが有効になっているグループブロック): 

  1. <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
  2.     <!-- nested blocks... -->
  3. </div>

それを超えて、WordPress はネストされたワイドおよびフル幅のブロックを親ブロックの幅を超えて伸ばすためのインライン CSS を追加します (追加されたパディングが幅に含まれます)。