WordPress 6.6的新功能:樣板覆蓋、區塊繫結 API、資料檢視、新設計工具等!

WordPress 6.6 的新功能

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 中最令人興奮的新功能和增強功能的旅程吧。

同步樣板覆蓋

區塊繫結 API 的首次實施是為了連線區塊屬性和自定義欄位。隨著 WordPress 6.6 的釋出,第二次迭代解鎖了名為同步樣板覆蓋(Synced Pattern Overrides)的同步樣板增強功能。

區塊樣板有兩種型別:

  • 同步區塊樣板
  • 標準(非同步)區塊樣板

這兩種型別的區別在於,對同步樣板所做的所有更改都適用於整個網站上出現的每一個樣板。相比之下,對標準區塊樣板的更改只會影響特定樣板例項。

同步樣板覆蓋介於這兩個極端之間。有了區塊繫結 API,您現在可以建立在網站各處保持相同結構的區塊樣板,並與網站編輯器中對樣板結構和樣式的自定義同步更改。不過,您可以更改單個例項上的樣板內容,而不會影響網站上相同樣板的其他例項。

讓我們來了解一下樣板覆蓋是如何工作的。

首先,你需要一個同步樣板。你可以在文章編輯器中從頭開始建立,也可以在網站編輯器的 “樣板” 部分找到現有的同步樣板。

第 1 步:轉到 “樣板“,複製一個現有樣板,例如預設主題 Twenty Twenty-Four 的 “Hero” 樣板。新增名稱並將複製設定為同步樣板

在網站編輯器中複製樣板

在網站編輯器中複製樣板

第 2 步:導航至 “我的樣板” 部分,找到新的同步樣板。在網站編輯器中開啟它,然後逐個選擇需要覆蓋的所有區塊。

轉到區塊設定側邊欄,向下滾動到高階部分。在這裡,你會發現一個按鈕:啟用覆蓋(Enable Overrides)

啟用樣板覆蓋

啟用樣板覆蓋

單擊該按鈕後,系統會提示您新增名稱並設定樣板型別。

啟用覆蓋

啟用覆蓋

第 3 步:對要覆蓋的每個區塊重複同樣的過程。完成後,建立一個新的文章或頁面,幷包含您的自定義樣板。

在編輯器畫布上新增樣板

在編輯器畫布上新增樣板

第 4 步:將區塊內容改為覆蓋,然後儲存文章。最後,檢查前端的結果。

文章編輯器中啟用覆蓋的區塊樣板

文章編輯器中啟用覆蓋的區塊樣板

這樣就大功告成了。您可以在網站的任何地方新增任意數量的這些樣板,每個新例項都會顯示相同的原始內容,但隨時可以進行自定義。

現在,讓我們檢查一下這些樣板的程式碼。返回網站編輯器的樣板部分。選擇 “我的樣板” 並新增你的樣板。然後,開啟 “選項” 選單,選擇 “程式碼編輯器”,檢視樣板的程式碼。

在我們的示例中,程式碼應該如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="wp-block-group">
<!-- wp:heading {
"textAlign":"center",
"level":1,
"metadata":{
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
},
"name":"Hero title"
},"fontSize":"x-large"} -->
<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
<!-- /wp:heading -->
...
</div>
<div class="wp-block-group"> <!-- wp:heading { "textAlign":"center", "level":1, "metadata":{ "bindings":{ "__default":{ "source":"core/pattern-overrides" } }, "name":"Hero title" },"fontSize":"x-large"} --> <h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1> <!-- /wp:heading --> ... </div>
<div class="wp-block-group">
<!-- wp:heading {
"textAlign":"center",
"level":1,
"metadata":{
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
},
"name":"Hero title"
},"fontSize":"x-large"} -->
<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
<!-- /wp:heading -->
...
</div>

在區塊分隔符中,你會注意到 metadata.bindings 屬性。這使得Heading區塊可以編輯。 __default 繫結指示 WordPress 將所有支援的屬性連線到一個特定的源,即"core/pattern-overrides"

