HTMLとCSS

ブロックエディタで投稿を作成することにより、ユーザーは複数のアーティファクトを作成しています：HTMLドキュメントと、ドキュメント内に埋め込まれているか外部のCSSスタイルシートのいずれか。

最終的なHTMLドキュメントは、いくつかの要素の結果です：

フロントエンドで読み込まれるスタイルシートには以下が含まれます：

  • ブロック。ブロックに付随するスタイルシート。フロントエンドでは、WordPressによって定義されたすべてのブロックスタイルを含む単一のスタイルシート（wp-block-library-*）を見つけることができます。または、使用中の各ブロックごとの別々のスタイルシート（wp-block-group-*、wp-block-columns-*などのように）。詳細についてはこのノートを参照してください。
  • グローバルスタイル。これらのスタイルは、theme.jsonファイルからのデータを使用して動的に生成されます： ノート、リファレンス、およびガイドを参照してください。具体的には、WordPressのtheme.json、テーマのtheme.json（存在する場合）、およびサイトエディタのグローバルスタイルサイドバーを介して提供されたユーザーデータの内容をマージします。このデータを処理した結果は、IDがglobal-styles-inline-cssの埋め込まれたスタイルシートです。
  • テーマ。歴史的に、テーマは自分のスタイルシートをキューに追加しており、そのIDはテーマ名に基づいています（twentytwentytwo-style-cssのように）。独自のスタイルシートを持つだけでなく、グローバルスタイルによって生成されるスタイルシートの一部となるスタイルを含むtheme.jsonファイルを宣言することもできます。
  • ユーザー。エディタ内のユーザーアクションの一部はスタイルコンテンツを生成します。これは、デュオトーン、レイアウト、またはリンクカラーなどの機能に該当します。
  • その他。WordPressやプラグインもスタイルシートをキューに追加できます。

ブロックスタイル

WordPress 5.0でブロックエディタが導入されて以来、ユーザーが特定のブロックに「スタイルを追加」するためのツールがありました。これらのツールを使用することで、ユーザーは新しいクラスやインラインスタイルをブロックに追加し、その視覚的な外観を変更します。

デフォルトでは、ブロックには特定のHTMLマークアップが付属しています。例えば、段落ブロックを考えてみてください：

  1. <p></p>

最も単純な形では、pセレクタをターゲットにするスタイルルールは、ブロック、テーマなどから来るかどうかにかかわらず、このブロックにスタイルを適用します。

ユーザーは、異なるスタイルを適用することでこのブロックの状態を変更できます：テキストの配置、色、フォントサイズ、行の高さなど。これらの状態は、classまたはstyle属性を介して、主にHTML属性の形でブロックのHTMLマークアップに反映されますが、ブロックの作成者が適切だと考える他の属性でも可能です。

ユーザーがブロックにいくつかの修正を加えた後、初期のマークアップは次のようになります：

  1. <p class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
  2.    style="line-height: 1em"></p>

これが「ユーザー提供のブロックスタイル」と呼ばれるもので、また「ローカルスタイル」または「シリアライズスタイル」とも呼ばれます。本質的に、各ツール（フォントサイズ、色など）は、ブロックマークアップにいくつかのクラスやインラインスタイルを追加します。これらのクラスのCSSスタイリングは、ブロック、グローバル、またはテーマのスタイルシートの一部です。

ブロックの状態を変更する能力と、ブロックが他のブロック内に存在できるという事実（グループ内の段落を考えてみてください）は、膨大な数の潜在的な状態とスタイルの可能性を生み出します。

UIコントロールからHTMLマークアップへ

ブロックチュートリアルをフォローすると、ここで提示されているブロックAPIのさまざまな部分について詳しく学び、自分のブロックを構築することができます。これは、ブロックがユーザーにその状態を編集させる方法の一般的な概念への導入です。

