Gutenberg 12.5 引入全局樣式變化,保留相鄰按鈕樣式,並為顏色選擇器添加 Alpha 透明度

已發表: 2022-02-03

Gutenberg 12.5 今天早些時候登陸 WordPress 插件目錄。 我已經對至少一項新的增強功能感到興奮,即全局樣式變化。 但是,這是一個強大的更新,具有幾個以開發人員和用戶為中心的功能。

隨著 WordPress 5.9 的發布,看起來所有的人都回到了甲板上,因為我們為 5 月發布的 6.0 做準備。 上週,我介紹了早期的路線圖,該列表中的一些項目已經以某種形式或時尚出現在最新的古騰堡更新中。

全局樣式變化

主題作者現在可以創建多個theme.json變體並將它們放入主題的/styles文件夾中。 然後,用戶可以在各種預設之間切換到最適合他們的預設。

新功能有望成為 WordPress 6.0 版本的亮點之一,默認的二十二十二主題最終將發布其自己的多個變體。

我在上週的一篇文章中更詳細地介紹了該功能。 Gutenberg 項目負責人 Matias Ventura 在評論中對此進行了擴展:

在周期的早期得到這個,這樣我們就可以消除經驗和機制。 我希望它在幾次迭代中會非常好。 我特別期待打破主題捆綁牆,因為所有這些變化本質上都與那裡的每個塊主題兼容!

雖然我分享 Ventura 對該功能的熱情,但我不確定我們能否用 6.0 打破主題障礙。 這裡的想法是這樣的變化可以在主題之間互換。 鑑於全球樣式系統的當前狀態,我沒有看到這種情況發生。

大多數theme.json都是標準化的,但許多作者使用settings.custom屬性。 這允許他們設置任意數量的自定義值,這些值通常通過主題樣式表引用。

還有一個小問題是沒有像顏色和排版這樣的功能的標準命名方案。

因為在任何兩個主題之間這些東西都不總是相同的,所以切換變化並不總是很漂亮。 這是一個崇高的目標,也許值得嘗試看看什麼是可能的。 然而,這個概念感覺就像是為了一個巨大的千篇一律的默認設置而完全放棄主題系統。

變化切換最好留給個別主題。 允許在theme.json之上構建自定義系統的主題作者來管理用戶體驗和期望。 我們應該專注於構建工具來幫助他們執行他們的願景,而不用擔心用戶在一個完全不同的項目中“安裝”他們的 JSON 變體。

新按鈕保留相鄰按鈕樣式

WordPress 帖子編輯器使用 Button 塊打開。新插入的塊顯示為與其兄弟具有相同的樣式。
新按鈕塊的樣式與以前的匹配。

WordPress 使復制按鈕相對容易,但它隱藏在工具欄的選項下拉菜單下。 與簡單地點擊“+”圖標插入新的按鈕塊相比,這是一個兩次單擊操作。 在 Gutenberg 12.5 之前,這將導致新版本獲得默認樣式處理。 在您開始一次使用多個按鈕之前,這是那些小煩惱之一。

最新版本在插入下一個按鈕塊時會自動複製相鄰按鈕塊的樣式。 這是一個更好的體驗。

然而,它並沒有把我們帶到我們需要去的地方。 如果您決定稍後更改每個 Button 的設計,會發生什麼? 在修改每一項之前,您還有很多工作要做。 將一種樣式複製到 Buttons 塊組中的所有其他樣式有一張開放票。

用戶可以添加透明顏色

標題塊位於 WordPress 帖子編輯器中的封面塊之上。顏色選擇器已打開,其中顯示了一個 Alpha 透明度滑塊。
透明的顏色讓背景顯示出來。

用戶最終可以在塊級別控制自定義顏色的 alpha 透明度。 該功能適用於文本、背景、鏈接和邊框顏色選項。 此增強功能關閉了 2019 年 10 月首次打開的票證。

有一些顏色選擇器未啟用。 這包括全局樣式面板中的自定義調色板部分和社交鏈接塊的圖標相關顏色。 Cover 塊疊加顏色也是如此,但它完全有一個單獨的不透明度控制。

發布特色圖片尺寸選項

在編輯器中的查詢循環塊內發布特色圖像塊。在塊檢查器側欄中選擇圖像大小下拉列表,列出所有可用大小。
在查詢循環塊中裁剪和大小相等的特色圖像。

Gutenberg 12.5 引入了一個新選項,允許將 Post Featured Image 塊設置為使用 WordPress 或主題定義的圖像大小。 這似乎是一個微不足道的變化,但它是塊主題化的一個進步。

主題作者一直在過濾post_thumbnail_size鉤子來處理這個問題。 但是,當處理具有不同圖像大小的多個後查詢時,該方法會變得複雜。

我只提到了一年。 我一遍又一遍地寫它,試圖讓任何人聽。 如果我們希望更多設計師跳上基於塊的主題開發火車,他們需要控制特色圖像。 太多的佈局依賴於特定的尺寸才能看起來最好。

現在,如果我們只能在 Cover 和 Media & Text 塊中使用特色圖片……

複製所有站點編輯器內容

打開選項菜單的 WordPress 站點編輯器。選擇“複製所有內容”按鈕。
從站點編輯器複製所有內容。

今天我了解到帖子編輯器的選項菜單中有一個“複製所有內容”按鈕。 我不知道它已經在那裡多久了,但那是一種整潔。 我一直在不必要地嘗試通過內容畫布選擇所有內容——有時是成功的衡量標準。 即使是我們這些幾乎每個醒著的時間都花在編輯器上的人,偶爾也會學到一個新技巧。

該複製內容選項現在已添加到站點編輯器中,作為在兩個編輯器之間實現功能平等的計劃的一部分。

站點編輯器中的代碼視圖

打開代碼編輯視圖的 WordPress 站點編輯器。
打開代碼編輯器。

繼續帖子和站點編輯器之間的功能對等,用戶現在可以切換到站點編輯器中的代碼視圖。

從技術上講,這被稱為“代碼編輯器”,但對於任何試圖編輯任何東西的人來說,前面都有龍。 至少如果他們期望除了可怕的“此塊包含意外或無效內容”消息之外的任何其他內容。 我會航行到平靜的水域,除了閱讀或複制之外,我會避開它。