同樣的屬性適用於所有需要編輯的區塊。例如,請參見按鈕區塊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="wp-block-buttons">
<!-- wp:button {
"metadata":{
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
},
"name":"Hero button"
}
} -->
<!-- /wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button">About us</a>
</div>
...
</div>
<div class="wp-block-buttons"> <!-- wp:button { "metadata":{ "bindings":{ "__default":{ "source":"core/pattern-overrides" } }, "name":"Hero button" } } --> <!-- /wp:button --> <div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">About us</a> </div> ... </div>
<div class="wp-block-buttons">
<!-- wp:button {
"metadata":{
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
},
"name":"Hero button"
}
} -->
<!-- /wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button">About us</a>
</div>
...
</div>

現在,讓我們返回文章編輯器,切換到程式碼編輯器。程式碼應類似於下面的內容:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- wp:block {
"ref":261,
"content":{
"Hero title":{
"content":"Managed WordPress Hosting"
},
"Hero body":{
"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
},
"Hero button":{
"text":"Learn more",
"url":"https://kinsta.com/wordpress-hosting/",
"linkTarget":"",
"rel":""
},
"Second button":{
"text":"View pricing",
"url":"https://kinsta.com/wordpress-hosting/pricing/",
"linkTarget":"_blank",
"rel":"noreferrer noopener"
},
"Hero image":{
"id":268,
"alt":"",
"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
}
}
} /-->
<!-- wp:block { "ref":261, "content":{ "Hero title":{ "content":"Managed WordPress Hosting" }, "Hero body":{ "content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide." }, "Hero button":{ "text":"Learn more", "url":"https://kinsta.com/wordpress-hosting/", "linkTarget":"", "rel":"" }, "Second button":{ "text":"View pricing", "url":"https://kinsta.com/wordpress-hosting/pricing/", "linkTarget":"_blank", "rel":"noreferrer noopener" }, "Hero image":{ "id":268, "alt":"", "url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg" } } } /-->
<!-- wp:block {
"ref":261,
"content":{
"Hero title":{
"content":"Managed WordPress Hosting"
},
"Hero body":{
"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
},
"Hero button":{
"text":"Learn more",
"url":"https://kinsta.com/wordpress-hosting/",
"linkTarget":"",
"rel":""
},
"Second button":{
"text":"View pricing",
"url":"https://kinsta.com/wordpress-hosting/pricing/",
"linkTarget":"_blank",
"rel":"noreferrer noopener"
},
"Hero image":{
"id":268,
"alt":"",
"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
}
}
} /-->

在這裡,你不會看到任何區塊,只會看到區塊樣板的引用,以及每個區塊設定為可編輯的屬性集。

同樣,你可以在網站的任何地方新增任意數量的區塊樣板,這些樣板將與你在網站編輯器中建立的結構和設計相匹配。

在 "網站" 編輯器中使覆蓋功能編輯樣板樣式和結構

在 “網站” 編輯器中使覆蓋功能編輯樣板樣式和結構

然後,您可以單獨更改可編輯區塊的內容,並保持結構不變。

前端網站上的覆蓋樣板

前端網站上的覆蓋樣板

由於樣板覆蓋是區塊繫結 API 的一種實現方式,因此我們只能覆蓋受支援的區塊:標題、段落、影象和按鈕。

您可以覆蓋 URL、Alt 和 Title 影象屬性

您可以覆蓋 URL、Alt 和 Title 影象屬性

您可以在這段 WordPress TV 視訊和尼克-迭戈(Nick Diego)的這篇博文中深入瞭解樣板覆蓋。

樣板覆蓋將在未來進行改進和新增。GitHub 上的討論將在此處此處繼續進行。

從連線的區塊編輯自定義欄位值

WordPress 6.5 引入了自定義欄位作為塊屬性的資料來源(core/post-meta),允許使用者將自定義欄位值連線到塊。WordPress 6.6 為這一功能帶來了新的增強功能,例如可以直接從連線的區塊中編輯自定義欄位值。

您可以從外掛或主題的函式檔案中註冊一組新的自定義欄位,確保在註冊文章元時將 show_in_rest 設定為 true。下面是一個示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
register_post_meta(
'post',
'book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field'
)
);
register_post_meta( 'post', 'book_title', array( 'show_in_rest' => true, 'type' => 'string', 'single' => true, 'sanitize_callback' => 'sanitize_text_field' ) );
register_post_meta( 
'post', 
'book_title', 
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field'
)
);

