Gutenberg 11.3 引入了尺寸面板,添加了按鈕填充支持,並加快了插入器的速度

已發表: 2021-08-19

今天早些時候,Gutenberg 11.3 登陸了 WordPress 插件目錄。 最新更新引入了一個新的尺寸面板,用於切換與間距相關的塊選項。 Button 塊現在支持填充控件,並且 Post Featured Image 塊具有新的寬度和高度設置。

該版本的亮點之一是提高了在插入器中打開和搜索的速度。 開啟時間從 370.35 毫秒下降到 137.28 毫秒,下降了 200 多毫秒。 搜索速度從 190.37 毫秒提高到 67.24 毫秒。

最新版本包括一個簡化的顏色選擇器庫。 豐富的鏈接預覽是 Gutenberg 10.9 中針對外部 URL 引入的一項功能,現在可用於內部站點鏈接。

主題作者應該享受重置和經典編輯器樣式表降低的特異性。 這樣的變化總是讓主題作者更容易匹配編輯器和前端樣式。

間距控制的尺寸面板

在 WordPress 編輯器中切換填充和邊距控件的“顯示選項”。
切換站點標語塊的填充和邊距控件。

Gutenberg 11.3 為支持邊距或填充控件的塊引入了新的尺寸面板。 該功能添加了一個省略號 ( ... ) 按鈕來代替典型的打開/關閉選項卡箭頭。 用戶可以選擇他們想要使用的控件。

長期目標是清理界面,隻公開用戶實際需要的控件。 由於此類需求是主觀的,因此允許用戶打開/關閉它們是一種理想的方式。

當前的缺點是雙重的。 一旦選擇顯示邊距或填充控件,面板本身就不能折疊。 這加劇了新功能試圖解決的問題——整理側邊欄界面。 至少對我來說,我總是希望快速訪問間距控件。 但是,我並不總是需要顯示它們。

第二個問題是似乎沒有存儲用戶對顯示內容的選擇。 每次使用塊時,都必須選擇應顯示的控件。

新的“尺寸”面板只是調整大小(寬度和高度)、間距(填充和邊距)以及塊相關控件的過程的一部分。 尋求更全面的解決方案的工作仍在進行中。 據推測,開發團隊將在未來的版本中解決這些問題和其他問題。 但是,那些在生產環境中運行 Gutenberg 插件的人應該預料到使用時會出現奇怪的情況。

Block Visibility 插件目前擁有此類切換控件的最用戶友好版本。 它還不是一個完美的解決方案,但它比目前在古騰堡的工作要好一些。

按鈕塊填充

在 WordPress 編輯器中自定義 Button 塊的填充。
使用 TT1 塊測試新的按鈕塊填充選項。

在使用 TT1 Blocks 主題(基於塊的二十一二十一)時,我不喜歡 Button 塊的默認填充,這已不是什麼秘密。 我已將定期指出它作為我的任務之一,甚至拒絕在最後一次測試調用中使用該塊作為 FSE 外展計劃的一部分。

超大按鈕並不總是網頁上的錯誤風格選擇。 上下文很重要,我不知何故繼續遇到我需要一些更縮減的情況。 幾個月來,對按鈕塊填充的控制一直在我的願望清單上,而古騰堡開發團隊已經交付了。

從 11.3 開始,用戶可以控制單個 Button 塊的填充。 它現在將作為一個選項出現在前面提到的新維度面板中。

禱告回答了。 現在,讓我們繼續向所有塊添加填充控件。

一些用戶可能遇到的一個潛在問題是在一起使用多個 Button 塊時保持一致的間距。 最簡單的方法是先添加並設置樣式,然後復制它以創建具有相同間距的其他內容。 這不是一個新問題。 它適用於用戶希望在組內保持一致性的所有 Button 選項。

特色圖像尺寸控制

WordPress 編輯器中的帖子特色圖像塊,其高度、寬度和比例選項顯示在側邊欄中。
調整帖子特色圖像塊的尺寸。

Post Featured Image 塊終於得到了一個小而方便的升級。 過去,用戶和主題作者只有一個選項來決定是否將其鏈接到帖子。 現在,他們可以控製圖像的寬度和高度。

如果用戶為圖像設置高度,編輯器將顯示一個單獨的“縮放”選項,其中包含以下選項:

  • 封面(默認)
  • 包含
  • 拉緊

這些選項實際上有什麼作用? 那將是一個很好的問題。 即使作為近二十年來從事網頁設計和開發循環的人,我有時也會忘記並且必須查找它們。 它們是object-fit CSS 屬性的值,在許多情況下可能會使用戶感到困惑。

覆蓋和包含允許圖像適合包含元素的框,同時保持其縱橫比(不拉伸圖像)。 不同之處在於,如果不適合,封面值將被剪裁,並且包含值可能會被加黑。 無論縱橫比如何,拉伸值都將填充其容器。

根據圖像在其容器上的縱橫比,每個值基本上可以在屏幕上顯示相同的內容。 或者,它們可以提供截然不同的結果。 將這些尺寸控件與寬對齊和全對齊(也是與寬度相關的選項)結合起來也可以進行一些不可預測的實驗。

我的主題設計師想要完全禁用 UI 並呈現一些更可控的東西:圖像大小選擇器。

這樣的選擇器不應與寬度和高度控件混淆。 WordPress 主題作者多年來一直在註冊自定義圖像大小。 主要用例是特色圖片。 用戶可以將這些尺寸與當前的圖像和最新帖子塊一起使用。 但是,他們還沒有發布特色圖片的這個選項。

我屬於認為圖像尺寸控制應該是第一個添加到塊中的陣營。 它是 WordPress 主題設計中不可或缺的一部分,不容忽視,我一直在努力——或者至少是嘮叨——以確保主題作者可以通過自定義尺寸控制特色圖像。

幸運的是,有一張自定義圖像尺寸支持的開放票。 在其他仍然缺失的功能中,它是許多希望向塊主題飛躍的主題作者的障礙。

新選項有很多用例,例如自動將帖子網格的特色圖像裁剪為正方形。 我只是迫不及待地等待為 Post Featured Image 塊提供更強大的工具集。