上記のような体験を構築するために、ブロック作成者は以下のいくつかの要素が必要です：

  • 1. UIコントロール。これは、ユーザーに選択肢を提示します。例えば、ブロックのフォントサイズを変更できるようにします。コントロールは、ブロックからデータを読み取ること（このブロックにはすでにフォントサイズが割り当てられていますか？）や、必要な他のデータ（このブロックでユーザーが使用できるフォントサイズは何ですか？）を処理します。利用可能なコンポーネントライブラリを参照してください。
  • 2. ブロック属性。ブロックは、どの修正が適用されたかを知るためのデータを保持する必要があります：例えば、すでにフォントサイズが与えられているかどうか。ブロックが属性を定義する方法を確認してください。
  • 3. スタイルデータへのアクセス。コントロールは、特定のブロックに利用可能なスタイルに関する外部情報が必要な場合があります：色のリストやフォントサイズのリストなど。これらは「スタイルプリセット」と呼ばれ、通常はテーマによって定義されたスタイルの事前選択です。ただし、WordPressは一部のデフォルトを提供します。テーマがエディタに提供できるデータのリストと、ブロック作成者がuseSettingを介してそれにアクセスする方法を確認してください。
  • 4. ユーザースタイルをHTMLマークアップにシリアライズする。ユーザーアクションに応じて、ブロックのHTMLマークアップは適切に更新される必要があります（適切なクラスやインラインスタイルを適用）。このプロセスはシリアライズと呼ばれ、edit, saveおよびrender_callback関数の責任です：これらの関数はブロックデータを取得し、HTMLに変換します。

本質的に、これらはブロック作成者がユーザーによってスタイルを適用できるようにするために気を配るべき基本的なメカニズムです。これは完全に手動で行うこともできますが、一般的なスタイルニーズのためにこのプロセスを自動化するAPIがあります：ブロックサポート。

ブロックサポートAPI

ブロックサポートは、ブロックがどの機能をサポートしているかを宣言できるAPIです。ブロックはblock.jsonファイルに情報を追加することで、システムにユーザーがどのようなアクションを行えるかを伝えます。

例えば：

  1. {
  2.    "name": "core/paragraph",
  3.    "...": "...",
  4.    "supports": {
  5.    "typography": {
  6.    "fontSize": true
  7.    }
  8.    }
  9. }

