WordPress Site Editor の主な目標の XNUMX つ (そして、はい、それが現在の 「正式な」名前) は、基本的なブロック スタイルを移動することです。 CSS から構造化された JSON へ. JSON ファイルは機械で読み取り可能なため、WordPress で直接テーマのグローバル スタイルを構成するために JavaScript ベースのサイト エディターで使用できます。
まだすべてではありません。 Twenty Twenty-Two (TT2) のデフォルト テーマを見ると、未解決の主な問題が XNUMX つあります。 相互作用のスタイリング （ :hover, :active, :focus）、及び 余白 & レイアウト コンテナーのパディング. それらが TT2 で一時的にどのように修正されたかを見ることができます style.css ファイルにするのではなく、 theme.json ファイルにソフトウェアを指定する必要があります。
WordPressの6.1 これらの問題を修正しました。私がやりたいのは、特に後者を調べることです。 レイアウト コンテナーのマージンとパディング用の JSON 化されたスタイルが用意されたので、次のことが可能になります。 テーマ レイアウトで間隔を定義するためのより柔軟で堅牢な方法.
どのような間隔について話しているのですか？
まず、私たちはすでに持っています ルートレベルのパディング これは、 <body> エレメント。 すべてのページと投稿で共有される要素の一貫した間隔が確保されるため、これは素晴らしいことです。
しかし、ブロックがそのパディングをバイパスし、全幅で整列する方法があるため、それだけではありません。 それはおかげで パディングを意識した配置 これは、の新しいオプトイン機能です。 theme.json. したがって、ルート レベルのパディングがある場合でも、たとえば、画像 (または他のブロック) を分割して全幅にすることができます。
これにより、別のことがわかります。 制限されたレイアウト. ここでの考え方は、レイアウトにネストされたブロックは、レイアウトのコンテンツの幅 (グローバル設定) を尊重し、レイアウトの外には流れないということです。 アライメントを使用してブロックごとにその動作をオーバーライドできますが、それについては後で説明します。
始めましょう…
ルートレベルのパディング
繰り返しますが、これは新しいことではありません。 にパディングを設定する機能がありました <body> の要素 theme.json 実験的なものから グーテンベルクプラグイン バージョン 11.7 で導入されました。 に設定しました styles.spacing 私たちが持っているオブジェクト margin & padding 本体の上、右、下、左の間隔を定義するオブジェクト:
{ "version": 2, "styles": { "spacing": { "margin": { "top": "60px", "right": "30px", "bottom": "60px", "left": "30px" }, "padding": { "top": "30px", "right": "30px", "bottom": "30px", "left": "30px" } } }
}これはグローバル設定です。 したがって、DevTools を開いて検査すると、 <body> 要素の場合、次の CSS スタイルが表示されます。
body { margin-top: 60px; margin-right: 30px; margin-bottom: 60px; margin-left: 30px; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
}涼しい。 しかし、ここに問題があるのは、世界で、いくつかのブロックがその間隔から抜け出して、画面全体を端から端まで埋めることができるようにする方法の問題です. だから間隔がありますよね？ そうならないために役立ちます！
しかし実際には、ブロック エディタで作業しているときに、XNUMX 回限りのインスタンスでその間隔から抜け出したい場合がたくさんあります。 ページに Image ブロックを配置し、コンテンツの残りの部分がルートレベルのパディングを尊重している間、それを全幅にしたいとしますか?
入る…
パディングを意識したアラインメント
のすべてのスタイルを定義する最初のデフォルトの WordPress テーマを作成しようとしているときに、 theme.json ファイルの中で、リード デザイナーの Kjell Reigstad が、ルート レベルのパディングから抜け出すことの困難な側面を説明しています。 GitHubの問題.
WordPress 6.1 の新機能は、この問題に対処するために作成されました。 次にそれらを掘り下げてみましょう。
useRootPaddingAwareAlignments
新しい useRootPaddingAwareAlignments この問題を解決するためにプロパティが作成されました。 実際には、Gutenberg プラグイン v13.8 で初めて導入されました。 の 元のプルリクエスト それがどのように機能するかについての素晴らしい入門書です。
{ "version": 2, "settings": { "appearanceTools": true, "useRootPaddingAwareAlignments": true, // etc. },すぐに、これはオプトインする必要がある機能であることに注意してください。 プロパティはに設定されています false デフォルトでは、明示的に設定する必要があります true それを可能にするために。 また、私たちが持っていることに注意してください appearanceTools に設定 true 同様に。 これにより、UI コントロールがオプトインされます サイト エディターで、ボーダー、リンクの色、タイポグラフィ、およびマージンとパディングを含むスペースのスタイル設定を行います。
設定 appearanceTools に設定 true ブロックをマージンとパディングに自動的に選択します どちらも設定しなくても settings.spacing.padding or setting.spacing.margin 〜へ true.
有効にすると useRootPaddingAwareAlignments、ルートパディング値が設定されたカスタムプロパティが提供されます <body> フロントエンドの要素。 興味深いことに、パディングも適用されます .editor-styles-wrapper バックエンドのブロック エディタで作業しているときに間隔が表示されるようにします。 かなりクール！
掘り下げていくと、DevTools でそれらの CSS カスタム プロパティを確認できました。
有効にします useRootPaddingAwareAlignments また、上のグローバル スタイル画像の「コンテンツ」幅と「ワイド」幅の値をサポートするすべてのブロックに左右のパディングを適用します。 これらの値を定義することもできます theme.json:
{ "version": 2, "settings": { "layout": { "contentSize": "640px", "wideSize": "1000px" } }
}グローバル スタイルの設定が、 theme.jsonの場合、グローバル スタイルが優先されます。 ブロックテーマスタイルの管理についてすべて学ぶことができます 私の最後の記事で.
contentSizeブロックのデフォルトの幅です。wideSize「幅の広い」レイアウト オプションを提供し、ブロックを伸ばすための幅の広い列を確立します。
したがって、最後のコード例では、次の CSS が得られます。
/* The default content container */
.wp-container-[id] > * { max-width: 640px; margin-left: auto !important; margin-right: auto !important;
} /* The wider content container */
.wp-container-[id] > .alignwide { max-width: 1000px;
}[id] WordPress が自動生成する一意の番号を示します。
しかし、他に何が得られると思いますか? アライメントもバッチリ！
.wp-container-[id] .alignfull { max-width: none;
}わかりますか？ 有効にすることで useRootPaddingAwareAlignments と定義 contentSize & wideSize、ページと投稿に追加されるブロックの幅を制御するための合計 XNUMX つのコンテナー構成の完全な配置 CSS クラスも取得します。
これは、次のレイアウト固有のブロックに適用されます: 列、グループ、投稿コンテンツ、クエリ ループ。
ブロック レイアウト コントロール
前述のレイアウト固有のブロックのいずれかをページに追加するとします。 ブロックを選択すると、ブロック設定 UI が新しいレイアウト設定を提供します。 settings.layout で定義した値 theme.json (またはグローバル スタイル UI)。
ここでは非常に特殊なブロック、つまり他のブロックを内部にネストできるブロックを扱っています。 したがって、これらのレイアウト設定は、ネストされたブロックの幅と配置を制御するためのものです。 「内部ブロックはコンテンツの幅を使用する」設定はデフォルトで有効になっています。 オフにすると、何もありません max-width コンテナとその中のブロックは端から端まで行きます。
トグルをオンのままにすると、ネストされたブロックは contentWidth or wideWidth 値 (これについては後で詳しく説明します)。 または、数値入力を使用してカスタムを定義できます contentWidth & wideWidth この XNUMX 回限りのインスタンスの値。 それは素晴らしい柔軟性です！
ワイドブロック
今見た設定は、親ブロックに設定されています。 ブロックを内部にネストして選択すると、そのブロックに追加のオプションがあり、 contentWidth, wideWidth、または全角にします。
contentWidth コンテキストメニューで「なし」とラベル付けされていますが、に設定することもできます wideWidth （「ワイド幅」とラベル付けされています）または「フル幅」。WordPress がルートレベル パディング CSS カスタム プロパティをどのように乗算するかに注目してください。 -1 「全幅」オプションを選択したときに負のマージンを作成します。
.alignfull クラスは、ネストされたブロックに負のマージンを設定して、ルートレベルのパディング設定と競合することなく、ビューポートの幅全体を占めるようにします。制限付きレイアウトの使用
WordPress 6.1 で得られる新しいスペーシングとアラインメントについて説明しました。 これらは、ブロックおよびブロック内のネストされたブロックに固有のものです。 しかし、WordPress 6.1 では、テーマのテンプレートの柔軟性と一貫性をさらに高める新しいレイアウト機能も導入されています。
適切な例: WordPress は Flex および Flow レイアウト タイプを完全に再構築し、 制約のある レイアウト サイト エディターのグローバル スタイル UI のコンテンツ幅設定を使用して、テーマ内のブロック レイアウトを簡単に整列できるようにするタイプ。
フレックス、フロー、および制約付きレイアウト
これら XNUMX つのレイアウト タイプの違いは、出力されるスタイルです。 Isabel Brison は優れた記事を書いています それは違いをうまく概説していますが、参考のためにここでそれらを言い換えましょう：
- フロー レイアウト: ネストされたブロック間に垂直方向の間隔を追加します
margin-block方向。 これらのネストされたブロックは、左、右、または中央に配置することもできます。 - 制約付きレイアウト: フロー レイアウトとまったく同じ取引ですが、ネストされたブロックに幅の制限があります。
contentWidth&wideWidth設定（いずれかtheme.jsonまたはグローバル スタイル)。 - フレックスレイアウト： これは WordPress 6.1 でも変更されていません。 それは使用しています CSSFlexbox デフォルトでは水平に（一列に）流れるレイアウトを作成しますが、垂直に流れることもできるので、ブロックを積み重ねることができます。 間隔は CSS を使用して適用されます
gapプロパティ。
このレイアウト タイプの新しいスレートは、各レイアウトのセマンティック クラス名を作成します。
| セマンティック レイアウト クラス | レイアウトタイプ | サポートされているブロック |
|---|---|---|
.is-layout-flow |
フロー レイアウト | 列、グループ、投稿コンテンツ、クエリ ループ。 |
.is-layout-constrained |
制約のあるレイアウト | 列、グループ、投稿コンテンツ、クエリ ループ。 |
.is-layout-flex |
フレックスレイアウト | 列、ボタン、ソーシャル アイコン |
ジャスティン・タドロックは、 さまざまなレイアウト タイプとセマンティック クラス、ユースケースと例を含みます。
制約のあるレイアウトをサポートするようにテーマを更新する
独自に作成したブロック テーマを既に使用している場合は、 制約のあるレイアウトをサポートするように更新します. 必要なのは、いくつかのものを交換することだけです theme.json:
{ "version": 2, "settings": { "layout": { "type": "constrained", // replaces `"inherit": true` "type": "default", // replaces `"inherit": false` } }
}これらは最近リリースされたブロック テーマで、間隔設定が有効になっています。 useRootPaddingAwareAlignments 更新された theme.json 制約付きレイアウトを定義するファイル:
レイアウト スタイルの無効化
基本レイアウト スタイルは、WordPress 6.1 コアに同梱されているデフォルトの機能です。 つまり、すぐに使用できるようになっています。 ただし、必要に応じて、この小さなスニペットを使用して無効にすることができます functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );ここで大きな警告: デフォルトのレイアウト タイプのサポートも無効にします これらのレイアウトの基本スタイルをすべて削除します. つまり、さまざまなテンプレートやブロックのコンテキストでコンテンツを表示するために必要な間隔、配置、およびその他の要素について、独自のスタイルを作成する必要があります。
包み込む
全幅画像の大ファンとして、新しく組み込まれた WordPress 6.1 レイアウトとパディングを考慮した配置機能は、これまでで最もお気に入りの XNUMX つです。 マージンやパディングの制御を改善するなど、他のツールと組み合わせると、 流動的なタイポグラフィ、更新された List ブロックと Quote ブロックなどは、WordPress がより優れたコンテンツ作成エクスペリエンスに向かっていることの確固たる証拠です。
今、私たちは待って、普通のデザイナーやコンテンツ クリエイターの想像力と創造性がこれらの素晴らしいツールをどのように使用し、新しいレベルに引き上げるかを観察する必要があります.
進行中のサイト エディター開発イテレーションのため、常に困難な道のりを予測する必要があります。 しかし、楽観主義者として、WordPress 6.2 の次期バージョンで何が起こるかを楽しみにしています。 私が注意深く見守っていることのいくつかは、次のようなものです 検討中の機能 インクルージョン、サポート スティッキーポジショニング, 新しいレイアウト クラス名 内側のブロック ラッパーの場合、 更新されたフッター配置オプション, カバー ブロックへの制約およびフロー レイアウト オプションの追加.
この GitHub の問題 #44720 レイアウト関連の議論を一覧表示します WordPress 6.2 の予定.
その他のリソース
これらすべてを掘り下げながら、多くの情報源を調べて参照しました。 これは、私が役に立ち、あなたも楽しめると思われるものの大規模なリストです.
チュートリアル
WordPressの投稿
GitHub プル リクエストとイシュー
- コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。ここをクリック
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/
