如何通過 WordPress 編輯器對齊嵌套的、部分​​寬度的組塊

是沒有充分理由的。 我們不應該教用戶，這感覺就像是一種黑客行為。

我的直覺告訴我，我首選的解決方案是正確的。 它也是最簡單的實現方式，無需藉助黑客列。 它使用 Cover 塊的內容對齊矩陣控制項與內部 Group 塊上的設置寬度相結合。 但是，我遇到了這個問題，但不明白為什麼。 直到我本周重新投入其中（我稍後會談到）。 另外，我很固執，會不斷嘗試某些東西，直到它神奇地起作用。

因此，我回到了繪圖板上。 厭倦了看以前的設計，我提出了大約一年前的第一個模式想法，並使用最新的設計工具重新創建它：

我還想確保這個解決方案在任何屏幕尺寸上都能正常工作。 當向更小的視口移動時，內容應該佔據更多空間，直到它到達邊緣。 本教程中的方法很好地處理了這個問題：

該條目在 用積木建造 系列介紹了如何創建此布局。 作為獎勵，我還將展示如何使用 WordPress 6.0 中的新 Stack 塊來完成它，以應對 Cover 容器沒有意義的情況。

蓋塊建築

對於本演練，我使用的是自定義主題。 但是，我也測試過 考古學, 前衛， 和 二十二二. 它在整個團隊中一直有效。 我也在跑步 WordPress 6.0 測試版 1 沒有激活古騰堡插件。

第 1 步：添加封面塊

帶有左對齊內容的封面塊。

對於這一步，插入一個新的封面塊以及您的首選圖像。 大多數設置都無關緊要。 我選擇了全高和全寬選項的切換。

此步驟中最關鍵的部分是從內容對齊矩陣控制項中選擇一個選項。 在工具欄中，它將是一個帶有九個小方塊的圖標，幾乎是點（見截圖）。 要在 Container 的左中部對齊後續步驟中的塊，請選擇第二行的第一個「點」。 當然，您可以隨意嘗試不同的選項。

關於封面設計的其他一切都取決於您。

第 2 步：添加固定寬度組

添加具有特定寬度的組塊。

要包含您將在第 3 步中添加的內容，請在第 1 步的封面內插入一個組塊。

塊側邊欄面板中的「布局」選項卡包含您必須設置的唯一必要選項。 您將需要定義內容和範圍選項。

這就是我在早期測試中遇到障礙的地方。 百分比 (%) 單位的行為與所有其他單位不同。 使用時，Group 塊始終是全形的，並且其內容始終居中。 沒有其他人有這個問題。 但是，並非所有這些都可用於此特定布局。 視口寬度 (vw) 和視口高度 (vh) 單位將按預期對齊，但不會在較小的設備上擴展到整個屏幕。

要記住的重要一點是使用固定的單位類型，例如 px、em 或 rem。 您也可以選擇「繼承默認布局」，但它的行為方式將取決於您的活動主題。

我將 Content 和 Wide 選項都設置為 40rem（對於這種類型的設計，Wide 設置不需要大於 Content）。 從技術上講，這是一個最大寬度值而不是固定寬度。 這允許它適應更小的屏幕尺寸。

第 3 步：添加內容

添加自定義內容。

對於最後一步，您只需從第 2 步開始在組內添加您喜歡的內容。 我選擇添加標題、段落和按鈕塊。 這可以是你想要的任何東西——沒有規則。

使用堆棧塊構建

WordPress 6.0 將引入 Group 塊的新 Stack 變體。 它不是典型的自上而下的流程，而是垂直的彈性布局。 我在 古騰堡 13.0 發布帖 本星期。

要測試以下技術，您必須安裝 WordPress 6.0 Beta 1 或最新版本的 Gutenberg 插件。 另一種選擇是等待幾周的一般版本。

第 1 步：添加堆棧塊

添加一個 Stack 並將其內容向左對齊。

第一步在內容畫布中插入一個新的 Stack 塊。 您可以選擇給它一個背景顏色或漸變。 我選擇後者是為了讓事情變得有趣。

與 Group 塊不同，Stack 具有內容對齊控制項。 如果您完成了本教程的第一部分，您可能應該已經知道我的目標是什麼。 側邊欄中有一個「對齊」控制項，用於將嵌套塊向左、居中或向右對齊。 重複選項也在工具欄中。

與 Cover 塊一樣，您可以隨意使用這些選項。 否則，將其設置為「左」以跟隨。

步驟 2–3：沖洗並重複

固定寬度組在堆棧變體內部左對齊。

步驟#2 和#3 與使用 Cover 塊作為外部容器時的字面意思相同。 因此，您只需重複前面概述的過程。 同樣，最重要的是為 Group 塊定義一個固定的寬度。

在我上周感到沮喪之後，這最終變得非常容易。 這也是塊編輯器變得多麼強大以及用戶體驗有時無法達到預期的一個例子。 如果我作為一個幾乎每時每刻都在生活和呼吸 WordPress 的人遇到障礙，那麼其他用戶可能會遇到同樣的問題。 我希望我在本教程中至少對布局構建的一個方面有所了解。

類別： 用積木建造

來源