段落はそのblock.jsonでフォントサイズのサポートを宣言します。これは、テーマによって無効にされない限り、ブロックがユーザーにフォントサイズを調整するためのUIコントロールを表示することを意味します（テーマがUIコントロールを無効にする方法についてはtheme.jsonリファレンスで学ぶ）。システムはまた、UIコントロールデータの設定（すでに割り当てられている場合のブロックのフォントサイズ、表示するための利用可能なフォントサイズのリスト）を処理し、ユーザーの変更に応じてブロックデータをHTMLマークアップにシリアライズします（クラスやインラインスタイルを適切に追加）。

  2. 同じ結果を得るために行う作業が少なくなるという利点に加えて、いくつかの他の利点もあります：
  4. - ブロックのスタイル情報がネイティブモバイルアプリやサーバーで利用可能になります
  5. - ブロックは、同じスタイルのために他のブロックが使用するUIコントロールを使用し、より一貫したユーザー体験を生み出します
  6. - ブロックで使用されるUIコントロールは、自動的に改善されるとともに更新され、ブロック作成者が何もする必要がありません
  7.  <a name="current-limitations-of-the-block-supports-api"></a>
  9. ### ブロックサポートAPIの現在の制限
  11. ブロックサポートAPIは価値を提供しますが、ブロック作成者が認識しておくべきいくつかの制限もあります。それらをより視覚化するために、テーブルブロックの次の例を考えてみましょう：
  14. ``````bash
  15. <table>
  16.    <thead>
  17.    <tr>
  18.    <th>Header</th>
  19.    </tr>
  20.    </thead>
  21.    <tbody>
  22.    <tr>
  23.    <th>First</th>
  24.    </tr>
  25.    <tr>
  26.    <th>Second</th>
  27.    </tr>
  28.    </tbody>
  29.    <tfoot>
  30.    <tr>
  31.    <th>Footer</th>
  32.    </tr>
  33.    </tfoot>
  34. </table>
  35. `
  • 1. ブロックごとに1つのスタイルタイプのみ。

制限の1つは、すべての利用可能なスタイルの中で、ブロックによって使用されるインスタンスは1つだけであることです。例に従うと、テーブルブロックは単一のフォントサイズしか持てません。ブロック作成者が3つの異なるフォントサイズ（ヘッダー、ボディ、フッター）を持ちたい場合、現在のブロックサポートAPIを使用してそれを行うことはできません。詳細情報と今後の方法についてはこの問題を参照してください。

  • 1. スタイルはブロックの最外部HTMLノード、ラッパーにシリアライズされます。

ブロックサポートAPIは、フォントサイズの値をラッパーにのみシリアライズし、次のHTML<table class="has-small-font-size">を生成します。現在のブロックサポートAPIは、この値を<tbody>のような別のノードにシリアライズしません。

これは、トラッキング問題でフォローできるアクティブな作業領域です。リンクされた提案は、ユーザーの変更をシリアライズする別の方法を探求しています：各ブロックサポートが独自のデータ（has-small-font-size、has-green-colorなどのクラス）をシリアライズするのではなく、ブロックが単一のクラスを取得するというアイデアです（wp-style-UUIDのように）で、そのクラスのCSSスタイリングはWordPressによってサーバーで生成されます。

その提案での作業が続く間、ブロック作成者が使用できるエスケープハッチ、実験的なオプションがあります。任意のブロックサポートは、experimentalSkipSerializationを使用してHTMLマークアップへのシリアライズをスキップできます。例えば：

  1. {
  2.    "name": "core/paragraph",
  3.    "...": "...",
  4.    "supports": {
  5.    "typography": {
  6.    "fontSize": true,
  7.    "__experimentalSkipSerialization": true
  8.    }
  9.    }
  10. }

これは、タイポグラフィブロックサポートがすべてのこと（UIコントロールの作成、ブロック属性をコントロールにバインドするなど）を行うが、ユーザーの値をHTMLマークアップにシリアライズすることはしないことを意味します。クラスやインラインスタイルは自動的にラッパーに適用されず、edit、save、render_callback関数でこれを実装するのはブロック作成者の責任です。WordPressが提供するいくつかのブロックでどのように行われたかの例についてはこの問題を参照してください。

注意してください、もしexperimentalSkipSerializationがグループ（タイポグラフィ、色、間隔）に対して有効になっている場合、それはこのグループ内のすべてのブロックサポートに影響します。上記の例では、typographyグループ内のすべてのプロパティが影響を受けます（例：fontSize、lineHeight、fontFamilyなど）。

単一のプロパティのみを有効にするには、配列を使用してスキップするプロパティを宣言できます。以下の例では、fontSizeのみがシリアライズをスキップし、typographyグループ内の他の項目（例：lineHeight、fontFamilyなど）には影響を与えません。

  1. {
  2.    "name": "core/paragraph",
  3.    "...": "...",
  4.    "supports": {
  5.    "typography": {
  6.    "fontSize": true,
  7.    "lineHeight": true,
  8.    "__experimentalSkipSerialization": [ "fontSize" ]
  9.    }
  10.    }
  11. }

この機能のサポートはこのPRで追加されました。

グローバルスタイル

グローバルスタイルは、サイト全体のスタイルを生成するメカニズムを指します。前のセクションで説明したブロックスタイルとは異なり、これらは投稿コンテンツにシリアライズされず、ブロックHTMLに添付されません。代わりに、このシステムの出力はIDがglobal-styles-inline-cssの新しいスタイルシートです。

このメカニズムはWordPress 5.8で導入されました。当時は、WordPressとアクティブテーマからのデータのみを取得していました。WordPress 5.9では、システムがユーザーからのスタイルデータも取得するように拡張されました。

これが一般的なデータフローです：

グローバルスタイルのデータフロー

スタイルシートを生成するプロセスは、本質的に3つのステップで構成されています：

  • 1. データを収集する：theme.jsonファイルWordPressにバンドルされた、アクティブテーマのtheme.jsonファイル（存在する場合）、およびサイトエディタのグローバルスタイルUIを介して提供されたユーザーのスタイル。
  • 2. データを統合する：異なる起源からの構造化された情報（WordPressのデフォルト、テーマ、ユーザー）が正規化され、単一の構造にマージされます。
  • 3. データをスタイルシートに変換する：内部表現をCSSスタイルルールに変換し、スタイルシートとしてキューに追加します。

データを収集する

データは、WordPressのデフォルト、アクティブテーマ、またはユーザーの3つの異なる起源から来ることがあります。これらのすべては同じtheme.jsonフォーマットを使用します。

WordPressとアクティブテーマからのデータは、対応するtheme.jsonファイルから取得されます。ユーザーからのデータは、ユーザーがサイトエディタのグローバルスタイルサイドバーを介して行った変更を保存した後にデータベースから取得されます。

データを統合する

このフェーズの目標は、統合された構造を構築することです。

このフェーズでは、2つの重要なプロセスが進行しています。まず、システムはすべての受信データを正規化する必要があります。異なる起源がtheme.jsonフォーマットの異なるバージョンを使用している可能性があるためです。例えば、テーマがv1を使用している一方で、WordPressのベースが最新バージョンを使用している場合があります。次に、システムは入力を単一の構造にマージする方法を決定する必要があります。これが次のセクションの焦点となります。

スタイル

受信したtheme.json構造の異なる部分は異なる方法で処理されます。stylesセクションに存在するデータは、次のロジックに従ってブレンドされます：ユーザーデータはテーマデータを上書きし、テーマデータはWordPressデータを上書きします。

例えば、WordPress、テーマ、ユーザーからそれぞれ次の3つのtheme.json構造があった場合：

  1. {
  2.    "styles": {
  3.    "color": {
  4.    "background": "<WordPress value>"
  5.    },
  6.    "typography": {
  7.    "fontSize": "<WordPress value>"
  8.    }
  9.    }
  10. }
  1. {
  2.    "styles": {
  3.    "typography": {
  4.    "fontSize": "<theme value>",
  5.    "lineHeight": "<theme value>"
  6.    }
  7.    }
  8. }
  1. {
  2.    "styles": {
  3.    "typography": {
  4.    "lineHeight": "<user value>"
  5.    }
  6.    }
  7. }

統合後の結果は：

  1. {
  2.    "styles": {
  3.    "color": {
  4.    "background": "<WordPress value>"
  5.    },
  6.    "typography": {
  7.    "fontSize": "<theme value>",
  8.    "lineHeight": "<user value>"
  9.    }
  10.    }
  11. }

設定

  2. プリセットは、UIのさまざまな部分でユーザーに表示される事前定義されたスタイルです：カラーパレットやフォントサイズなどです。これらは次の設定を含みます：`````color.duotone`````、`````color.gradients`````、`````color.palette`````、`````typography.fontFamilies`````、`````typography.fontSizes`````。`````styles`````とは異なり、起源からのプリセットは他の起源からの値を上書きしません。代わりに、すべてが統合された構造に保存されます。
  4. 例えば、WordPress、テーマ、ユーザーからそれぞれ次の`````theme.json`````構造があった場合：
  7. ``````bash
  8. {
  9.    "settings": {
  10.    "color": {
  11.    "palette": [ "<WordPress values>" ],
  12.    "gradients": [ "<WordPress values>" ]
  13.    }
  14.    }
  15. }
  16. `
  1. {
  2.    "settings": {
  3.    "color": {
  4.    "palette": [ "<theme values>" ]
  5.    },
  6.    "typography": {
  7.    "fontFamilies": [ "<theme values>" ]
  8.    }
  9.    }
  10. }
  1. {
  2.    "settings": {
  3.    "color": {
  4.    "palette": [ "<user values>" ]
  5.    }
  6.    }
  7. }

