WordPress 6.1 為塊編輯器的布局控件和功能帶來了相當(dāng)大的靈活性。一種新的布局類型，“受約束（constrained）”，被添加到已經(jīng)可用的 Flow 和 Flex 布局類型中。此外，布局重構(gòu)工作帶來了新的布局樣式、新的塊級間距、布局的更多語義類名稱、根填充（root padding）以及禁用所有主題的所有布局樣式的方法。
新的“受約束”布局類型
新的“約束”布局類型已從“流體（flow）”布局中分離出來。這意味著“流體”現(xiàn)在僅對應(yīng)于基本布局配置。此更改將內(nèi)容寬度邏輯移動到一種稱為?“受約束（constrained）”的新布局類型，?這使得將塊設(shè)置為默認使用內(nèi)容寬度變得更加容易。
每種布局類型輸出什么樣式？
流體（Flow）布局
- 子塊之間的間距用
margin-block-start,margin-block-end; - 子塊的左、右和中心對齊。
約束布局
- 子塊之間的間距用
margin-block-start,?margin-block-end; - 子塊的左、右和中心對齊；
- 子塊的寬度限制（基于 settings > layout > contentSize 和 settings > layout > wideSize from theme.json?）；
- 可選地，所有子塊的左/右/中心對齊。
Flex 布局（未更改）
- 基本 flex 顯示規(guī)則，默認為水平方向；
- 子塊之間的間距用
gap; - 可選地，左/右/中心/對齊和水平/垂直方向之間的空間。
布局塊支持重構(gòu)
在wordpress 6.1 中，為組、按鈕、社交圖標(biāo)和列等塊提供布局樣式的布局塊支持已被重構(gòu)。在此版本之前，布局塊支持將在渲染時為每個存儲在帖子內(nèi)容或模板中的塊的每個實例輸出布局樣式，從而導(dǎo)致在此 Gutenberg 問題中報告的站點前端輸出冗余樣式# 41434。
為了解決這個問題，重構(gòu)通過在核心WordPress theme.json 文件中存儲一組布局定義來添加基本布局樣式的概念，其中包含每個當(dāng)前布局類型的默認規(guī)則。這些基本布局樣式通過帶有前綴的語義類名附加到每個布局類型is-layout-，從而產(chǎn)生以下基于類名的規(guī)則：
is-layout-flow（與 Group 和其他容器塊中使用的 Flow 布局相關(guān)的基本布局規(guī)則）is-layout-constrained（與 Group 和其他設(shè)置內(nèi)容和寬尺寸的容器塊中使用的約束布局類型相關(guān)的基本布局規(guī)則）- i
s-layout-flex（與 Flex 布局類型相關(guān)的基本布局規(guī)則，用于按鈕、社交圖標(biāo)和列塊）
現(xiàn)在，當(dāng)渲染使用布局支持的塊時，上述類名之一將被注入到塊的輸出中，將基本布局樣式附加到該塊。結(jié)果是布局支持現(xiàn)在只輸出一個wp-container-123類名（其中 123 是一個半隨機數(shù)），以及當(dāng)塊使用非默認布局屬性時相關(guān)的樣式。這意味著使用默認布局設(shè)置的包含許多組塊的帖子或頁面的冗余CSS規(guī)則將大大減少。
另外，Layout support在輸出wp-container-123規(guī)則時，會通過新增的樣式引擎功能將規(guī)則排入隊列，從而將所有規(guī)則組合在一個style 標(biāo)簽中輸出。這進一步整理了 CSS 輸出。
在 theme.json 中的塊級別啟用塊間距
布局重構(gòu)的一個副產(chǎn)品是blockGap現(xiàn)在可以在 theme.json 中的塊級別和通過全局樣式UI設(shè)置，因為間隙樣式現(xiàn)在也可以通過上述布局類型類名稱輸出，使用直接 CSS 值，而不是塊間??隙 CSS 變量--wp--style--block-gap。為了向后兼容依賴 CSS 變量的主題和塊，為根styles.spacing.blockGap樣式定義的值也作為 CSS 屬性輸出。
注意：?圖庫Gallery 塊目前不支持 theme.json 中的 blockGap 樣式，因為它依賴于間隙間距的特殊方法來考慮圖像塊的寬度。
布局支持中的語義類名
從 WordPress 6.0 開始，布局支持為布局屬性輸出語義類名稱orientation、justifyContent和flexWrap，從而產(chǎn)生諸如 is-vertical、is-content-justification-left和is-nowrap類的名稱。
隨著 WordPress 6.1 中的更改，結(jié)合基于布局類型的類名稱，現(xiàn)在可以針對 組Group 塊的特定配置，例如，通過諸如.wp-block-group.is-layout-flex.is-vertical.
這些語義類名稱僅為已顯式設(shè)置的 Layout 屬性輸出。
根填充
默認情況下，可以在 Styles > Layout > Padding 中設(shè)置的根填充應(yīng)用于最外層的包裝元素。在前端是wp-site-blocks; 在編輯器中是editor-styles-wrapper.
這種方法的問題是它不允許塊擴展到完整的視口寬度。
useRootPaddingAwareAlignments更改應(yīng)用左右填充的位置，以便設(shè)置為全寬的塊實際上可以跨越整個視口寬度。
它是如何工作的？
代替包裝器，將左右填充添加到具有約束布局集的最外層容器塊。然后，將相同值的負邊距添加到該塊的任何全寬子級。此外，這些全寬塊的非全寬子代也將應(yīng)用左右填充。這是為了使全寬容器塊的內(nèi)容不會撞到視口的側(cè)面。
要啟用此設(shè)置，請在 theme.json 中，"useRootPaddingAwareAlignments": true在設(shè)置對象中添加。
參看古騰堡工單 #42085 中的更多背景。
禁用布局樣式主題支持
默認情況下，WordPress 會輸出組、列、社交圖標(biāo)和按鈕等塊的結(jié)構(gòu)布局樣式，作為布局塊支持的一部分。到目前為止，一些主題已經(jīng)通過使用未記錄的方法覆蓋或render_layout_support_flag刪除render_block filter.
在 WordPress 6.1 中，基本布局樣式已合并為全局樣式輸出的一部分，因此現(xiàn)有的選擇退出生成的布局樣式的方法將不再有效。取而代之的是，主題現(xiàn)在可以使用一個新的主題支持標(biāo)志，稱為disable-layout-styles。主題可以使用以下代碼選擇加入此功能：
// 可以同來禁用布局樣式
add_theme_support( 'disable-layout-styles' );使用這個新的主題支持標(biāo)志可確保在代碼中明確處理預(yù)期的行為。它還允許使用此標(biāo)志的主題仍然使用在渲染時注入布局塊的語義類名稱，例如內(nèi)容對齊類。
注意：選擇加入此功能將刪除組、列、社交圖標(biāo)和按鈕等塊所需的樣式，因此使用此功能的主題將需要提供自己的結(jié)構(gòu)布局樣式，以便這些塊在編輯器中正確呈現(xiàn)和在網(wǎng)站的前端。在大多數(shù)情況下，特別是對于基于塊的主題，生成的布局樣式更適合確保正確呈現(xiàn)核心塊。對于希望調(diào)整塊間距的主題，請查看手冊條目“什么是塊間隙以及如何使用它？”?.
有關(guān)更多詳細信息：文檔 > 塊編輯器 > 說明 > 架構(gòu) >布局樣式
