WordPress站點(diǎn)編輯器（現(xiàn)已正式命名）的主要目標(biāo)之一是將基本的塊樣式從CSS遷移到結(jié)構(gòu)化的JSON。JSON文件是機(jī)器可讀的，這使得基于JavaScript的站點(diǎn)編輯器可以直接在WordPress中配置主題的全局樣式。

但這項(xiàng)工作尚未完全完成！如果我們查看Twenty Twenty-Two (TT2)默認(rèn)主題，有兩個(gè)主要問題尚未解決：樣式交互（如：hover、：active、：focus）以及布局容器的邊距和填充。您可以看到這些問題是如何在TT2的style.css文件中臨時(shí)修復(fù)的，而不是將其添加到theme.json文件中。

WordPress 6.1修復(fù)了這些問題，我想專門研究后者。現(xiàn)在我們有了布局容器邊距和填充的JSON化樣式，這為我們提供了更靈活、更強(qiáng)大的方法來定義主題布局中的間距。

我們討論的是哪種間距？

首先，我們已經(jīng)有了根級(jí)填充，這是對(duì)元素填充的一種花哨的說法。這很好，因?yàn)樗_保了在所有頁(yè)面和文章中共享的元素上的一致間距。但還有更多內(nèi)容，因?yàn)楝F(xiàn)在我們有一種方法可以讓塊繞過該填充并使其全寬對(duì)齊。這要?dú)w功于填充感知對(duì)齊，這是theme.json中一個(gè)新的可選功能。因此，即使您有根級(jí)填充，您仍然可以允許，例如，圖像（或其他一些塊）突破并全寬顯示。

這讓我們想到了另一件事：受約束的布局。這里的想法是，嵌套在布局中的任何塊都遵守布局的內(nèi)容寬度（這是一個(gè)全局設(shè)置），并且不會(huì)流出該寬度。我們可以使用對(duì)齊方式逐塊覆蓋此行為，但稍后我們會(huì)討論。

讓我們從……開始

根級(jí)填充

再說一次，這不是什么新鮮事。自從實(shí)驗(yàn)性的Gutenberg插件在11.7版本中引入它以來，我們就有能力在theme.json中設(shè)置元素的填充。我們將其設(shè)置在styles.spacing對(duì)象上，在這里我們有margin和padding對(duì)象來定義body的頂部、右側(cè)、底部和左側(cè)間距：

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

這是一個(gè)全局設(shè)置。因此，如果我們打開DevTools并檢查元素，我們將看到這些CSS樣式：

<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>

不錯(cuò)。但問題是如何允許某些塊突破該間距以填充整個(gè)屏幕，邊緣到邊緣。這就是間距存在的原因，對(duì)吧？它有助于防止這種情況發(fā)生！

但是，在塊編輯器中工作時(shí)，確實(shí)有很多情況下您可能希望在一個(gè)性實(shí)例中突破該間距。假設(shè)我們?cè)陧?yè)面上放置一個(gè)圖像塊，并且我們希望它全寬顯示，而其余內(nèi)容遵守根級(jí)填充？

進(jìn)入……

填充感知對(duì)齊

在嘗試創(chuàng)建第一個(gè)在theme.json文件中定義所有樣式的默認(rèn)WordPress主題時(shí)，首席設(shè)計(jì)師Kjell Reigstad在這個(gè)GitHub問題中說明了突破根級(jí)填充的挑戰(zhàn)性方面。

WordPress 6.1中的新功能旨在解決此問題。讓我們接下來深入研究這些內(nèi)容。

useRootPaddingAwareAlignments

創(chuàng)建了一個(gè)新的useRootPaddingAwareAlignments屬性來解決這個(gè)問題。它實(shí)際上是在Gutenberg插件v13.8中首次引入的。原始的pull request很好地介紹了它的工作原理。

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

首先要注意，這是一個(gè)我們必須選擇加入的功能。該屬性默認(rèn)設(shè)置為false，我們必須將其顯式設(shè)置為true才能啟用它。還要注意，我們也已將appearanceTools設(shè)置為true。這使我們能夠在站點(diǎn)編輯器中使用UI控件來設(shè)置樣式邊框、鏈接顏色、排版以及間距（包括邊距和填充）。