統合後の結果は：

  1. {
  2.    "settings": {
  3.    "color": {
  4.    "palette": {
  5.    "default": [ "<WordPress values>" ],
  6.    "theme": [ "<theme values>" ],
  7.    "user": [ "<user values>" ]
  8.    },
  9.    "gradients": {
  10.    "default": [ "<WordPress values>" ]
  11.    }
  12.    },
  13.    "typography": {
  14.    "fontFamilies": {
  15.    "theme": [ "<theme values>" ]
  16.    }
  17.    }
  18.    }
  19. }

データからスタイルへ

スタイルシートを生成する最後のフェーズは、統合されたデータをCSSスタイルルールに変換することです。

スタイルをCSSルールに

  2. - theme.jsonのキー/値はCSS宣言にマッピングされます（`````property: value`````）。
  3. - 特定のチャンクのCSSセレクタは、その意味に基づいて生成されます：
  4.   - トップレベルセクションは`````body`````セレクタを使用します。
  5.   - トップレベル要素は、表すHTML要素に一致するIDセレクタを使用します（例えば、`````h1`````または`````a`````）。
  6.   - ブロックは、生成するデフォルトのクラス名を使用します（`````core/group`````は`````.wp-block-group`````になります）が、`````block.json`````を使用して異なるものを明示的に設定することもできます（`````core/paragraph`````は`````p`````になります）。このことについては「現在の制限」セクションを参照してください。
  7.   - ブロック内の要素は、ブロックと要素のセレクタの連結を使用します。
  9. 例えば、次の`````theme.json`````構造：
  12. ``````bash
  13. {
  14.    "styles": {
  15.    "typography": {
  16.    "fontSize": "<top-level value>"
  17.    },
  18.    "elements": {
  19.    "h1": {
  20.    "typography": {
  21.    "fontSize": "<h1 value>"
  22.    }
  23.    }
  24.    },
  25.    "blocks": {
  26.    "core/paragraph": {
  27.    "color": {
  28.    "text": "<paragraph value>"
  29.    }
  30.    },
  31.    "core/group": {
  32.    "color": {
  33.    "text": "<group value>"
  34.    },
  35.    "elements": {
  36.    "h1": {
  37.    "color": {
  38.    "text": "<h1 within group value>"
  39.    }
  40.    }
  41.    }
  42.    }
  43.    }
  44.    }
  45. }
  46. `

は次のCSSに変換されます：

  1. body {
  2.    font-size: <top-level value>;
  3. }
  4. h1 {
  5.    font-size: <h1 value>;
  6. }
  7. p {
  8.    color: <paragraph value>;
  9. }
  10. .wp-block-group {
  11.    color: <group value>;
  12. }
  13. .wp-block-group h1 {
  14.    color: <h1 within group value>;
  15. }

設定をCSSルールに

  2. 例えば、次のtheme.json
  5. ``````bash
  6. {
  7.    "settings": {
  8.    "color": {
  9.    "palette": {
  10.    "default": [
  11.    {
  12.    "slug": "vivid-red",
  13.    "value": "#cf2e2e",
  14.    "name": "Vivid Red"
  15.    }
  16.    ],
  17.    "theme": [
  18.    {
  19.    "slug": "foreground",
  20.    "value": "#000",
  21.    "name": "Foreground"
  22.    }
  23.    ]
  24.    }
  25.    },
  26.    "blocks": {
  27.    "core/site-title": {
  28.    "color": {
  29.    "palette": {
  30.    "theme": [
  31.    {
  32.    "slug": "foreground",
  33.    "value": "#1a4548",
  34.    "name": "Foreground"
  35.    }
  36.    ]
  37.    }
  38.    }
  39.    }
  40.    }
  41.    }
  42. }
  43. `