完成後,建立一個新的文章或頁面,並新增名稱相同的新自定義欄位。在畫布上新增一個支援的區塊(如標題區塊),切換到程式碼編輯器,然後按下圖所示修改該區塊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- wp:heading
{
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"book_title"
}
}
}
}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->
<!-- wp:heading { "metadata":{ "bindings":{ "content":{ "source":"core/post-meta", "args":{ "key":"book_title" } } } } } --> <h2 class="wp-block-heading"></h2> <!-- /wp:heading -->
<!-- wp:heading 
{
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"book_title"
}
}
}
}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

儲存文章/頁面並檢查結果。現在,您可以直接從區塊中編輯標題內容。自定義欄位值應反映您的更改。

在 WordPress 6.6 中從連線的區塊編輯自定義欄位

在 WordPress 6.6 中從連線的區塊編輯自定義欄位

此外,現在還有一個新面板提供與自定義欄位相連的塊屬性資訊,顯示與自定義欄位相連的區塊屬性。

WordPress 6.6 中帶有區塊繫結的影象屬性

WordPress 6.6 中帶有區塊繫結的影象屬性

該功能附帶一些相關函式:

  • 您可以通過查詢迴圈更新自定義欄位值。
  • 如果多個區塊連線到同一個自定義欄位,它們會共享同一個自定義欄位值,並與之同步更改。
  • 使用者只能在允許的文章中編輯自定義欄位。

最後一點:如前所述,支援區塊繫結 API 的區塊仍然限於以下內容:

區塊 屬性
影象 urlalttitle
Heading小標題 content
段落 content
按鈕 url,textlinkTargetrel

資料檢視增強功能

WordPress 6.5 中引入的資料檢視是一個改進的使用者介面,用於模板、樣板、文章、媒體等的集合。新介面在開發路線圖的第三階段 “協作” 中起著至關重要的作用,因此,我們可能會期待在未來的 WordPress 版本中看到更多增強功能,”包括改進工作流程,以指派人員稽覈帖子或建立自定義檢視來簡化流程”。截至 WordPress 6.6,新介面只存在於網站編輯器中,但在未來的版本中,它應該會擴充套件到更多的管理部分。

WordPress 6.6 為管理頁面引入了新的佈局。模板部分的管理已被移除,並整合到了樣板部分,而網站編輯器的樣板選單已被重新排列成兩個部分,模板部分在上,樣板在下。

WordPress 6.6 中的新樣板選單

WordPress 6.6 中的新樣板選單

對於頁面,一個新的面板提供了頁面列表,只需點選一下即可預覽任何頁面。

WordPress 6.6 中的預覽頁面

WordPress 6.6 中的預覽頁面

您還將在 “檢視” 選項選單中看到新的佈局選項。(右上角的圖示)。

WordPress 6.5 中的樣板檢視與檢視選項

WordPress 6.5 中的樣板檢視與檢視選項

WordPress 6.6 中帶有檢視選項的樣板檢視

WordPress 6.6 中帶有檢視選項的樣板檢視

除了這些更廣泛的更改外,資料檢視還受到其他一些小改進的影響,如新的批量編輯功能和 “首頁” 或 “文章” 頁面上的徽章,這些改進改善了介面,使其功能更強大、資訊更豐富。

WordPress 6.6 中顯示前臺頁面的徽章

WordPress 6.6 中顯示前臺頁面的徽章

WordPress 6.6 將資料檢視向前推進了一步,但我們仍處於早期階段。未來,我們將看到可擴充套件應用程式介面(API)的推出,讓開發人員可以直接對檢視採取行動。如需更深入地瞭解資料檢視的未來,請檢視 Anne McCarthy 撰寫的《資料檢視更新 – 2024 年 6 月》。

區塊編輯器的其他改進

WordPress 6.6 為核心帶來了 8 個 Gutenberg 版本(從 17.8 到 18.5),對介面、React 庫、區塊應用程式介面等進行了許多改進。以下是其中幾項:

  1. 新的釋出流程
  2. 檢視所有區塊
  3. 分組塊的鍵盤快捷鍵

新的釋出流程

6.6 版對文章/頁面設定側邊欄進行了清理,使其更輕便、更一致。在這次迭代中,文章編輯器和網站編輯器的統一程序向前邁進了一步,現在兩個編輯器都有相同的釋出流程

