WordPress 5.8 的新功能

已發表: 2021-06-24

在觀看了 WordCamp Europe 2021 上的演示,特別是 Matt Mullenweg 和 Matias Ventura 之間的談話(其中包括塊編輯器中的新功能視頻)之後,我渴望嘗試這個新版本的 WordPress 7月中旬即將發布的5.8。

所以我安裝了 WordPress 5.8-beta2 版本,以便能夠告訴你即將到來的新功能。 請記住,我已經使用 WordPress.org 的二十一二十一主題對該版本進行了測試,根據您在站點上安裝的主題,提到的某些功能可能不可用。

嵌套塊和塊模式

隨著 WordPress 5.5 的到來,塊編輯器包含了塊模式的概念。 塊模式的想法非常簡單:它們是由一組塊組成的預定義部分或片段,您可以在創建頁面和帖子時使用它們。 塊模式可以是簡單的顯示兩個按鈕的部分或具有醒目和復雜佈局的定價部分,甚至是整個頁面的佈局。

正在做很多工作以使編輯塊和塊模式更容易和更舒適。 並且,特別是使插入和移動它們更快。 首先,現在我們可以從左側菜單欄中顯示的塊和模式列表中選擇它們並將它們拖到頁面區域以插入它們。

在 Gutenberg 中選擇和插入模式的屏幕截圖
從塊和模式列表中,您可以選擇並拖動要直接在頁面上插入的塊或模式。

最近,還添加了拖動圖標(6 點圖標),以便我們可以在容器中移動它所在的任何塊。

在古騰堡編輯器中拖動塊的選項
通過單擊拖動圖標,您可以移動列類型塊內的封面塊。

當您在一個塊中時,按Esc 鍵切換到選擇模式,然後按Enter 鍵返回編輯模式。

古騰堡編輯器中的選擇模式
在 Gutenberg 編輯器中,您可以使用 Enter 和 Esc 鍵從選擇模式切換到編輯模式。

在選擇模式下(記得按Esc 鍵),優化了塊結構之間的導航。 通過在一個塊內移動鼠標,我們可以看到它包含的每個塊的邊界。 這樣,更容易理解父塊內的結構和拖動塊。

在塊編輯器中選擇嵌套塊的屏幕截圖
在選擇模式下,當在封面塊中移動鼠標時,我們可以看到它所包含的每個塊的邊界。

而現在,有了這個新版本,當您切換到編輯模式(按Enter 鍵)時,移動塊時也會顯示其容器的邊界,因此選擇、拖放和拖放的過程更加容易和直觀。

在 WordPress 5.8 編輯器中拖動塊的選項
在 WordPress 5.8 編輯器中拖動塊選項的屏幕截圖。

圖片版

繼續改進塊編輯的想法,關鍵塊是圖像類型塊。 我們已經看到,我們現在可以通過將圖像拖入圖像、文本和媒體類型塊或任何容器類型塊(例如列)來插入圖像。

但最大的新奇之處在於,我們可以在編輯器本身中編輯和修改插入的圖像,而無需進入媒體庫

塊編輯器中的圖像編輯選項
在塊編輯器中編輯圖像的選項。

除了居中添加圖像鏈接的圖標外,在 WordPress 5.8 中,我們還有三個新圖標:裁剪添加文本雙色調過濾器

裁剪圖像

通過單擊裁剪圖標,會出現三個額外的菜單選項:縮放更改縱橫比旋轉圖像

在塊編輯器中編輯圖像的屏幕截圖
選擇裁剪選項後,進行所需的縮放、縱橫比和旋轉修改,然後應用更改。

如您所見,您不再需要訪問媒體庫來讓您的圖像看起來像您需要的樣子。

雙色調濾鏡

WordPress 5.8 附帶的另一個新功能是能夠以雙色調過濾任何圖像。 選擇要應用於圖像的濾鏡的兩種顏色,就是這樣,圖像只有兩種色調。

WordPress 中圖像雙色調選項的屏幕截圖
使用圖像雙色調選項以兩種色調顯示圖像。

添加文字

這個新的圖標,一個給圖片添加文字的圖標,相當於把圖片變成了一個封麵類型的塊。 當然,在此更改之後,您可以像過去一樣將您想要的文本添加到封面塊中。

在 Gutenberg 中編輯背景塊的屏幕截圖
在古騰堡編輯封面塊的屏幕截圖。

