Gutenberg 10.7整合模式目錄並引入新區塊設計控制元件

古騰堡10.7於5月底已經發布。在幾個小時內,開發團隊還發布了該外掛的 10.7.1 版,並修復了一些錯誤。最新的更新主要關注預計將於今年7月登陸WordPress 5.8的工作。

當前WordPress開發週期的功能凍結截止日期已於上週二過去。這應該意味著除了Gutenberg 10.7之外的任何新功能都不會成為核心平臺。WordPress 5.8 Beta 1定於6月8日釋出。

這個版本感覺團隊已經改進了介面和體驗。使用者還可以期待一些增強功能,例如額外的區塊設計選項。

區塊模式目錄整合

Gutenberg 現在通過WordPress.org上的模式目錄提供其預設區塊模式。這將他們的開發移到外掛和核心WordPress之外,這意味著設計人員可以在不需要使用者更新的情況下對其進行迭代。他們將始終擁有編輯器提供的最新版本。

pattern-inserter 將模式插入到內容畫布中

模式目錄將是終端使用者一個方便的工具。對於許多人來說,它可能會成為在WordPress編輯器中構建更復雜佈局的途徑。目前,它只包含10個模式。這將在向社羣提交開放後發生變化。

Shaun Andrews 分享了一些正在進行的目錄設計工作,很漂亮。十分期待看到它啟動時的最終結果。

pattern-directory-recent 最近在區塊模式目錄上的工作

關於區塊模式的旁註:目前有一個錯誤可能會導致一些與主題捆綁在一起的那些沒有出現在插入器中。

新區塊設計控制元件

10.7版本引入了幾個新區塊設計控制元件。對於許多人來說,最令人興奮的功能將是邊距控制,以便更精確地控制間距。主題作者必須在他們的theme.json檔案中設定settings.spacing.customMargin金鑰為true 以啟用此功能。

目前,只有站點標題站點標語區塊支援邊距控制。然而,既然最初的功能已經登陸,我們應該期待其他人在未來的版本中效仿。

site-title-tagline 標題和標語的間距和排版控制

站點標題塊還提供字母大小寫排版控制元件

開發團隊使用幾個新選項升級了 Column 塊。使用者現在可以自定義各個列的填充和顏色

columns-colors-padding 自定義單個列

其中一項較為低調的增強功能恰好是我最喜歡的更改之一。媒體和文字區塊在側邊欄中將有一個新的“媒體寬度”區塊選項。這使得獲得正確的寬度比在內容畫布中使用拖動手柄更好的體驗。

media-text 調整媒體和文字區塊中的媒體寬度

相信越來越多的人可能會開始更多地使用這個塊。對於超出預設寬度設定的任何用例,我一直迴避它。

另一個受歡迎的增強是Cover被新增為Group區塊的轉換選項。只有當區塊有背景時才會出現。

模板編輯器歡迎指南

template-editor-welcome 模板編輯器的歡迎資訊

模板編輯模式將是WordPress 5.8最突出的功能之一。它允許使用者從內容切換到模板編輯,而無需離開文章螢幕。因此,使用者需要一個歡迎指南來解釋新功能。

目前,訊息內容如下:

歡迎使用模板編輯器

模板表達了網站的佈局。使用區塊和模式工具自定義文章和頁面的所有方面。

這是一個堅實的起點,但並不能完全解釋這種模式的含義。希望開發團隊能夠稍微調整一下,可能會新增一兩張額外的幻燈片,或者甚至連結到WordPress.org上的專用文件頁面。使用此新功能幫助使用者正確出發應該可以減輕混亂並減輕支援負擔。

按鈕區塊用途 column-gap

buttons-gap 按鈕之間的間隙

這更像是一個主題開發人員說明,但一些使用者可能已經注意到按鈕行沒有延伸到容器的邊緣。至少在某些情況下。

本質上,各個Button區塊之間的空間使用了一些老式的 CSS 邊距解決方案來建立每個區塊之間的排水溝空間。在flex和grid佈局的現代世界中,這是大多數設計師害怕看到的東西。它使事情變得過於複雜,並使 CSS 變得更加臃腫,尤其是當您想根據螢幕大小進行調整時。

我強調這一變化是因為這是區塊系統在引擎蓋下變得更加完善的階段之一。而且,對於主題作者來說,這可能是更令人興奮的事情的開始。

“這太棒了,這太美了,他們會喜歡的,”Joen Asmussen在工單中寫道。“一旦塵埃落定,我們應該看看這個差距是否會成為全球風格的財產;由於它非常容易改變且具有彈性,因此以如此簡潔的方式處理會很好。”

column-gap在外掛中看到土地的使用是一個受歡迎的景象。當然,row-gap在按鈕超出單行的情況下,它可以用於垂直間距而不是邊距。

現在,我們可以對 Columns、Gallery 和 Query Loop 塊做同樣的事情嗎?從長遠來看,針對彈性專案之間的間距/間隙規範化系統可以節省數十行程式碼。

評論留言