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

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

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

我們討論的是哪種間距？

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

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

讓我們從……開始

根級填充

再說一次，這不是什么新鮮事。自從實(shí)驗(yàn)性的Gutenberg插件在11.7版本中引入它以來，我們就有能力在theme.json中設(shè)置元素的填充。我們將其設(shè)置在styles.spacing對象上，在這里我們有margin和padding對象來定義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>

這是一個全局設(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>

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

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

進(jìn)入……

填充感知對齊

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

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

useRootPaddingAwareAlignments

創(chuàng)建了一個新的useRootPaddingAwareAlignments屬性來解決這個問題。它實(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>

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

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

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

啟用useRootPaddingAwareAlignments還會將左右填充應(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提供“寬”布局選項，并為塊伸展創(chuàng)建一個更寬的列。

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

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

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

但猜猜我們還得到了什么？全對齊！

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

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

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

塊布局控件

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

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

寬塊

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

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

使用受約束的布局

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

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

Flex、Flow和受約束的布局

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

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

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

Justin Tadlock對不同的布局類型和語義類進(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>

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

總結(jié)

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

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

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

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

附加資源

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

教程

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

WordPress文章

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

GitHub pull request和問題

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

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