在WordPress塊主題中使用新的約束佈局-css教學-PHP中文網

首頁

web前端

css教學

在WordPress塊主題中使用新的約束佈局

Jennifer Aniston

Mar 09, 2025 am 10:07 AM

Using The New Constrained Layout In WordPress Block Themes

WordPress站點編輯器（現已正式命名）的主要目標之一是將基本的塊樣式從CSS遷移到結構化的JSON。 JSON文件是機器可讀的，這使得基於JavaScript的站點編輯器可以直接在WordPress中配置主題的全局樣式。

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

WordPress 6.1修復了這些問題，我想專門研究後者。現在我們有了佈局容器邊距和填充的JSON化樣式，這為我們提供了更靈活、更強大的方法來定義主題佈局中的間距。

我們討論的是哪種間距？

首先，我們已經有了根級填充，這是對元素填充的一種花哨的說法。這很好，因為它確保了在所有頁面和文章中共享的元素上的一致間距。但還有更多內容，因為現在我們有一種方法可以讓塊繞過該填充並使其全寬對齊。這要歸功於填充感知對齊，這是theme.json中一個新的可選功能。因此，即使您有根級填充，您仍然可以允許，例如，圖像（或其他一些塊）突破並全寬顯示。

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

讓我們從……開始

根級填充

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

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

這是一個全局設置。因此，如果我們打開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>

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

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

進入……

填充感知對齊

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

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

useRootPaddingAwareAlignments

創建了一個新的useRootPaddingAwareAlignments屬性來解決這個問題。它實際上是在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>

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

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

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

啟用useRootPaddingAwareAlignments還會將左右填充應用於支持上述全局樣式圖像中的“內容”寬度和“寬”寬度值的任何塊。我們也可以在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>

如果全局樣式設置與theme.json中定義的不同，則全局樣式優先。您可以在我的上一篇文章中了解所有關於管理塊主題樣式的信息。

contentSize是塊的默認寬度。
wideSize提供“寬”佈局選項，並為塊伸展創建一個更寬的列。

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

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

[id]表示WordPress自動生成的唯一數字。

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

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

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

這適用於以下特定於佈局的塊：列、組、文章內容和查詢循環。

塊佈局控件

假設我們將上述任何特定於佈局的塊添加到頁面。當我們選擇塊時，塊設置UI將根據我們在theme.json（或全局樣式UI）中定義的settings.layout值提供新的佈局設置。 “內部塊使用內容寬度”設置默認啟用。如果我們將其關閉，則容器沒有max-width，並且其中的塊會邊緣到邊緣顯示。

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

寬塊

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

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

使用受約束的佈局

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

例如：WordPress完全重構了其Flex和Flow佈局類型，並為我們提供了一種受約束的佈局類型，這使得使用站點編輯器的全局樣式UI中的內容寬度設置更容易在主題中對齊塊佈局。

Flex、Flow和受約束的佈局

這三種佈局類型之間的區別在於它們輸出的樣式。 Isabel Brison有一篇優秀的文章很好地概述了這些差異，但讓我們在這裡對其進行釋義以供參考：

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

這種新的佈局類型為每個佈局創建語義類名：

Justin Tadlock對不同的佈局類型和語義類進行了廣泛的介紹，包括用例和示例。

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

如果您已經在使用自己製作的塊主題，您將需要將其更新以支持受約束的佈局。在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>

這些是最近發布的已啟用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正在朝著更好的內容創建體驗邁進。

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

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

此GitHub問題#44720列出了計劃用於WordPress 6.2的與佈局相關的討論。