WordPress 6.5 與 6.6 的頁面設定側邊欄對比

WordPress 6.5 與 6.6 的頁面設定側邊欄對比

釋出體驗已標準化,新的狀態和可見性面板可讓您在更方便的位置設定文章/頁面狀態。

WordPress 6.6 中的狀態和可見性設定

WordPress 6.6 中的狀態和可見性設定

其他更改還包括移至側邊欄頂部的特色圖片和摘要控制元件,以及右上角經過改進的 “操作” 選單。

文章編輯器中的特色圖片和摘要控制元件

文章編輯器中的特色圖片和摘要控制元件

檢視所有區塊

在 WordPress 以前的版本中,當您選擇一個區塊時,區塊插入器只顯示允許您新增到所選區塊的區塊。例如,如果您選擇了一個列,那麼在區塊插入器中只能看到列區塊,因為您只能新增一個列。

區塊插入器只顯示列區塊

在 WordPress 6.5 中,當您選擇列區塊時,區塊插入器只顯示列區塊。

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

區塊插入器會顯示兩組區塊

在 WordPress 6.6 中,當您選擇列區塊時,區塊插入器會顯示兩組區塊

分組區塊的快捷鍵

現在,您可以使用 MacOS 上的 ⌘+ G 或 Windows 上的 Ctrl + G所選區塊進行分組

經典主題中的區塊樣板

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

以下圖片比較了 WordPress 6.5 中的樣板介面和 WordPress 6.6 中的樣板管理部分。

WordPress 6.5 中的樣板螢幕

WordPress 6.5 中的樣板螢幕,使用二〇二一經典主題

進行樣板管理

在 WordPress 6.6 中使用二〇二一經典主題進行樣板管理

現在,您可以像使用區塊主題一樣編輯、複製、重新命名、以 JSON 格式匯出和刪除圖案。

樣板操作

在 WordPress 6.6 中使用二〇二一經典主題進行樣板操作

您可以通過單獨選擇樣板或單擊批量編輯按鈕來執行批量操作。還可使用排序和過濾功能。

對樣板進行批量操作

在 WordPress 6.6 中使用二〇二一經典主題對樣板進行批量操作

您也可以像在區塊主題中建立樣板一樣建立樣板。點選右上角的 “新增新樣板” 按鈕,系統會提示您填寫有關樣板詳細資訊的表單。

使用經典主題新增新樣板

在 WordPress 6.6 中使用經典主題新增新樣板

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

在網站編輯器中編輯樣板

在 WordPress 6.6 中使用經典主題在網站編輯器中編輯樣板

此更新為經典主題使用者提供了更多功能,釋放了新的功能,並使經典主題和區塊主題的編輯體驗更加一致。

面向設計師和主題開發者的新工具和功能

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

  1. Theme.json v.3
  2. WordPress 6.6 中的 CSS 特性
  3. 章節樣式
  4. 顏色和排版預設
  5. 全站背景影象
  6. 網格佈局變化
  7. 負邊距
  8. 自定義陰影
  9. 自定義長寬比預設

Theme.json v.3

WordPress 6.6 還帶來了新的 theme.json 版本,即現在的第 3 版。新版本更改了覆蓋預定義屬性的方式。現在,要更改 fontSizes 或 spacingSizes 的預設值,您需要在 settings.typography 或 settings.spacing 下將 defaultFontSizes 或 defaultSpacingSizes 設為 false

總結一下:

  • 預設情況下,defaultFontSizesdefaultSpacingSizes 設定為 true 時,編輯器中將顯示預設字型大小和間距大小,並且不允許主題使用預設標點符號建立預設。
  • defaultFontSizes 或 defaultSpacingSizes 設定為 false 時,編輯器中將不顯示預設字型大小和間距大小,主題可以使用預設插槽。

請檢視開發說明,瞭解有關Theme.json v3 的更多資訊。

WordPress 6.6 中的 CSS 特性

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

在 6.6 之前,通常很難覆蓋核心樣式,主題開發人員必須制定複雜的 CSS 規則才能達到預期效果。在 6.6 中,核心塊樣式和全域性樣式(theme.json)通過將現有選擇器封裝在:root :where(...)中進行了修改,從而將核心樣式的特定性降低到0-1-0,並使其統一支援新的部分樣式。

