WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具

WordPress 6.6 更新計畫於2024年7月16日發布。然而,大量的補充使核心在 WordPress 開發第三階段的道路上更進一步。WordPress 6.6 中總共包含 299 個核心軌道票證,以及 392 個增強功能、462 個錯誤修復以及針對區塊編輯器的 46 個可訪問性改進。

在 WordPress 6.6 帶來的眾多新功能中,區塊模式覆蓋是我們最喜歡的功能。最初計劃與 WordPress 6.5 一起發布,後來推遲到 6.6,模式覆蓋是區塊綁定 API 的第二次實現,讓我們更好地了解未來 WordPress 版本的功能。

然而,模式覆蓋只是即將發布的 WordPress 版本的眾多重要補充之一。那麼,讓我們開始探索 WordPress 6.6 中最令人興奮的新功能和增強功能。有助提升你的 WordPress 網頁設計技能。

同步模式覆蓋

區塊綁定 API的第一個實作是用於連接區塊屬性和自訂欄位。在 WordPress 6.6 中,第二次迭代解鎖了名為 Synced Pattern Overrides 的同步模式增強功能。

有兩種類型的區塊模式:

  • 同步區塊模式
  • 標準(未同步)區塊模式

兩種類型之間的區別在於,對同步模式所做的所有更改都會應用於整個網站上模式的每次出現。相反,標準區塊模式的變更僅影響特定模式實例。

同步模式覆蓋介於兩個極端之間。借助區塊綁定 API,您現在可以建立區塊模式,使網站上的所有位置保持相同的結構,並與網站編輯器中對模式結構和樣式進行的自訂同步變更。但是,您可以變更單一實例上的模式內容,而不會影響網站上相同模式的其他實例。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

編輯連接區塊中的自訂欄位值

WordPress 6.5 引入了自訂欄位作為core/post-meta區塊屬性的資料來源 ( ),讓使用者可以將自訂欄位值連接到區塊。WordPress 6.6 對此功能帶來了新的增強功能,例如能夠直接從連接的區塊編輯自訂欄位值。

您可以透過從外掛程式或主題的函數檔案註冊一組新的自訂欄位來親自嘗試,並確保在註冊貼文元時設定 show_in_rest為。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

資料視圖增強功能

資料視圖是在 WordPress 6.5 中引入的,是一個改進的 UI,用於模板、模式、貼文、媒體等的集合。新介面在開發路線圖的第三階段(協作)中發揮著重要作用,因此,我們可能會期望未來的 WordPress 版本有更多增強功能,「包括工作流程改進,用於分配人員審查貼文或建立自訂視圖以簡化流程。從 WordPress 6.6 開始,新介面僅存在於網站編輯器中,但在未來的版本中應該會擴展到更多管理部分。

WordPress 6.6 引進了管理頁面的新版面。模板部件管理已被刪除並整合到“模式”部分中,而網站編輯器的“模式”選單已重新排列為兩個部分,模板部件在頂部,模式在下面。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

對於頁面,新面板提供頁面列表,並允許透過點擊預覽任何頁面。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

除了這些更廣泛的變化之外,資料視圖還受到其他細微增強的影響,這些增強改進了介面並使其更具功能性和資訊性,例如新的批量編輯功能以及首頁或帖子頁面上的徽章。

WordPress 6.6 將資料視圖向前推進了一步,但我們仍處於早期階段。將來,我們將看到可擴展性 API 的引入,以允許開發人員直接對視圖進行操作。

對塊編輯器的其他改進

WordPress 6.6 將 8 個 Gutenberg 版本引入核心——從 17.8 到 18.5——對介面、React 庫、Block API 等進行了許多改進。這裡僅僅是少數:

新的發布流程

在 6.6 中,貼文/頁面設定側邊欄已被清理,變得更輕、更一致。透過這次迭代,貼文和網站編輯器之間的統一過程向前邁進了一步,兩個編輯器現在具有相同的發布流程。

發布體驗已經標準化,新的狀態和可見性面板可讓您將貼文/頁面狀態設定在更方便的位置。

其他變更會影響特色圖像和摘錄控件,這些控件已移至側邊欄頂部以及右上角的改進操作選單。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

查看所有區塊

在 WordPress 的早期版本中,當您選擇一個區塊時,區塊插入器僅顯示允許您新增至所選區塊的區塊。例如,選擇“列”後,您只能在區塊插入器中看到“列”區塊,因為您只能新增“列”。

從 WordPress 6.6 開始,區塊插入器顯示兩組區塊:您可以新增到所選區塊中的區塊以及您可以新增到所選區塊下方的區塊。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

