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

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

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

全局樣式變化 gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers Gutenberg 12.5 引入全局樣式變化,保留相鄰按鈕樣式,並添加 Alpha對顏色選擇器的透明度gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers-1 Gutenberg 12.5 引入了全局樣式變化,保留相鄰按鈕樣式,以及為顏色選擇器添加 Alpha 透明度在主題風格變體之間切換。

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

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

我深入研究了 帖子中的更多詳細信息 上星期。 古騰堡項目負責人 Matías Ventura 在此展開 在評論中:

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

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

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

還有那個小問題 沒有標準的命名方案 對於顏色和排版等功能。

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

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

新按鈕保留相鄰按鈕樣式 gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers-2 Gutenberg 12.5 引入了全局樣式變化,保留相鄰按鈕樣式,以及為顏色選擇器添加 Alpha 透明度新按鈕塊的樣式與以前的匹配。

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

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

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

用戶可以添加透明顏色 gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers-3 Gutenberg 12.5 引入了全局樣式變化,保留相鄰按鈕樣式,以及為顏色選擇器添加 Alpha 透明度透明的顏色讓背景顯示出來。

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

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

發布特色圖片尺寸選項 gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers-4 Gutenberg 12.5 引入了全局樣式變化,保留相鄰按鈕樣式,以及為顏色選擇器添加 Alpha 透明度在查詢循環塊中裁剪和大小相等的特色圖像。

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

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

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

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

複製所有站點編輯器內容 gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers-5 Gutenberg 12.5 引入了全局樣式變化,保留相鄰按鈕樣式,以及為顏色選擇器添加 Alpha 透明度從站點編輯器複製所有內容。

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

該複製內容選項現在已 添加到網站編輯器 作為帶來特色的倡議的一部分 兩位編輯之間的平等.

站點編輯器中的代碼視圖 gutenberg-12-5-introduces-global-styles-variations-preserves-adjacent-button-styling-and-adds-alpha-transparency-to-color-pickers-6 Gutenberg 12.5 引入了全局樣式變化,保留相鄰按鈕樣式,以及為顏色選擇器添加 Alpha 透明度打開代碼編輯器。

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

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

來源

相關文章