例如,.wp-block-image.is-style-rounded img 已更新為 :root :where(.wp-block-image.is-style-rounded img)

我們鼓勵選擇全域性樣式的區塊開發者對其樣式進行同樣的修改,以便以可預測的方式通過樣式介面進行自定義。因此,如果你有一個帶有以下樣式的自定義區塊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.wp-block-custom-block {
padding: 0;
}
.wp-block-custom-block { padding: 0; }
.wp-block-custom-block {
padding: 0;
}

您應該用:root :where()來封裝它:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
:root :where(.wp-block-custom-block) {
padding: 0;
}
:root :where(.wp-block-custom-block) { padding: 0; }
:root :where(.wp-block-custom-block) {
padding: 0;
}

這樣,使用者就可以通過全域性樣式介面覆蓋區塊填充。

我們鼓勵主題開發人員也這樣做,以便通過全域性樣式介面配置塊樣式。

有關 WordPress 6.6 中 CSS 特性的更深入概述,請參閱開發說明

區塊樣式

WordPress 6.6 允許您為文章/頁面的各個部分設定樣式,而無需將相同的樣式逐個重新應用到多個區塊。這意味著,您可以選擇多個區塊和子區塊,並為整個選擇區塊分配不同的樣式。

這要歸功於區塊樣式變化的擴充套件,它現在支援內部區塊和元素的樣式,並利用了全域性樣式減少樣式特定性的優勢。

只有使用以下方法之一註冊了區塊樣式變體,才能通過全域性樣式來定義和操作它們:

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

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

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

這兩種變體的區別在於,區塊樣式變體有一個新的頂層 blockTypes 屬性,它是支援區塊樣式變體的區塊型別的非空陣列。此外,還新增了一個新的 slug 屬性,”以便在可能定義區塊樣式變化的不同來源之間保持一致,並使 slug 與可翻譯的 title 屬性脫鉤”。

開發說明提供了以下 theme.json 部分示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Variation A",
"slug": "variation-a",
"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
"styles": {
"color": {
"background": "#eed8d3",
"text": "#201819"
},
"elements": {
"heading": {
"color": {
"text": "#201819"
}
}
},
"blocks": {
"core/group": {
"color": {
"background": "#825f58",
"text": "#eed8d3"
},
"elements": {
"heading": {
"color": {
"text": "#eed8d3"
}
}
}
}
}
}
}
{ "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 3, "title": "Variation A", "slug": "variation-a", "blockTypes": [ "core/group", "core/columns", "core/media-text" ], "styles": { "color": { "background": "#eed8d3", "text": "#201819" }, "elements": { "heading": { "color": { "text": "#201819" } } }, "blocks": { "core/group": { "color": { "background": "#825f58", "text": "#eed8d3" }, "elements": { "heading": { "color": { "text": "#eed8d3" } } } } } } }
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Variation A",
"slug": "variation-a",
"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
"styles": {
"color": {
"background": "#eed8d3",
"text": "#201819"
},
"elements": {
"heading": {
"color": {
"text": "#201819"
}
}
},
"blocks": {
"core/group": {
"color": {
"background": "#825f58",
"text": "#eed8d3"
},
"elements": {
"heading": {
"color": {
"text": "#eed8d3"
}
}
}
}
}
}
}

通過 register_block_style 以程式設計方式定義區塊樣式變化