分組區塊的鍵盤快速鍵

現在,您可以在 MacOS 或Windows 上將選定的區塊分組。[⌘ + G] [Ctrl + G]

經典主題中的塊圖案

從 WordPress 6.6 開始,經典主題支援與區塊主題相同的模式介面。因此,如果您在 WordPress 網站上使用經典主題,您將享受與區塊主題相同的豐富模式管理體驗。

現在您可以像使用區塊主題一樣編輯、複製、重新命名、匯出為 JSON 以及刪除模式。

您可以透過單獨選擇模式或按一下批次編輯按鈕來執行批次操作。還提供排序和過濾功能。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

您也可以像在區塊主題中建立模式一樣建立模式。點擊右上角的「新增模式」按鈕,系統將提示您填寫包含模式詳細資料的表單。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

然後,您可以像往常一樣在網站編輯器中建立或編輯您的模式。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

新工具和功能

WordPress 6.6 為設計師和主題開發人員帶來了許多強大的功能和增強功能,我們很高興在這裡分享我們最喜歡的功能和增強功能。由於部分樣式、網站範圍的背景圖像、全新的陰影編輯器和網格佈局變化,設計師在設計頁面樣式時擁有更多權力。更多工具為主題作者提供了更大的靈活性。讓我們深入了解一下。

主題.json v.3

WordPress 6.6 引進了新的 theme.json 版本 – 版本 3。新版本改變了覆蓋預定義屬性的方式。現在,要變更字體大小或間距大小的預設值,需要在 settings.typography 或 settings.spacing 下將 defaultFontSizes 或 defaultSpacingSizes 設為 false

WordPress 6.6 中的 CSS 特殊性

在 WordPress 6.6 中,CSS 特異性發生了變化,現在可以更輕鬆地覆蓋核心樣式,同時保持對全域樣式的支援。

在 6.6 之前,覆蓋核心樣式通常很困難,主題開發者必須編寫複雜的 CSS 規則才能實現所需效果。在6.6 中,核心塊樣式和全局樣式(theme.json)已通過(…) 包裹現有選擇器,以將核心樣式的特異性降低到0-1-0,使其統一,以支持新的部分樣式。

部份樣式

WordPress 6.6 可讓您對貼文/頁面的各個部分進行樣式設置,而無需將相同的樣式一一重新套用到多個區塊。這表示您可以選擇多個區塊和子區塊,並將樣式變體指派給整個選擇。

這是可能的,因為區塊樣式變體的擴展現在支援內部區塊和元素的樣式,並利用全局樣式減少的樣式特異性。

只有當您使用下列方法之一註冊區塊樣式變體時,才可以透過全域樣式定義和操作區塊樣式變體:

  • 在主題的/styles目錄中使用theme.json部分
  • 使用register_block_style功能
  • 在theme.jsonstyles.blocks.variations中定義區塊樣式變體

使用 theme.json 部分定義區塊樣式變體

與主題樣式變體一樣,塊樣式變體可以在主題的/styles目錄下擁有自己的theme.json部分。

兩種類型變體之間的區別在於,區塊樣式變體有一個新的頂級blockTypes屬性,它是支援區塊樣式變體的區塊類型的非空數組。此外,slug還添加了一個新屬性“以提供可能定義區塊樣式變化的不同來源之間的一致性,並將 slug 與可翻譯 title 屬性分開。

顏色和排版預設

現在,您可以透過選擇可用的預設之一,從全域樣式介面變更主題的調色板和字體系列。

如果您目前的主題支援顏色和版式預設,它們將顯示在全域樣式中的顏色和版式設定下。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

要將此功能新增至您的主題中,您需要建立僅包含顏色和版式的樣式變體。由此定義的樣式將被提取並用於產生預設。

關於此功能,另請參閱核心編輯器改進:升級您的設計並創建單獨的版式和顏色變化…

全站背景圖片

從 WordPress 6.6 開始,您可以在 theme.json 和網站編輯器中定義網站範圍的背景圖片。

網站範圍的圖像是 background-image 在網站層級的 body 元素上設定的屬性值,並顯示在每個網站頁面上。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

這是背景圖像的第一次迭代。要更仔細地了解它的工作原理、局限性以及接下來的內容,請查看開發說明WordPress 6.6 中的網站範圍背景圖像。

網格佈局變化

群組區塊的新佈局變體可讓您將群組內的元素顯示為網格。

您可以透過將群組區塊新增至編輯器的畫布並在區塊設定面板中選擇網格佈局來嘗試它。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

網格佈局有兩種類型:

  • 自動產生網格行和列
  • 手動允許您設定要新增到網格的列數

