検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >WordPressブロックテーマの新しい制約レイアウトを使用します

WordPressブロックテーマの新しい制約レイアウトを使用します

Jennifer Aniston
Jennifer Anistonオリジナル
2025-03-09 10:07:10439ブラウズ

Using The New Constrained Layout In WordPress Block Themes

WordPressサイトエディターの主な目標の1つ（現在は公式に指定されている）は、基本的なブロックスタイルをCSSから構造化JSONに移行することです。 JSONファイルはMachine Readableであり、JavaScriptベースのサイトエディターがWordPressで直接テーマのグローバルスタイルを構成できるようにします。

しかし、この作業はまだ完全には完成していません！ 222（TT2）のデフォルトテーマを見ると、解決されていない主な問題が2つあります。スタイルの相互作用（Hover、：Active、：Focus）とレイアウトコンテナのマージンとパディング。これらの問題がtt2のstyle.cssファイルで一時的に固定されている方法をTheme.jsonファイルに追加する方法を確認できます。

WordPress 6.1これらの問題を修正し、後者に特化したいと思います。これで、レイアウトコンテナマージンとパディング用のJSONスタイルがあります。これにより、テーマレイアウトの間隔を定義するためのより柔軟で強力な方法があります。 どんな間隔について話しているのですか？

まず、

ルートレベルの塗りつぶし

が既にあります。これは、要素塗りつぶしに関する派手な声明です。これは、すべてのページと投稿で共有される要素の一貫した間隔を確保するため、素晴らしいことです。しかし、さらに多くのことがあります。今では、そのパディングをバイパスして全幅に合わせてブロックを取得する方法があるからです。これは、themis.jsonの新しいオプション機能であるfill-aware alignment のおかげです。したがって、ルートレベルのパディングがある場合でも、たとえば、画像（または他のブロック）を突破して全幅を表示できるようにすることができます。 これは、別のことを思い出させます：

制約付きレイアウト

。ここでのアイデアは、レイアウトにネストされているブロックは、レイアウトのコンテンツ幅（これはグローバルな設定です）に従い、その幅から流れ出ないということです。アライメントを使用してブロックごとにこの動作ブロックを上書きすることはできますが、後で説明します。 始めましょう...

ルートレベルの塗りつぶし

繰り返しますが、これは新しいことではありません。実験的なGutenbergプラグインがバージョン11.7で導入したため、Theme.jsonに要素の塗りつぶしを設定する機能があります。 Styles.Spacingオブジェクトに設定します。このオブジェクトには、ボディの上部、右、下、左の間隔を定義するためのマージンとパディングオブジェクトがあります。

これはグローバルな設定です。したがって、devtoolsを開いて要素を確認すると、これらのCSSスタイルが表示されます。 

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>
悪くない。しかし、問題は、特定のブロックがその間隔を突破して、画面全体、エッジからエッジを埋める方法です。それが間隔が存在する理由ですよね？これが起こらないようにするのに役立ちます！

ただし、ブロックエディターで作業する場合、実際には、性的な例でその間隔を突破したい場合があります。画像ブロックをページに配置し、残りの部分がルートレベルのパディングに従う間、それを全幅に表示したいとしますか？ 
<code>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;
}</code>

入力...

Aware Alignment

に記入します リードデザイナーのKjell Reigstadは、Them.jsonファイルのすべてのスタイルを定義する最初のデフォルトのWordPressテーマを作成しようとする際に、このGitHubの質問でルートレベルの埋めることの挑戦的な側面を示しています。

WordPress 6.1の新機能は、この問題を解決するように設計されています。次にこれらのことを掘り下げましょう。

userootpaddingawareAlignments

この問題を解決するために、新しいuserootpaddingawarealignmentsプロパティが作成されました。実際、Gutenberg Plugin v13.8で最初に導入されました。元のプルリクエストは、それがどのように機能するかについての良い紹介を提供します。

まず、それは私たちがオプトインする必要がある機能です。このプロパティはデフォルトでfalseに設定されており、有効にするために明示的に真で設定する必要があります。また、外観を真に設定したことにも注意してください。これにより、サイトエディターでUIコントロールを使用して、スタイルの境界線、リンク色、タイポグラフィ、および間隔を設定できます（マージンと塗りつぶしを含む）。 

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>
SET seet strueを設定して、[設定]を設定せずにブロックを選択する[マージン]とパディングを選択します。Spacing.paddingまたはsetting.spacing.margin to true。