register_block_style 函式提供了註冊區塊樣式變化的第二種方法。你可以在主題的 functions.php 中這樣使用它:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
register_block_style(
array( 'core/group', 'core/columns' ),
array(
'name' => 'light',
'label' => __( 'Light' ),
'style_data' => array(
'color' => array(
'background' => '#973C20',
'text' => '#d2e3c8',
),
'blocks' => array(
'core/group' => array(
'color' => array(
'background' => '#739072',
'text' => '#e3eedd',
),
),
),
'elements' => array(
'link' => array(
'color' => array(
'text' => '#ead196',
),
':hover' => array(
'color' => array(
'text' => '#ebd9b4',
),
),
),
),
),
)
);
register_block_style( array( 'core/group', 'core/columns' ), array( 'name' => 'light', 'label' => __( 'Light' ), 'style_data' => array( 'color' => array( 'background' => '#973C20', 'text' => '#d2e3c8', ), 'blocks' => array( 'core/group' => array( 'color' => array( 'background' => '#739072', 'text' => '#e3eedd', ), ), ), 'elements' => array( 'link' => array( 'color' => array( 'text' => '#ead196', ), ':hover' => array( 'color' => array( 'text' => '#ebd9b4', ), ), ), ), ), ) );
register_block_style(
array( 'core/group', 'core/columns' ),
array(
'name'			=> 'light',
'label'			=> __( 'Light' ),
'style_data'	=> array(
'color'		=> array(
'background'	=> '#973C20',
'text'			=> '#d2e3c8',
),
'blocks'   => array(
'core/group'	=> array(
'color'		=> array(
'background'	=> '#739072',
'text'			=> '#e3eedd',
),
),
),
'elements' => array(
'link'   => array(
'color'  => array(
'text' => '#ead196',
),
':hover' => array(
'color' => array(
'text' => '#ebd9b4',
),
),
),
),
),
)
);

現在,當你選擇一個組或列圖區塊時,區側邊欄的 “樣式” 面板就會顯示一個已註冊版塊樣式的按鈕。

WordPress 6.6中的版塊樣式變化

WordPress 6.6中的版塊樣式變化

您可以在 Justin Tadlock 撰寫的在 WordPress 6.6 中使用區塊樣式變化設計版塊、巢狀元素等樣式、Aaron Robertshaw 的開發說明以及《塊樣式》(Block Styles)中找到有關塊樣式變化的更深入概述和更多示例 擴充套件塊樣式變化拉取請求。

在 Aaron Robertshaw 的開發說明中,以及在區塊樣式中:擴充套件區塊樣式變化的拉取請求中。

使用主題風格變化定義區塊風格變化

雖然目前可以使用 theme.json styles.variations 屬性,但這種方法只是暫時可用,很快就會被棄用。有關更深入的說明,請檢視開發說明的這一部分

顏色和排版預設

現在,您可以從全域性樣式介面中選擇一個可用的預設來更改主題的調色盤和字型系列。

如果當前主題支援顏色和排版預設,它們就會出現在 “全域性樣式” 的 “顏色” 和 “排版” 設定下。

下面的圖片展示了由 Twenty Twenty-Four 提供的兩種調色盤。

Twenty Twenty-Four 主題中的淺色調

Twenty Twenty-Four 主題中的淺色調

Twenty Twenty-Four 中的深色調色盤

Twenty Twenty-Four 中的深色調色盤

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

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

全站背景影象

從 WordPress 6.6 開始,您可以在theme.json和站點編輯器中定義全站背景圖片

全站圖片是在網站級別的 body 元素上設定的 background-image 屬性的值,會出現在每個網站頁面上。

要在 theme.json 中定義全站背景圖片,可以使用 styles.background 屬性下的backgroundImage.url

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"styles": {
"background": {
"backgroundImage": {
"url": "https://example.com/bg.png"
}
}
}
}
{ "styles": { "background": { "backgroundImage": { "url": "https://example.com/bg.png" } } } }
{
"styles": {
"background": {
"backgroundImage": {
"url": "https://example.com/bg.png"
}
}
}
}

在上面的示例中,我們設定了圖片的絕對路徑,但也可以使用相對於主題根目錄的路徑來定義背景圖片。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"styles": {
"background": {
"backgroundImage": {
"url": "file:./assets/bg.png"
}
}
}
}
{ "styles": { "background": { "backgroundImage": { "url": "file:./assets/bg.png" } } } }
{
"styles": {
"background": {
"backgroundImage": {
"url": "file:./assets/bg.png"
}
}
}
}

然後,您可以使用以下影象道具:

  • backgroundPosition
  • backgroundSize
  • backgroundRepeat

如果您不是主題開發人員,您可以通過網站編輯器的樣式面板使用全站背景圖片。在 WordPress 6.6 中,您可以在 “樣式”>”佈局” 下找到相應的控制元件。

樣式設定中的背景圖片面板

樣式設定中的背景圖片面板