は次のCSSスタイルルールに変換されます：

  1. body {
  2.   --wp--preset--color--vivid-red: #cf2e2e;
  3.   --wp--preset--color--foreground: #000;
  4. }
  6. .wp-block-site-title {
  7.   --wp--preset--color--foreground: #1a4548;
  8. }

CSSカスタムプロパティに加えて、デュオトーン以外のすべてのプリセットは、各値に対してCSSクラスを生成します。上記の例は、次のCSSクラスも生成します：

  1. /* vivid-red */
  2. .has-vivid-red-color { color: var(--wp--preset--color--vivid-red) !important; }
  3. .has-vivid-red-background-color { background-color: var(--wp--preset--color--vivid-red) !important; }
  4. .has-vivid-red-border-color { border-color: var(--wp--preset--color--vivid-red) !important; }
  6. /* foreground */
  7. .has-foreground-color { color: var(--wp--preset--color--foreground) !important; }
  8. .has-foreground-background-color { background-color: var(--wp--preset--color--foreground) !important; }
  9. .has-foreground-border-color { border-color: var(--wp--preset--color--foreground) !important; }
  11. /* foreground within site title*/
  12. .wp-block-site-title .has-foreground-color { color: var(--wp--preset--color--foreground) !important; }
  13. .wp-block-site-title .has-foreground-background-color { background-color: var(--wp--preset--color--foreground) !important; }
  14. .wp-block-site-title .has-foreground-border-color { border-color: var(--wp--preset--color--foreground) !important; }