userootpaddingawarealignmentsを有効にすると、フロントエンド要素にルートフィル値が設定されたカスタム属性を取得します。興味深いことに、バックエンドブロックエディターで作業するときに間隔を表示するために、.editor-styles-wrapperクラスにパディングを適用します。かっこいい！掘りながら、これらのCSSカスタムプロパティをDevToolsで確認することができました。

enable userootpaddingawarealignmentsは、上記のグローバルスタイル画像で「コンテンツ」幅と「幅」幅値をサポートする任意のブロックに左右の塗りつぶしを適用します。これらの値をthema.json：

で定義することもできます

グローバルスタイルの設定がthemain.jsonで定義されている設定とは異なる場合、グローバルスタイルが優先されます。以前の投稿でブロックテーマスタイルの管理についてすべてを学ぶことができます。 

<code>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;
}</code>

コンテンツサイズは、ブロックのデフォルト幅です。

    Widesizeは「幅」レイアウトオプションを提供し、ブロックストレッチング用のより広い列を作成します。
  • したがって、最後のコードの例では、次のCSSが表示されます。
[ID]は、WordPressによって自動的に生成される一意の数字を表します。

しかし、他に何が得られたと思いますか？完全に整合しました！ 
<code>{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },</code>

見ましたか？ userootpaddingawarealignmentsを有効にし、コンテンツを定義し、widezizeを定義することにより、ページと記事に追加されたブロック幅を制御する3つのコンテナ構成に対して完全に整列したCSSクラスも取得します。

これは、次のレイアウト固有のブロックに適用されます：列、グループ、記事のコンテンツ、クエリループ。 

<code>{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}</code>
ブロックレイアウトコントロール

上記のレイアウト固有のブロックをページに追加するとします。ブロックを選択すると、ブロック設定UIは、settings.layout値に基づいて新しいレイアウト設定を提供します。Thema.json（またはグローバルスタイルUI）で定義します。内部ブロック使用量コンテンツ幅設定は、デフォルトで有効になります。閉じると、コンテナには最大幅がなく、その中のブロックがエッジとエッジのエッジが表示されます。

トグをオンにしておくと、ネストされたブロックはコンテンツ幅または幅の広い幅の値に従います（これについては後で詳しく説明します）。または、数値入力を使用して、この1回限りのインスタンスでカスタムコンテンツ幅とワイド幅値を定義できます。これは素晴らしい柔軟性です！

ワイドブロック

表示された設定は、親ブロックに設定されていました。内部にブロックをネストして選択したら、そのブロック内の追加オプションをContentWidth、Widewidth、またはFull-Widthディスプレイに使用できます。

WordPressがルートレベルで人口の多いCSSカスタム属性に-1を掛ける方法に注意して、完全な幅オプションが選択されたときに負のマージンを作成する方法。

制約付きレイアウトを使用して

WordPress 6.1によってもたらされた新しい間隔とアライメントを導入しました。これらは、ブロックとブロック内のネストされたブロックに固有です。しかし、WordPress 6.1は、テーマテンプレートの柔軟性と一貫性を高めるために、新しいレイアウト機能も導入しています。

例：WordPressはFlexおよびFlowレイアウトの種類を完全にリファクタリングし、

制約付きレイアウトタイプを提供します。これにより、サイトエディターのグローバルスタイルUIのコンテンツ幅設定を使用してテーマのブロックレイアウトを簡単に整列できます。 フレックス、フロー、制約レイアウト

これら3つのレイアウトタイプの違いは、出力スタイルです。イザベル・ブリソンには、これらの違いをよく概説する優れた記事がありますが、参照のためにここで解釈しましょう。