這是背景影象的第一次迭代。如需進一步瞭解它的工作原理、侷限性和下一步計劃,請檢視WordPress 6.6 中的全站背景圖片開發說明。

網格佈局變化

組區塊的新佈局變化允許您以網格形式顯示組內的元素

您可以在編輯器的畫布上新增一個組區塊,然後在組區塊設定面板中選擇網格佈局,試試看

WordPress 6.6 中的網格佈局

WordPress 6.6 中的網格佈局

網格佈局有兩種型別

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

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

負邊距

現在,您可以為所有支援邊距控制元件的區塊設定負邊距。在 WordPress 6.6 之前,這項功能只能在 theme.json 中使用,而現在可以輕鬆地為元素應用負邊距來建立重疊效果。

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

在 WordPress 6.6 中為按鈕區塊設定負邊距

在 WordPress 6.6 中為按鈕區塊設定負邊距

自定義陰影

使用 WordPress 6.6,您可以在全域性樣式介面中建立和編輯自定義陰影。要建立自定義陰影,請導航到網站編輯器,然後從全域性樣式選單中選擇陰影。在這裡,你會發現一個自定義面板。點選 “+” 按鈕後,就會出現一個新元素,讓你可以訪問一組控制元件,自定義陰影或重新命名/刪除陰影。

WordPress 6.6 中的陰影控制元件

WordPress 6.6 中的陰影控制元件

自定義長寬比預設

現在,主題開發人員可以通過在 theme.json 中設定 settings.dimensions.aspectRatios 選項來定義自定義長寬比預設

針對開發者的其他更改

然而,針對開發者的更改並不侷限於主題。其他新增內容和改進還會影響 React 庫和各種 API。

  1. 選項 API:禁用大選項的自動載入
  2. 對 React 庫的改進
  3. 對區塊 API 的改進

選項 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:依賴 WP 預設的自動載入行為。在 WP 6.6 中,應自動載入,但該行為將來可能會改變。
  • auto-on:應自動載入。它會動態設定為 true
  • auto-off:不應自動載入。動態設定為 false

除了這些更改,WordPress 6.6 還引入了幾個函式和過濾器:

  • wp_autoload_values_too_autoload() 函式返回所有應自動載入的資料庫值。
  • wp_autoload_values_to_autoload 過濾器允許編輯應自動載入的選項列表。
  • wp_default_autoload_value 過濾器可設定未設定明確值的選項的值。
  • wp_max_autoloaded_option_size 過濾器可以修改閾值,超過閾值的選項預設不會自動載入。預設值為 150000。(150kb)

這一更改對於擁有許多外掛的複雜網站特別有用,值得外掛開發人員注意。如需更全面的概述,建議檢視自定義寬高比預設

改進 React 庫

React 庫有兩項重大變更。首先,WordPress 6.6 包含了 React 18.3,其中增加了棄用警告和其他更改,以幫助開發人員在 React 19 穩定後做好準備。

其次,開發人員現在可以使用 React17 首次引入的新 React JSX 變換。

有關這些變更的更多資訊,請參閱 React19 升級準備工作WordPress 6.6 中的 JSX 開發說明。

對區塊 API 的改進

WordPress 6.6 還為區塊 API 帶來了多項技術變更,包括以下內容:

小結

在這篇長文中,我們探討了 WordPress 6.6 中許多令人興奮的功能和變化,從區塊樣板覆蓋到資料檢視的增強、主題開發者的新功能,以及統一網站和文章編輯器的編輯體驗。但還有很多我們在本文中沒有涉及到內容,例如自動更新的回滾

如果您想更深入地瞭解,您不應該錯過一系列來自 WordPress 核心貢獻者的優秀資源,我們在測試 WordPress 6.6 時參考了這些資源。在眾多資源中,我們推薦安妮-麥卡錫(Anne McCarthy)撰寫的 WordPress 6.6 Source of Truth、Meetup 上的 “學習 WordPress 線上研討會“、WordPress 開發者部落格、Make WordPress Core 部落格上釋出的開發說明,以及 Birgit Pauli-Haack 在 Gutenberg Times 上釋出的定期更新等。

現在,就看您的了。您測試過 WordPress 6.6 的功能了嗎?您最喜歡哪項功能或變化?請在下面發表評論並參與討論。

評論留言