グローバルスタイルAPIの現在の制限

1. ブロックに異なるCSSセレクタを設定するにはサーバー登録が必要

デフォルトでは、ブロックに割り当てられるセレクタは.wp-block-<block-name>です。ただし、ブロックは必要に応じてこれを変更できます。block.jsonのexperimentalSelectorプロパティを介してCSSセレクタを提供できます。

ブロックがこれを行う場合、block.jsonを使用してサーバーに登録する必要があります。そうしないと、グローバルスタイルコードはその情報にアクセスできず、ブロックのデフォルトCSSセレクタを使用します。

2. 異なるスタイルのために異なるHTMLノードをターゲットにできない

スタイルの各チャンクは、単一のセレクタのみを使用できます。

これは、ブロックがexperimentalSkipSerializationを使用して異なるスタイルプロパティをラッパー以外の異なるノードにシリアライズしている場合に特に関連します。「ブロックサポートの現在の制限」を参照してください。

3. ブロックごとに単一のプロパティのみ

ブロックサポートと同様に、ブロックによって使用されるスタイルのインスタンスは1つだけです。例えば、ブロックは単一のフォントサイズしか持てません。「ブロックサポートの現在の制限」に関連しています。

4. ブロックサポートを使用しているブロックのみがグローバルスタイルUIに表示される

サイトエディタのグローバルスタイルUIには、ブロックごとのスタイルの画面があります。ブロックのリストは、ブロックのblock.jsonからのブロックサポートを使用して動的に生成されます。ブロックがそこにリストされたい場合、ブロックサポートメカニズムを使用する必要があります。

レイアウトスタイル

個々のブロックレベルのスタイルやグローバルスタイルに加えて、ブロックベースとクラシックテーマの両方に出力されるレイアウトスタイルの概念があります。

レイアウトブロックサポートは、レイアウトを作成するために使用されるブロック間で共有される一般的なレイアウトスタイルを出力します。レイアウトスタイルは、他のブロックのコンテナである任意のブロックに共通のスタイリングを提供するのに役立ちます。これらのレイアウトスタイルに依存するブロックの例には、グループ、行、列、ボタン、ソーシャルアイコンが含まれます。この機能は、ブロックのblock.jsonファイルのsupports設定の下でコアブロックで有効になっています。

レイアウトスタイルが出力される主な場所は2つあります：

基本レイアウトスタイル

基本レイアウトスタイルは、特定のレイアウトタイプにオプトインしたすべてのブロックに共通するスタイルです。共通の基本レイアウトスタイリングの例には、フレックスレイアウトタイプを使用するブロック（ボタンやソーシャルアイコンなど）のためのdisplay: flexの設定や、制約のあるレイアウトのためのデフォルトの最大幅を提供することが含まれます。

基本レイアウトスタイルは、グローバルスタイルを処理するメインPHPクラス内から出力され、グローバルスタイルスタイルシートの一部を形成します。クラシックテーマのコアブロックをサポートするために、これらのスタイルは常に出力され、テーマが独自のtheme.jsonファイルを提供しているかどうかにかかわらず出力されます。

共通のレイアウト定義はコアレイアウトブロックサポートファイルに保存されています。

個別のレイアウトスタイル

レイアウトサポートにオプトインしたブロックがレンダリングされると、2つのことが処理され、layout.phpを介して出力に追加されます：

  • セマンティッククラス名がブロックマークアップに追加され、どのレイアウト設定が使用されているかを示します。例えば、is-layout-flowはデフォルト/フローのレイアウトを使用するブロック（グループなど）用で、is-content-justification-rightはユーザーがブロックを右揃えに設定したときに追加されます。
  • 個別のスタイルが、レンダリングされる個々のブロックに設定された非デフォルトのレイアウト値に対して生成されます。これらのスタイルは、wp-container-$idの形式を使用してブロックに添付され、$idはユニークな番号です。

