古騰堡9.8圓角的邊框帶到組塊並將站點編輯器畫布移動到嵌入式框架

古騰堡9.8 昨天發射 與一些小的UI改進。 開發團隊為主題作者可以選擇加入的Group塊添加了邊界半徑支持的初始實現。 他們還將網站編輯器移至iframe元素中,以從全局管理樣式中消除CSS衝突。

那些已經測試過「完整站點編輯」的人應該感到高興,他們將不再需要處理似乎永無止境的模板和模板零件自動草稿創建。 甩掉包袱。 從長遠來看,它們將不可避免地引起用戶混亂。 更改大約花了一個 討論和工作月,但從長遠來看,它將複雜而脆弱的過程簡化為一個更穩定的系統。

儘管以前的插件版本僅修復了很少的錯誤,但9.8版又跳回了兩打。 沒有至少許多更新的古騰堡更新感覺不對。

輕微的UI改進

使用Spacer塊時,最新版本的插件可改善UI。 用戶過去選擇該塊時,它顯示為淺灰色矩形。 現在它是 半透明。 這樣可以顯示背景中的所有內容,例如帶有背景圖像的Cover塊。 在需要查看背景的情況下,此更改應有助於用戶更輕鬆地進行尺寸調整。

gutenberg-9-8將圓角的邊界帶到組塊中,然後將現場編輯器畫布移動到一個內聯框架中Gutenberg 9.8將圓角的邊界帶到組塊中並移動站點編輯器將畫布放入嵌入式框架選擇時為半透明的墊片塊。

雖然我希望間隔塊最終會因緩慢的痛苦折磨而死,因為它已被更合適的邊距和填充塊選項所代替,但此更改確實對過渡有所幫助。

在對Gutenberg 9.7中的UI進行改進之後,有關塊變化的工作仍在繼續。 變體是將一個塊用作創建同一塊的多個變體的基礎。 最常見的示例是Embed塊,其中包含YouTube,Vimeo和其他變體。 在9.7之前的版本中,這些版本在塊檢查器和導航中共享相同的通用圖標,名稱和描述,而不是版本特定的信息。

Gutenberg 9.8建立在使用有意義的變體數據的趨勢上。 現在,編輯器工具欄中的塊切換器(轉換)按鈕 顯示版本的圖標

gutenberg-9-8將圓角邊界帶到組塊中,然後將現場編輯器畫布移動到一個內聯框架1中Gutenberg 9.8將圓角邊界帶到組塊中並將「站點編輯器」畫布移動到嵌入式框架中塊切換器中使用的版本圖標。

這是一個很小的變化,但是它表明開發團隊對開發編輯器界面的持續投入。

在iframe中載入網站編輯器畫布

Gutenberg 9.8分隔了畫布的畫布區域 網站編輯器插入iframe。 這種分離意味著全局管理員樣式不會滲入或覆蓋編輯器本身內的樣式。 好消息是,這也是朝著在帖子編輯器中做到這一點邁出的第一步。

自從塊編輯器誕生以來,這就是我一直在等待的更改。 從主題開發和設計的角度來看,設計編輯器以使其與前端匹配的樣式已成問題。 這意味著在不必要的時候嵌套CSS選擇器。 這意味著要添加一些重要的規則來覆蓋核心CSS中似乎有些古怪的東西。 儘管在過去的幾年中,塊編輯器的樣式得到了長足的進步,但通常仍然很麻煩。

WordPress核心提交者Ella van Durpe 列出了好處 將畫布移動到iframe中:

  • 根本不會有管理CSS流血。 從一開始,我們就一直在努力。
  • 無需模擬媒體查詢,從技術上講,這比使用iframe困難。
  • 相對單位(r)em和vw / vh可以正常工作。
  • 對於完整的網站,主題樣式表可以直接放在編輯器中而無需任何調整。 我認為這很重要,因為它使主題作者的生活更加輕鬆。
  • 每個窗口可以有一個選擇,因此在管理員中可以選擇一個,在內容中可以選擇一個。 例如,這對於鏈接UI很有用,在鏈接UI中,內容的選擇也可以保留,同時選擇也位於輸入元素中(用於URL)。 在其他情況下可能有用。

儘管我很難相信主題樣式表會一帆風順地工作-這樣的世界存在嗎? –,它們的工作應該比過去更好。 主題作者可能需要解決一些問題,但應盡量減少。 開發人員應密切注意此功能的未來發展。

邊界半徑對組塊的支持

作為古騰堡實驗功能集的一部分,Group塊現在支持 邊界半徑選項。 但是,最終用戶將不會在塊檢查器中自動看到它。 目前,這是一個主題選擇功能。 據推測,它將成為將來多個塊的默認選項集的一部分。

gutenberg-9-8將圓角邊框帶到組塊中,然後將現場編輯器畫布移動到嵌入式框架2中Gutenberg 9.8將圓角邊框帶到組塊中並將「站點編輯器」畫布移動到嵌入式框架中設置組塊的邊界半徑值。

對於想要增加支持的主題作者,他們需要將以下代碼片段拖放到他們的Experimenting-theme.json文件中並編輯radius值:

「 core / group」:{「 styles」:{「 border」:{「 radius」:「 50px」}}}

這將允許主題作者為組塊設置默認的邊框半徑。 但是,它不會將控制權移交給用戶。 為此,主題需要在其experimental-theme.json文件的settings部分下添加以下代碼段:

「 border」:{「 customRadius」:true}

我使用修改後的版本進行了測試 TT1塊 主題沒有問題。 通常,我希望在以後的插件迭代中有更多這樣的樣式選項。

像這樣:

喜歡載入中……

資源

相關文章