此外,正如您在塊屬性中看到的那樣,您現在還可以修改間距並為文本添加填充,以便文本準確地位於您希望它在圖像中的位置。 可以為文本的 4 個邊中的每一邊定義相同或不同的填充。

就個人而言,我發現您可以直接在編輯器中添加和執行所有這些轉換,而無需進入媒體庫,這非常棒。 不過,如果你想為 SEO 優化你的圖片,恐怕你還是得去圖書館。

塊轉換

正如我們已經看到如何將塊從圖像類型轉換為封麵類型,塊編輯器現在包含其他類型的轉換。 例如,您可以選擇三個段落並將它們轉換為標題、列、列表等。並且在執行轉換之前,可以預覽轉換的新外觀。

同樣,您可以將一組圖像類型塊更改為圖像庫類型塊,甚至是一組按鈕等。

蓋塊

有了編輯器本身包含的所有這些新功能,封面塊允許我們創建與迄今為止的設計截然不同的設計。 例如,現在我們可以有兩個嵌套的封面塊(在子節點和父節點之間有一個填充),每個都有自己的顏色、文本和焦點。

顯示嵌套在古騰堡中的兩個背景塊的圖像
顯示兩個嵌套覆蓋塊的圖像。

導航塊

WordCamp 上展示的視頻中塊編輯器預覽的另一個重要新功能是新的導航塊。 我們看到此塊未包含在已安裝的 beta 版本中,但您會在 Gutenberg 插件的最新版本 10.8.1 中找到它。

古騰堡的導航塊
古騰堡的導航塊。

此塊允許您在任何頁面上添加鏈接菜單,以便訪問者可以轉到任何其他頁面。 它並不是要替代我們已經從 WordPress 中知道的導航菜單,而是當您想在頁面上插入附加菜單時的替代方案。

除了指示您希望菜單是水平的還是垂直的,在創建菜單時您還有幾個選項:

在 Gutenberg 中創建導航菜單
在塊編輯器中創建導航菜單的選項。
  • 從現有菜單創建:您可以選擇顯示已在站點上創建的菜單。
  • 將其創建為空:這將創建一個空白菜單,供您手動添加要在導航中顯示的每個鏈接。
  • 從所有頂級頁面創建它 - 這將自動將您網站上的每個現有頁面添加為鏈接,然後您可以對其進行編輯和重新排列。 此處僅添加頂級頁面。

要嚮導航添加新鏈接,您必須單擊+圖標,您可以在以下選項中進行選擇:

在導航菜單中添加項目
  • 頁面鏈接:您網站上的一個頁面。
  • 帖子鏈接:您網站上的帖子。
  • 類別鏈接:具有特定類別的所有帖子。
  • 標籤鏈接:所有帶有特定標籤的帖子。
  • 自定義鏈接:外部 URL。
  • 社交圖標:社交網絡的圖標。
  • 搜索:供訪問者搜索您的內容的搜索框。

創建任何菜單後,您還可以選擇更改其樣式(字體、字體和背景顏色)、添加子菜單、移動項目等。

導航菜單屬性
導航菜單屬性。

因此,使用此塊,您可以非常輕鬆地創建菜單設計。

使用導航塊創建的菜單
使用導航塊創建的菜單。

如您所見,這種新型區塊將為我們的頁面和帖子的設計提供更多可能性。

模板設計

這個新版本的 WordPress 編輯器給我們帶來的另一個重大變化是模板設計完全集成到塊編輯器中。 這樣,您可以從創建的頁面創建模板,並且還添加了在左側邊欄中可以列出其結構的選項。

在 WordPress 中設計模板
在 WordPress 中設計模板。 在左邊我們可以看到模板的結構。

我們可以瀏覽模板的結構,每個元素都在編輯器中突出顯示,因此很容易在適當的地方進行更改,並且您可以快速查看嵌套在每個容器塊中的所有元素。

還有更多……

最後,在 WordCamp Europe 上展示的視頻中,我們還看到了直接在塊編輯器中定義主題的全局樣式以更改調色板、排版等的選項。如果您仍然有任何疑問,使用這個新的WordPress 5.8 版本我們越來越接近不需要任何其他頁面構建器來創建您的網站頁面的目標。

XPS 在 Unsplash 上的精選圖片