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

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

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

まず、

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

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

制約付きレイアウト

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

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

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

これはグローバルな設(shè)定です。したがって、devtoolsを開いて要素を確認(rèn)すると、これらの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>

悪くない。しかし、問題は、特定のブロックがその間隔を突破して、畫面全體、エッジからエッジを埋める方法です。それが間隔が存在する理由ですよね？これが起こらないようにするのに役立ちます！

ただし、ブロックエディターで作業(yè)する場(chǎng)合、実際には、性的な例でその間隔を突破したい場(chǎng)合があります。畫像ブロックをページに配置し、殘りの部分がルートレベルのパディングに従う間、それを全幅に表示したいとしますか？

<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の質(zhì)問でルートレベルの埋めることの挑戦的な側(cè)面を示しています。

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

userootpaddingawareAlignments

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

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

<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を設(shè)定して、[設(shè)定]を設(shè)定せずにブロックを選択する[マージン]とパディングを選択します。Spacing.paddingまたはsetting.spacing.margin to true。

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

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

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

グローバルスタイルの設(shè)定がthemain.jsonで定義されている設(shè)定とは異なる場(chǎng)合、グローバルスタイルが優(yōu)先されます。以前の投稿でブロックテーマスタイルの管理についてすべてを?qū)Wぶことができます。

<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によって自動(dòng)的に生成される一意の數(shù)字を表します。

しかし、他に何が得られたと思いますか？完全に整合しました！

<code>{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },</code>

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

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

<code>{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}</code>

ブロックレイアウトコントロール

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

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

ワイドブロック

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

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

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

WordPress 6.1によってもたらされた新しい間隔とアライメントを?qū)毪筏蓼筏?。これらは、ブロックとブロック?nèi)のネストされたブロックに固有です。しかし、WordPress 6.1は、テーマテンプレートの柔軟性と一貫性を高めるために、新しいレイアウト機(jī)能も導(dǎo)入しています。

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

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

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

フローレイアウト：

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

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

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

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

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

基本的なレイアウトスタイルは、WordPress 6.1 Coreのデフォルト機(jī)能です。言い換えれば、彼らは箱から出しています。ただし、必要な場(chǎng)合は、この小さなコードを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>

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

要約

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

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

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

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

追加リソース

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

チュートリアル

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

WordPressの記事

6.1リファクタリング（WordPress Coreの作成）の後に更新されたエディターレイアウトサポートサポート

• コアブロックスタイルをJSONに移動(dòng)します（WordPress Coreを作成）
githubプルリクエストと質(zhì)問

コアCSSはルートフィルブロックとalignfullブロックをサポートしています（Github PR 42085）

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

以上がWordPressブロックテーマの新しい制約レイアウトを使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。