Gutenberg 12.1 修復塊 Appender 布局偏移,添加模板列表視圖,並增強全局樣式

今天早些時候,Gutenberg 12.1 登陸了 WordPress 插件目錄。 這 最新發布 非常注重用戶體驗的改進,包括修復塊追加器布局轉換、新的全局樣式功能和改進的模板列表視圖。 主題作者還有一個新標誌,用於啟用所有與外觀相關的工具。

WordPress 5.9 原定於今天發布,但它已經 推至 2022 年 1 月 25 日. 貢獻者需要更多時間來完善與發布捆綁在一起的站點編輯器和相關工具。 到目前為止,他們通過修復錯誤和創造整體更好的用戶體驗來利用額外的時間。

沒有更多的布局轉變

如果這是古騰堡 12.1 中唯一的變化,我會是世界上最快樂的用戶。 幸運的是,還有其他不錯的項目,但我三年來使用塊編輯器最大的煩惱現在已經解決了。

內容畫布中的塊追加器(那些小 + 按鈕)現在是 使用固定定位顯示. 這意味著當您選擇塊時,尤其是那些嵌套在其他塊中的塊時,屏幕不再四處彈跳、改變布局或在原本完美的部分留下空白。

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles Gutenberg 12.1 修復了塊 Appender 布局偏移,添加模板列表視圖,並增強全局樣式Appender 按鈕不會改變布局。

我從與其他人的交談中了解到,這在過去構建複雜布局時一直是一個痛點。 對於某些人來說,他們根本不會使用塊編輯器,因為它太煩人了。 如果你落入這個陣營,值得再試一次。 這是用戶體驗的顯著改進。

全局樣式改進

用戶現在可以 定義自定義漸變 通過全局樣式側邊欄中的調色板部分。 這些將在整個站點中提供,並且與主題無關。

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles-1 Gutenberg 12.1 修復了塊 Appender 布局偏移、添加模板列表視圖和增強全局樣式創建自定義漸變。

調色板也 顯示雙色調 同一梯度段下。 但是,還沒有用於創建自定義雙色調過濾器的選項。 這是一個只讀部分。

全局樣式面板也 拆分排版選項 在 text 和 link 元素之間,為未來其他 HTML 元素打開了大門。

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles-2 Gutenberg 12.1 修復了塊 Appender 布局偏移、添加模板列表視圖和增強全局樣式鏈接排版部分。

用戶可能不應該為鏈接更改此設置。 相反,它們通常應該與周圍的文本相匹配。 如果我們將來得到 text-decoration 或類似的選項,分離可能更有意義。 但是,更改字體大小或行高等設置可能會不利於設計。

模板和模板部件視圖

Gutenberg 12.1 從站點編輯器中引入了新的模板和模板部件列表視圖。 在過去的幾個插件版本中,此功能的 UI 發生了變化。 該列表可通過編輯器中的左側滑出式面板獲得數月之久。 然後,它在 11.9 中被完全刪除。 它再次出現在那個版本和 12.0 之間。

該面板現在已縮減為包含站點、模板和模板部件的三個鏈接。 第一個鏈接調出站點編輯器。 其他顯示現有模板的表格。

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles-3 Gutenberg 12.1 修復了塊 Appender 布局偏移、添加模板列表視圖和增強全局樣式模板列表視圖。

目前在屏幕之間切換感覺很慢。 但是,這是世界各地的 WordPress 用戶將看到的站點編輯器的 1.0 版本。 它可能會隨著時間的推移而改變。 「設計的當前迭代有利於簡單性和可用性,」Riad Benguella 在公告帖子中寫道。 「將來可能會添加實現客戶端導航和馬賽克視圖的迭代。」

似乎沒有辦法添加自定義模板,例如類別或作者存檔。 使用二十二主題時,單擊「添加新」按鈕會顯示首頁和搜索模板的選項。

但是,添加新模板部件是一個更加精細的過程。 單擊按鈕創建一個後,用戶將看到一個覆蓋層和表單,如下面的屏幕截圖所示:

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles-4 Gutenberg 12.1 修復了塊 Appender 布局偏移、添加模板列表視圖和增強全局樣式創建自定義模板部件。

用戶可以給它一個自定義名稱並在三個允許的區域之間進行選擇:常規、頁眉和頁腳。 創建新零件後,用戶將進入編輯器。

再次查看模板部件列表時,它會顯示創建它的用戶並有一個選項下拉列表(省略號按鈕)。 目前,唯一的操作是刪除部件。

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles-5 Gutenberg 12.1 修復了塊 Appender 布局偏移、添加模板列表視圖和增強全局樣式模板部件列表視圖。

我希望看到頂級模板在創建新模板時得到與模板部件相同的處理。 儘管它們之間存在一些細微差別,但歸根結底,它們都是模板。 如果創建過程匹配,用戶體驗將受益。

在此屏幕的默認列表之外創建自定義模板還有助於設計人員從站點編輯器中直觀地構建主題。

空導航回退

最新版本引入了空導航菜單塊的回退。 最終,如果沒有找到菜單,它將 顯示頁面列表塊. 根據用戶站點的頁面數量,這可能會很快失控,如以下 22 的屏幕截圖所示:

Gutenberg-12-1-fixes-block-appender-layout-shift-adds-template-list-views-and-enhances-global-styles-6 Gutenberg 12.1 修復了塊 Appender 布局偏移、添加模板列表視圖和增強全局樣式帶有長頁面列表的導航塊回退。

主題開發者可以 覆蓋此後備 通過 block_core_navigation_render_fallback 過濾器鉤子,通過為導航父級返回一個假值或一組有效的子塊。 主題作者,我邀請他們慷慨地使用這個過濾器鉤子。

值得注意的塊主題項目

對於塊主題開發者,標準 模板相關文件夾已重命名. 舊名稱將繼續有效,但作者應更新其主題中的以下內容:

  • /block-templates 重命名為 /templates
  • /block-template-parts 重命名為 /parts

此更改會清理頂級主題目錄,但也會創建一個 走向更加標準化的道路 在將來。 已經有一個 /patterns 的開放票證,並且 /styles 文件夾是可能的。

古騰堡 12.1 也 引入了外觀工具標誌 對於 theme.json,允許主題作者啟用對所有當前和未來邊框、顏色、間距和排版選項的支持。 我在 古騰堡 12.0 帖子,它錯誤地將該功能標記為與上一個版本捆綁在一起。

像這樣:

喜歡載入…

來源

相關文章