フローレイアウト：
    マージンブロック方向のネストされたブロック間に垂直間隔を追加します。これらのネストされたブロックは、左調整、右整列、または中心に整列することもできます。
  • 制約付きレイアウト：
    • はフローレイアウトとまったく同じですが、ネストされたブロックの幅の制約は、コンテンツ幅と広幅の設定に基づいています（thema.jsonまたはグローバルスタイル）。
  • フレックスレイアウト：
    • これは、WordPress 6.1では変更されていません。 CSS FlexBoxを使用して、デフォルトの水平フロー（1列）を備えたレイアウトを作成しますが、垂直に流れることができるため、ブロックは1つずつ積み重ねられます。 CSS Gapプロパティを使用して、間隔を適用します。
  • この新しいレイアウトタイプは、各レイアウトのセマンティッククラス名を作成します。
    • Justin Tadlockは、ユースケースや例を含むさまざまなレイアウトタイプとセマンティッククラスの幅広い紹介を提供します。

テーマを更新して、制約付きのレイアウトをサポートします

自分で作成するブロックテーマを既に使用している場合は、制約されたレイアウトをサポートするために更新する必要があります。 Theme.jsonで交換するものはいくつかあります。

これらは、userootpaddingawarealignmentsを有効にした最近リリースされた間隔設定であり、theme.jsonファイルを更新して制約付きのレイアウトを定義しています。

レイアウトスタイルを無効にします

基本的なレイアウトスタイルは、WordPress 6.1 Coreのデフォルト機能です。言い換えれば、彼らは箱から出しています。ただし、必要な場合は、この小さなコードをfunctions.phpで使用して無効にすることができます。
<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

ここに重要な警告があります。デフォルトのレイアウトタイプのサポートを無効にすると、これらのレイアウトのすべての基本的なスタイルも削除されます。これは、間隔、アラインメント、およびさまざまなテンプレートでコンテンツを表示し、コンテキストをブロックするために必要な他のもののために独自のスタイルをスタイリングする必要があることを意味します。

要約

全幅画像の大ファンとして、新しい機能にはWordPress 6.1レイアウトと塗りつぶしのアライメントが含まれます。より良いマージンと充填コントロール、スムーズなタイポグラフィ、更新されたリストと参照ブロックなど、他のツールを操作することは、コンテンツ作成体験の改善の証です。

今、私たちは、平均的なデザイナーとコンテンツクリエイターがこれらの信じられないほどのツールを使用し、次のレベルに引き上げることができる方法を待って見なければなりません。

サイトエディター開発の反復が進行中であるため、先の道の困難を常に予測する必要があります。しかし、楽観主義者として、WordPress 6.2の次のバージョンで何が起こるかを見たいと思います。考慮されている機能、スティッキーポジショニングのサポート、内部ブロックラッパーの新しいレイアウトクラス名、更新されたフッターアライメントオプション、カバーブロックに制約付きおよびフローレイアウトオプションの追加を含めるように細心の注意を払っていることがあります。

このGithub Issue＃44720には、WordPress 6.2で計画されたレイアウト関連のディスカッションがリストされています。

追加リソース

私は、これらすべてを掘り下げながら、多くの情報源に相談して紹介しました。これが私が役立つと思ったものの巨大なリストです。あなたも好きかもしれないと思います。

チュートリアル

  • レイアウトスタイル（Style |開発者リソース）
  • themain.jsonレイアウトと間隔オプション（サイト全体の編集）
  • 充填済みのアラインメント（サイト全体の編集）
  • WordPressのレイアウトと幅広いアライメント：過去、現在、および今後の変更（Gutenberg Times）
    • WordPress 6.1
  • のレイアウトクラスのGutenberg Times
WordPressの記事

6.1リファクタリング（WordPress Coreの作成）の後に更新されたエディターレイアウトサポートサポート
  • コアブロックスタイルをJSONに移動します（WordPress Coreを作成）
    • githubプルリクエストと質問

コアCSSはルートフィルブロックとalignfullブロックをサポートしています（Github PR 42085）
  • レイアウト：Contentsizeのない制約付きレイアウトのGlobal-Paddingクラス名を修正（Github PR＃43689）レイアウト：セマンティッククラス名を使用し、レイアウトの定義を一元化し、重複を減らし、Thema.jsonのブロックギャップを修正（Github PR 40875）
    • 追跡：その他のレイアウトオプション、設計ツール、および改善（GitHub Issue 44720）

以上がWordPressブロックテーマの新しい制約レイアウトを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript json css 循环 堆 using 对象 margin padding flex github ui 重构 WordPress
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：AI関連のものに関するいくつかのリンク次の記事：AI関連のものに関するいくつかのリンク

関連記事

続きを見る