Gutenberg 8.3 更新塊類別，包括父塊選擇器，並添加新的設計控件

昨天，古騰堡團隊發布了塊編輯器背後正在進行的插件的 8.3 版。 雖然團隊的大部分重點是即將到來的全站點編輯，但此更新包括幾個面向用戶的功能，例如重新組織的一組塊類別、父塊選擇器、間距控件和鏈接顏色選項。

一項較小的增強功能包括按作者過濾最新帖子塊的能力。 標題塊的級別控制也發生了變化。 級別選擇器現在位於編輯器工具欄中，而不是在塊選項側欄中選擇級別。

在 Gutenberg 8.2 中，在圖像塊的標題字段中按Enter鍵會創建一個新段落。 在 8.3 中，該功能已擴展到所有帶字幕的塊。

該團隊在最新版本中糾正了 20 多個錯誤修復。 總體而言，使用一天后，新插件更新似乎很穩定。 但是，一些實驗性添加，例如新的填充控制，可能值得關注。 主題作者需要開始對此進行測試，提供反饋，並確保開發朝著正確的方向發展。

新塊類別

Gutenberg 團隊已重命名並重新組織了區塊類別。 新列表似乎更有意義，並且可以更好地合併到適當的組中：

• 文本
• 媒體
• 設計
• 小部件
• 嵌入

雖然我是新類別名稱的粉絲，但我發現這些類別在這一點上對於任何實際目的都毫無用處。 自從 Gutenberg 在塊插入器中放棄選項卡式界面以來，它就感覺就像一堵巨大的塊牆。 當我滾動並滾動並滾動可用塊列表以找到我需要的特定塊時，我的眼睛自然會跳過類別名稱。 我幾乎總是使用鍵盤斜線命令來插入塊。 在我不這樣做的情況下，這不是理想的用戶體驗，而且新類別也沒有多大幫助。

選擇父塊

Gutenberg 中更令人沮喪的經歷之一是嘗試在嵌套塊場景中選擇父塊。 很多時候，用戶感覺他們在隨意點擊，希望他們能到達最佳位置，在那裡他們可以實際導航到他們需要編輯的塊。 這是在最好的時刻進行挫折的練習。

古騰堡團隊朝著減輕這種痛苦邁出了一步——一小步。 將鼠標懸停在編輯器工具欄中的“更改塊類型或樣式”按鈕上時，會出現一個新按鈕以選擇父塊。

我不確定這是否是處理問題的正確方法。 我想看看一些沒有懸停的箭頭按鈕的實驗。 目前，我對團隊正在嘗試解決該問題感到滿意，並希望未來的迭代改進嵌套塊內的導航。

啟用頂部工具欄模式後，此功能似乎不起作用。 對於使用此模式的用戶，選擇父塊的最佳方式是通過編輯器底部的麵包屑導航。

實驗間距/填充控制

主題作者現在可以通過add_theme_support( 'experimental-custom-spacing' )添加對實驗性填充控件的支持。 如果支持，最終用戶將在 Cover 塊的塊選項側邊欄下看到一個新的 Spacing 選項卡，將來應該可用於其他塊。 默認情況下，用戶可以使用單個值控制塊的所有四個邊的填充。 他們還可以“取消鏈接”填充並分別控制頂部、底部、左側和右側的值。

據推測，古騰堡團隊將擴展此間距功能以包括邊距控制。 這將是一個自然的舉動，我希望這會導致用戶在過去幾年中不得不忍受的 Spacer 塊的消亡。

但是，我不贊成允許最終用戶使用顯式值控制填充。 隨意更改填充值會破壞許多主題作者花時間精心計算的垂直節奏。 使用像素值（默認值）時，用戶肯定會遇到平板電腦和手機屏幕尺寸的問題。 從本質上講，它會造成完全混亂的間距。

我不反對這個想法。 我希望它在它登陸 WordPress 之前完成。 主題作者應該能夠註冊通過樣式表處理的命名類。 這可以追溯到 WordPress 具有設計框架的想法。 為間距創建一組實用程序類（哦，你好，Tailwind）。 讓主題作者根據他們的設計定義間距。 讓用戶從中選擇。 然後，為用戶想要自己處理問題的時間提供自定義選項。 那時，他們已經明確決定脫離主題作者選擇的設計流程。

鏈接顏色

在為塊編輯器設計樣式時，主題作者必鬚麵對的更難的障礙之一是弄清楚當用戶更改塊的背景顏色時如何處理鏈接顏色。 在這種情況下，用戶長期以來一直可以控製文本顏色。 但是，鏈接顏色可能很快變得無法訪問或簡直醜陋。 有遠見的主題作者會設置這些鏈接顏色的樣式，以便它們繼承文本顏色，但這並不總是理想的解決方案。

這就是用戶控制的鏈接顏色的用武之地。要添加對自定義鏈接顏色的支持，主題作者必須通過add_theme_support( 'experimental-link-color' )選擇加入該功能。 這將為段落、標題、組、列以及媒體和文本塊添加新的顏色選擇器。

無法使此功能與主題支持函數調用一起使用，我不得不深入研究代碼以找到問題。 為了讓主題作者添加對鏈接顏色的支持，他們還應該定義其默認鏈接，如以下 CSS 代碼片段所示：

 a { color: var( --wp--style--color--link, #000 ); }

WordPress 會自動設置--wp--style--color--link變量。 為了進一步明確，主題作者還可以針對.has-link-color a 。