將appearanceTools設(shè)置為true會(huì)自動(dòng)使塊選擇邊距和填充，而無需將settings.spacing.padding或setting.spacing.margin設(shè)置為true。

當(dāng)我們啟用useRootPaddingAwareAlignments時(shí)，我們將獲得具有在前端元素上設(shè)置的根填充值的自定義屬性。有趣的是，它還將填充應(yīng)用于.editor-styles-wrapper類，以便在后端塊編輯器中工作時(shí)顯示間距。太酷了！我在四處挖掘時(shí)能夠在DevTools中確認(rèn)這些CSS自定義屬性。

啟用useRootPaddingAwareAlignments還會(huì)將左右填充應(yīng)用于支持上述全局樣式圖像中的“內(nèi)容”寬度和“寬”寬度值的任何塊。我們也可以在theme.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>

如果全局樣式設(shè)置與theme.json中定義的不同，則全局樣式優(yōu)先。您可以在我的上一篇文章中了解所有關(guān)于管理塊主題樣式的信息。

• contentSize是塊的默認(rèn)寬度。
• wideSize提供“寬”布局選項(xiàng)，并為塊伸展創(chuàng)建一個(gè)更寬的列。

因此，最后一個(gè)代碼示例將給我們以下CSS：

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

[id]表示W(wǎng)ordPress自動(dòng)生成的唯一數(shù)字。

但猜猜我們還得到了什么？全對(duì)齊！

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

看到了嗎？通過啟用useRootPaddingAwareAlignments并定義contentSize和wideSize，我們還獲得了用于控制添加到頁(yè)面和文章的塊寬度的三種容器配置的全對(duì)齊CSS類。

這適用于以下特定于布局的塊：列、組、文章內(nèi)容和查詢循環(huán)。

塊布局控件

假設(shè)我們將上述任何特定于布局的塊添加到頁(yè)面。當(dāng)我們選擇塊時(shí)，塊設(shè)置UI將根據(jù)我們?cè)趖heme.json（或全局樣式UI）中定義的settings.layout值提供新的布局設(shè)置?！皟?nèi)部塊使用內(nèi)容寬度”設(shè)置默認(rèn)啟用。如果我們將其關(guān)閉，則容器沒有max-width，并且其中的塊會(huì)邊緣到邊緣顯示。

如果我們保持切換打開，則嵌套塊將遵守contentWidth或wideWidth值（稍后會(huì)詳細(xì)介紹）?；蛘?，我們可以使用數(shù)字輸入在此一次性實(shí)例中定義自定義contentWidth和wideWidth值。這是極大的靈活性！

寬塊

我們剛剛查看的設(shè)置是在父塊上設(shè)置的。一旦我們將塊嵌套在內(nèi)部并選擇它，我們就可以在該塊中使用contentWidth、wideWidth或全寬顯示的附加選項(xiàng)。

請(qǐng)注意，WordPress如何將根級(jí)填充CSS自定義屬性乘以-1以在選擇“全寬”選項(xiàng)時(shí)創(chuàng)建負(fù)邊距。

使用受約束的布局

我們剛剛介紹了WordPress 6.1帶來的新的間距和對(duì)齊方式。這些是特定于塊以及塊內(nèi)任何嵌套塊的。但是WordPress 6.1還引入了新的布局功能，以在主題模板中獲得更大的靈活性和一致性。

例如：WordPress完全重構(gòu)了其Flex和Flow布局類型，并為我們提供了一種受約束的布局類型，這使得使用站點(diǎn)編輯器的全局樣式UI中的內(nèi)容寬度設(shè)置更容易在主題中對(duì)齊塊布局。

Flex、Flow和受約束的布局

這三種布局類型之間的區(qū)別在于它們輸出的樣式。Isabel Brison有一篇優(yōu)秀的文章很好地概述了這些差異，但讓我們?cè)谶@里對(duì)其進(jìn)行釋義以供參考：