利用可能なレイアウトタイプ

現在使用されているレイアウトタイプは4つあります：

  • デフォルト/フロー：アイテムは垂直に積み重ねられます。親コンテナブロックはdisplay: flowに設定され、子要素間の間隔は垂直マージンを介して処理されます。
  • 制約付き：アイテムは垂直に積み重ねられ、フローのレイアウトと同じ間隔ロジックを使用します。子コンテンツの幅を制約し、標準コンテンツサイズと広いサイズの幅を出力します。contentSizeとwideSizeのグローバル値をsettings.layoutのtheme.jsonに設定することがデフォルトです。
  • フレックス：アイテムはフレックスボックスレイアウトを使用して表示されます。デフォルトは水平方向です。子要素間の間隔はgap CSSプロパティを介して処理されます。
  • グリッド：アイテムはグリッドレイアウトを使用して表示されます。列生成にauto-fillアプローチをデフォルトとし、固定数の列に設定することもできます。子要素間の間隔はgap CSSプロパティを介して処理されます。

ブロック間の間隔を制御し、ブロック間隔コントロールを有効にするには、ブロックギャップとは何か、どのように使用できますか？を参照してください。

テーマからレイアウトまたはコンテナブロックをターゲットにする

レイアウトブロックサポートは、ブロックおよびサイトエディタ内からレイアウト機能を制御できるように設計されています。可能な限り、追加のスタイルシートに依存するのではなく、ブロックの機能を使用して特定のレイアウト要件を決定するようにしてください。

特定のスタイルを追加または調整するためにコンテナブロックをターゲットにしたいテーマの場合、ブロックのクラス名が通常は最も信頼できるクラス名です。wp-block-groupやwp-block-columnsのようなクラス名は、特定のブロックをターゲットにするために通常信頼できます。ブロックとレイアウトのクラス名に加えて、ブロックとレイアウトを組み合わせたクラス名もあります。例えば、制約付きレイアウトのグループブロックの場合、wp-block-group-is-layout-constrainedになります。

特定のレイアウトタイプを使用するブロックをターゲットにする場合、レンダリングされたマークアップにコンテナクラスが常に存在するわけではないため、wp-container-をターゲットにすることは避けてください。

セマンティッククラス名

レイアウトブロックサポート出力における安定したセマンティッククラス名を拡張する作業が現在進行中です。このタスクはこの問題で議論されています。

レイアウトブロックサポートによって出力される現在のセマンティッククラス名は次のとおりです：

  • is-layout-flow：デフォルト/フローのレイアウトタイプを使用するブロック。
  • is-layout-constrained：制約付きレイアウトタイプを使用するブロック。
  • is-layout-flex：フレックスレイアウトタイプを使用するブロック。
  • is-layout-grid：グリッドレイアウトタイプを使用するブロック。
  • wp-container-$id：$idが半ランダムな番号である場合。非デフォルトのレイアウト値を含むブロックが存在する場合にのみ存在するコンテナクラス。このクラスは、存在するかどうかにかかわらず、CSSターゲティングに直接使用すべきではありません。
  • is-horizontal：ブロックがorientationをhorizontalに明示的に設定した場合。
  • is-vertical：ブロックがorientationをverticalに明示的に設定した場合。
  • is-content-justification-left：ブロックがjustifyContentをleftに明示的に設定した場合。
  • is-content-justification-center：ブロックがjustifyContentをcenterに明示的に設定した場合。
  • is-content-justification-right：ブロックがjustifyContentをrightに明示的に設定した場合。
  • is-content-justification-space-between：ブロックがjustifyContentをspace-betweenに明示的に設定した場合。
  • is-nowrap：ブロックがflexWrapをnowrapに明示的に設定した場合。

生成されたレイアウトスタイルからのオプトアウト

レイアウトスタイルの出力はデフォルトでオンになっており、コア構造ブロックに必要なスタイルです。ただし、テーマは、セマンティッククラス名の出力を保持しながら、生成されたブロックレイアウトスタイルからオプトアウトできます。disable-layout-stylesブロックサポートを使用することによって。これらのテーマは、すべてのレイアウトスタイルを自分で提供する責任があります。テーマサポートの項目を参照してください。