將內容新增至網格元素並使用手柄調整它們的大小。您也可以根據所選網格的類型調整最小列或列數。

負邊距

現在您可以為所有支援邊距控制的區塊設定負邊距。在 WordPress 6.6 之前,此功能僅在 theme.json 中可用,而現在可以輕鬆地將負邊距應用於元素以創建重疊效果。

請注意,從 WordPress 6.6 開始,您應該手動新增負值,如下圖所示。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

自訂陰影

使用 WordPress 6.6,您可以在全域樣式介面中建立和編輯自訂陰影。若要建立自訂陰影,請導覽至網站編輯器並從全域樣式選單中選擇陰影。在這裡,您將找到一個自訂面板。當您單擊該+按鈕時,一個新元素使您可以存取一組控制項來自訂您的陰影或重新命名/刪除它。

WordPress 6.6 更新:模式覆蓋、區塊綁定 API、資料視圖、新設計工具 | WordPress網頁設計

自訂寬高比預設

現在,主題開發人員可以透過theme.json設置settings.dimensions.aspectRatios選項來定義自訂寬高比預設。

針對開發人員的其他更改

選項 API:停用大型選項的自動載入

在 WordPress 6.6 之前,大量選項會在每次頁面載入時自動載入。為了防止這種預設行為,開發者需要將 add_option()update_option() 函數的第三個參數傳遞為 “yes”/true 或 “no”/false。然而,由於該參數是可選的,預設值為 “yes”,因此每個頁面載入時會載入大量不必要的數據,影響網站效能。

為了防止這種行為,WordPress 6.6 對選項 API 進行了一些更改:

為了讓 WordPress 決定是否在目前頁面載入選項,add_option()update_option()$autoload 參數預設值從 “yes” 變更為 null。該參數現在接受以下值之一:

  • true:在每個頁面上載入該選項以避免額外的資料庫查詢。
  • false:從不自動載入選項以避免在每個頁面上載入資料。
  • null:可能是自動加載,這意味著自動加載值應該動態確定。預設情況下,選項會自動加載,除非它們包含較大的值。

資料庫值會相應地更改,現在每個選項的自動載入值將是以下之一:

  • on:必須在每個頁面上自動載入。以明確的 true 值添加。
  • off:不應自動加載,只在單一管理頁面使用。以明確的 false 值添加。
  • auto:依賴 WordPress 的預設自動載入行為。在 WP 6.6 中,它應該會自動加載,但未來行為可能會改變。
  • auto-on:應自動加載。動態設定為 true。
  • auto-off:不應自動加載。動態設定為 false。

除了這些變化之外,WordPress 6.6 還引入了一些功能和過濾器:

  • wp_autoload_values_to_autoload():該函數傳回應自動載入的所有資料庫值。
  • wp_autoload_values_to_autoload:此過濾器允許編輯應自動載入的選項清單。
  • wp_default_autoload_value:過濾器設定未設定顯式值的選項的值。
  • wp_max_autoloaded_option_size:過濾器修改閾值,超過該閾值預設選項將不會自動載入。預設值為 150000。

此更改對於具有許多外掛程式的複雜網站特別有用,值得外掛程式開發人員關注。

React 函式庫的改進

React 函式庫有兩個主要變化。首先,WordPress 6.6 包含 React 18.3,它添加了棄用警告和其他更改,以幫助開發人員在 React 19 穩定後為它做好準備。其次,開發人員現在可以使用新的 React JSX 轉換,該轉換首次在React 17中引入。若要更詳細地了解這些更改,請參閱WordPress 6.6開發說明中的 React 19 升級和JSX準備。

區塊 API 的改進

WordPress 6.6 也對 Block API 進行了多項技術更改,包括以下內容:

  • 統一的可擴充性API
  • 活動塊變化檢測的改進
  • WordPress 6.6 中的社交連結阻止更改

總結

在這篇長文中,我們探討了WordPress 6.6 帶來的許多令人興奮的功能和變化,從區塊模式覆蓋到資料視圖的增強、主題開發人員的新功能,以及網站和貼文編輯器中編輯體驗的統一。但還有更多內容我們沒有在本文中介紹,例如自動更新的回滾。如果您想更深入地了解,您不應錯過 WordPress 核心貢獻者提供的一系列優秀資源,我們在 WordPress 6.6 測試期間提到了這些資源。

現在,就看你了。您測試過 WordPress 6.6 的功能了嗎?

文章來源 https://kinsta.com/blog/wordpress-6-6/

我想要找..

內容目錄

文章標籤

推薦服務

最新文章

結合創意、策劃、設計與科技

一站式設計及網上推廣

搵我哋傾下