• Flow布局：在margin-block方向上在嵌套塊之間添加垂直間距。這些嵌套塊也可以左對(duì)齊、右對(duì)齊或居中對(duì)齊。
• 受約束的布局：與Flow布局完全相同，但對(duì)嵌套塊的寬度約束基于contentWidth和wideWidth設(shè)置（在theme.json或全局樣式中）。
• Flex布局：這在WordPress 6.1中沒有更改。它使用CSS Flexbox創(chuàng)建一個(gè)默認(rèn)水平流動(dòng)（一行）的布局，但也可以垂直流動(dòng)，因此塊一個(gè)接一個(gè)地堆疊。使用CSS gap屬性應(yīng)用間距。

這種新的布局類型為每個(gè)布局創(chuàng)建語(yǔ)義類名：

Justin Tadlock對(duì)不同的布局類型和語(yǔ)義類進(jìn)行了廣泛的介紹，包括用例和示例。

更新您的主題以支持受約束的布局

如果您已經(jīng)在使用自己制作的塊主題，您將需要將其更新以支持受約束的布局。在theme.json中只需要交換幾件事：

<code>{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}</code>

這些是最近發(fā)布的已啟用useRootPaddingAwareAlignments的間距設(shè)置并具有更新的theme.json文件來定義受約束布局的塊主題：

禁用布局樣式

基本布局樣式是WordPress 6.1 Core中默認(rèn)的功能。換句話說，它們開箱即用。但是，如果我們需要，我們可以使用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>

這里有一個(gè)重要的警告：禁用對(duì)默認(rèn)布局類型的支持也會(huì)刪除這些布局的所有基本樣式。這意味著您需要為間距、對(duì)齊方式以及在不同模板和塊上下文中顯示內(nèi)容所需的任何其他內(nèi)容編寫自己的樣式。

總結(jié)

作為全寬圖像的忠實(shí)粉絲，新的包含WordPress 6.1布局和填充感知對(duì)齊功能是我最喜歡的兩個(gè)功能。與其他工具一起使用，包括更好的邊距和填充控制、流暢的排版以及更新的列表和引用塊等，這充分證明了WordPress正在朝著更好的內(nèi)容創(chuàng)建體驗(yàn)邁進(jìn)。

現(xiàn)在，我們必須等待并觀察普通設(shè)計(jì)師和內(nèi)容創(chuàng)建者如何使用這些令人難以置信的工具并將其提升到一個(gè)新的水平。

由于站點(diǎn)編輯器開發(fā)迭代正在進(jìn)行中，我們應(yīng)該始終預(yù)料到前方道路的艱難。但是，作為一個(gè)樂觀主義者，我很想看看WordPress 6.2的下一個(gè)版本會(huì)發(fā)生什么。我密切關(guān)注的一些事情包括正在考慮包含的功能、對(duì)粘性定位的支持、內(nèi)部塊包裝器的新的布局類名、更新的頁(yè)腳對(duì)齊選項(xiàng)以及向封面塊添加受約束和流動(dòng)布局選項(xiàng)。

此GitHub問題#44720列出了計(jì)劃用于WordPress 6.2的與布局相關(guān)的討論。

附加資源

在深入研究所有這些內(nèi)容時(shí)，我咨詢并參考了許多來源。以下是我發(fā)現(xiàn)有幫助并且我認(rèn)為您也可能喜歡的大量列表。

教程

• 布局樣式（樣式 | 開發(fā)人員資源）
• theme.json布局和間距選項(xiàng)（全站編輯）
• 填充感知對(duì)齊（全站編輯）
• WordPress中的布局和寬對(duì)齊：過去、現(xiàn)在和即將發(fā)生的變化（Gutenberg Times）
• WordPress 6.1中布局類的演練（Gutenberg Times）

WordPress文章

• 6.1重構(gòu)后更新的編輯器布局支持（制作WordPress核心）
• 將核心塊樣式移動(dòng)到JSON（制作WordPress核心）

GitHub pull request和問題

• 核心CSS支持根填充和alignfull塊（GitHub PR 42085）
• 布局：修復(fù)沒有contentSize的受約束布局的has-global-padding類名（GitHub PR #43689）
• 布局：使用語(yǔ)義類名，集中布局定義，減少重復(fù)，并修復(fù)theme.json中的blockGap（GitHub PR 40875）
• 跟蹤：其他布局選項(xiàng)、設(shè)計(jì)工具和改進(jìn)（GitHub問題44720）

以上是在WordPress塊主題中使用新的約束布局的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！