WordPress 6.3新功能:網站編輯器改版、新命令面板、樣式修訂版本、新區塊等!

WordPress 6.3新功能:網站編輯器改版、新命令面板、樣式修訂版本、新區塊等!

WordPress 6.3 是 WordPress 路線圖第二階段的最後一個重要版本。在第二階段,開發工作主要集中在網站編輯器上,增加了其功能,並改進了介面和可用性。

現在,網站建立者可以在同一個介面上設計佈局和管理內容,無需從一個管理區跳轉到另一個管理區,也無需編寫一行程式碼。

隨著 WordPress 6.3 的釋出,10 個版本的 Gutenberg 外掛合併到了核心中,如果你的網站沒有使用 Gutenberg,你會發現網站編輯器的介面發生了很大變化。

在 WordPress 6.3 中,編輯體驗得到了顯著改善。一些技術上的變化影響了網站編輯器,從而產生了一種探索塊主題和使用網站編輯器本身的新方式。改進的導航、免打擾模式、區塊主題預覽、樣式和模板修訂、新的命令面板等等。

關於 WordPress 6.3,我們還有很多話要說。所以,不要再等待了,讓我們來看看第二階段的最終版本有哪些新功能吧。

  1. 增強網站編輯器中的導航功能
  2. 新的區塊樣板系統
  3. 網站編輯器中的樣式修改
  4. 命令面板
  5. 網站編輯器的其他功能和改進
  6. 新區塊和改進的設計工具
  7. 針對開發人員的效能增強和更改

增強網站編輯器中的導航功能

在 WordPress 6.3 中,網站編輯器的導航功能得到了顯著改進,增加了通往編輯器不同區域的新入口。在 6.3 版之前,這些管理部分可以通過放置在不同管理選單和螢幕中的入口點進入。這些更改帶來了更輕鬆、更一致的編輯體驗。

下圖比較了 WordPress 6.2 和 6.3 中編輯器的導航選單。

WordPress 6.2 與 6.3 中的網站編輯器導航

WordPress 6.2 與 6.3 中的網站編輯器導航

在上圖中,你首先會注意到編輯器側邊欄右上角顯示的兩個按鈕。檢視網站按鈕會在滑鼠移動時出現,可以快速訪問 WordPress 網站的前端。這是一個小而實用的新增按鈕,無論你在網站編輯器中的哪個位置,當導航選單開啟時,都可以快速訪問網站頁面。

開啟命令面本按鈕(放大鏡圖示)可以訪問 WordPress 6.3 的新功能–命令面板(下文將詳細介紹)。

網站編輯器中的 "檢視網站" 和 "開啟命令面板" 按鈕

網站編輯器中的 “檢視網站” 和 “開啟命令面板” 按鈕

新的編輯器導航包括以下專案。

  1. 導航
  2. 樣式
  3. 頁面
  4. 模板
  5. 樣板

建立導航選單後,它就會出現在網站編輯器的導航選單中。在這裡,您可以上下移動選單項,或從下拉選單中刪除它們。您還可以拖放專案來安排選單順序。

網站編輯器中的導航選單

網站編輯器中的導航選單

點選選單項可進入頁面詳情。在這裡,您還可以編輯頁面內容和佈局(見下文)。

樣式

通過 “樣式” 選單,您可以在瀏覽模式下訪問各種樣式。在這裡,您可以預覽可用的樣式,應用其中一種並進行自定義。

WordPress 6.3 的樣式選單

WordPress 6.3 的樣式選單

眼睛圖示可啟動 “樣式手冊“,這是 6.2 版推出的一項功能,可在不離開編輯器介面的情況下預覽應用了不同樣式的可用區塊。

您可以通過網站編輯器的樣式面板輕鬆訪問樣式手冊

您可以通過網站編輯器的樣式面板輕鬆訪問樣式手冊

頁面

通過 “頁面” 選單項,您可以訪問最近更新的 10 個網站頁面以及若干編輯功能。在這部分中,您可以建立新頁面、編輯現有頁面的內容和佈局、訪問頁面詳細資訊等。

這裡最有趣的新增功能是,現在可以不離開編輯器介面就能建立新頁面

點選導航面板中的 + 圖示後,頁面中間會出現一個新的模態視窗,允許你為新頁面設定標題,同時還會顯示一個工具提示,為你的標題提供建議。

在 WordPress 6.3 中建立新頁面

在 WordPress 6.3 中建立新頁面

單擊 “新建頁面” 後,就會跳轉到已載入新頁面的 “文章編輯器”。

在 “頁面” 下,您還可以直接從網站編輯器編輯頁面內容

WordPress 6.3 中的頁面選單

WordPress 6.3 中的頁面選單

現在,您可以在同一個地方編輯頁面內容和樣式。這讓你可以更好地控制頁面的方方面面,大大改善了編輯體驗。

在編輯模式下,您可以在頁面編輯器和模板編輯器之間輕鬆切換。這樣可以避免對編輯內容產生任何混淆,並讓你確定所做更改是隻影響當前頁面,還是也適用於使用相同模板的其他頁面。

同一螢幕還可顯示頁面詳細資訊

網站編輯器中的頁面詳細資訊

網站編輯器中的頁面詳細資訊

目前的詳細資訊包括

  • 狀態
  • 別名
  • 模板
  • 父級
  • 字數
  • 閱讀時間
  • 最後修改

模板

在這裡可以訪問頁面模板。模板介面的結構變化不大。不過,在 WordPress 6.3 中,當您建立一個新模板時,會有一個新的模態疊加提供一個頁面列表,供您選擇模板。

新模板提供了一個可供選擇的預設頁面列表

在建立新模板時,新模板提供了一個可供選擇的預設頁面列表

第二步,一個新的模板視窗會提供一個區塊樣板列表,您可以用它來建立模板。

在模板建立過程中選擇樣板

在模板建立過程中選擇樣板

樣板

上一次迭代中被命名為 “庫” 的 “樣板” 管理部分反映了涉及區塊樣板系統的許多顯著變化。這些變化不僅僅是使用者介面的變化。它是對整個區塊樣板架構的全面改造。

WordPress 6.3 中的樣板螢幕

WordPress 6.3 中的樣板螢幕

樣板管理部分,您可以管理模板部件和樣板。這裡有一個選單,可以按類別訪問模板部件和區塊樣板。鎖定圖示表示使用者不能修改的主題樣板。

網站編輯器新樣板部分中的模板部件和主題樣板

網站編輯器新樣板部分中的模板部件和主題樣板

在這一部分,您可以建立新的模板部件和自定義區塊樣板,並與主題樣板一起管理它們。

在 WordPress 6.3 中建立新的模板部件和區塊樣板

在 WordPress 6.3 中建立新的模板部件和區塊樣板

單擊 “建立樣板” 按鈕後,彈出一個新的樣板視窗,允許您為樣板指定名稱,並設定要建立的樣板型別(同步不同步)。

在 WordPress 6.3 中建立同步樣板

在 WordPress 6.3 中建立同步樣板

建立至少一個自定義圖區塊樣板後,就可以從 “我的樣板” 中訪問它,它將出現在樣板選單的頂部。

在 WordPress 6.3 中的我的樣板

在 WordPress 6.3 中的我的樣板

您可以選擇區塊樣板,然後進入一個新的面板,檢視樣板的細節。通過向右或向左移動手柄,可以預覽不同解析度下的樣板並檢查其響應速度。

細節部分顯示當前樣板的同步狀態

在 WordPress 6.3 中預覽自定義區塊樣板

在 WordPress 6.3 中預覽自定義區塊樣板

在 “樣板” 選單的底部,您還可以找到幾個連結: 管理所有模板部件管理我的所有樣板。通過這些連結可以直接訪問模板部件和自定義樣板。

這就是網站編輯器中新的樣板管理介面。現在讓我們瞭解一下區塊樣板系統的結構和功能有哪些變化。

新的區塊樣板系統

從 WordPress 6.3(和 Gutenberg 16.1)開始:

  • 可重複使用區塊已更名為同步樣板
  • 基本區塊樣板現在被命名為非同步樣板
  • 擴充套件了 wp_block 自定義文章型別,以支援自定義欄位,並新增了一個新的 wp_block_sync_status 元欄位,用於儲存樣板的同步狀態,
  • 在區塊樣板和響應中新增了 source 屬性,以區分核心樣板和使用者樣板,
  • 擴充套件了 REST API,增加了一個新屬性。

 wp_block_sync_status 元欄位用於儲存區塊樣板的同步狀態

 wp_block_sync_status 元欄位用於儲存區塊樣板的同步狀態

現在可以更清楚地看到,對同步樣板所做的所有更改都將應用到整個網站上出現的每個區塊

相反,對非同步區塊樣板所做的更改只會影響該樣板的特定例項,而不會應用到您可能新增到網站其他文章或頁面的任何其他例項。

藉助新的樣板管理系統,您現在可以直接在網站或文章編輯器中建立同步或不同步的區塊樣板,而以前只能建立可重複使用區塊(現在是同步樣板)。

要在文章編輯器中試用這項新功能,請開啟 WordPress 面板,然後轉到文章 -> 寫文章。在那裡,建立一組新的區塊,或者直接選擇要新增到區塊樣板中的區塊。然後從區塊工具欄的彈出選單中選擇建立樣板/可重複使用區塊。

在文章編輯器中建立樣板/可重複使用區塊

在文章編輯器中建立樣板/可重複使用區塊

此外,在網站編輯器中,建立樣板按鈕允許您建立新的模板部件或樣板。

在網站編輯器中建立新樣板

在網站編輯器中建立新樣板

單擊 “建立模板部件” 開啟一個模態/彈出視窗,讓您為模板部件新增名稱以及模板部件在頁面中的位置。

在網站編輯器中建立模板部件

在網站編輯器中建立模板部件

單擊 “建立樣板” 後,會彈出一個不同的樣板/彈窗,允許您為樣板設定名稱,並選擇建立同步或非同步樣板。

在網站編輯器中建立樣板

在網站編輯器中建立樣板

在網站編輯器中確認並建立樣板或模板部件。

在網站編輯器中建立區塊樣板

在網站編輯器中建立區塊樣板

對編輯滿意後,儲存區塊樣板並返回網站編輯器。開啟樣板部分,點選 “管理我的所有樣板“。樣板螢幕上將顯示新的自定義區塊樣板。

WordPress 6.3 中的樣板螢幕

WordPress 6.3 中的樣板螢幕

區塊樣板還利用了圖片區塊的寬高比控制元件。現在,如果您為圖片設定了寬高比,那麼當您將圖片換成另一張不同尺寸的圖片時,寬高比將得到保留。這對區塊樣板特別有用,因為在區塊樣板中更換圖片時,你不再需要關心圖片的尺寸。

影象區塊寬高比控制

影象區塊寬高比控制

有關對圖片區塊樣板系統所作更改的更深入概述,請參閱 PR  #51078#51144, 和 #50028.。

網站編輯器中的樣式修改

網站編輯器現在提供了修訂歷史記錄,讓您可以瀏覽更改並選擇一個進行恢復。

要訪問修訂歷史,請單擊樣式面板中的修訂版本按鈕。

在 WordPress 6.3 中訪問修訂版本

在 WordPress 6.3 中訪問修訂版本

該面板以時間軸的形式提供修訂列表。它還在工具提示中提供每個修訂的作者姓名以及每個修訂的日期和時間。您可以預覽所有修訂,並選擇要恢復的修訂。

WordPress 6.3 中的樣式修訂版本

WordPress 6.3 中的樣式修訂版本

您可以在全域性樣式介面中瀏覽修訂版本,預覽並隨時恢復內容。

修訂版本的開發不會就此停止。進入第 3 階段後,修訂版本將受到新新增內容和增強功能的影響,這些內容和增強功能將進一步提高修訂版本的可用性並釋放新功能。

命令面板

命令面板是一項新功能,可讓您使用命令執行常用操作,例如跳轉到編輯器中的其他頁面或模板。

在網站編輯器中,點選鏡頭圖示或點選 cmd + k (Windows 和 Linux 系統為 ctrl + k )。這將啟動命令面板

當你開始鍵入命令時,命令面板提示各種命令供你選擇。這為執行任務或進入站點編輯器的特定區域提供了一種快捷方式。

WordPress 6.3 中的命令面板

WordPress 6.3 中的命令面板

該功能的首次實施帶來了快速搜尋功能和一些操作,如導航網站編輯器、建立新文章/頁面、切換使用者介面元素、重置或刪除模板或模板部分等。在未來的迭代中還會新增更多命令

新工具將帶來無窮無盡的使用案例。例如,在顯示特定文章或頁面的設計選項時,可能需要使用命令調色盤。

藉助新的命令面板 API,您還可以註冊自定義命令,以呈現、註冊和取消註冊命令。

根據要註冊的命令型別不同,註冊命令的方法也不同。

  • 靜態命令:開發人員可以使用 wp.data.dispatch( wp.commands.store ).registerCommand 操作或 wp.data.useCommand React 鉤子註冊自定義靜態命令。
  • 動態命令:這些命令包含在命令列表中,取決於使用者在命令面板輸入框中輸入的搜尋詞,或者當某個命令僅在滿足某些條件時可用。
  • 上下文命令:這些命令在特定上下文中具有優先權,也就是說,它們會自動出現在正確的上下文中(例如,當你正在編輯模板時)。重置模板刪除模板命令就是上下文命令的例子。目前已實現兩種上下文:
    • 站點編輯器:該上下文在瀏覽網站編輯器時設定
    • site-editor-edit(站點編輯器-編輯):在編輯器中編輯某些內容(模板、模板部分或頁面)時設定此上下文

您可以在瀏覽器控制檯執行 wp.data.select( wp.commands.store ).getCommands() 獲取可用命令列表

在 WordPress 6.3 中列出命令

在 WordPress 6.3 中列出命令

命令面板最初可用於 “文章” 和 “網站” 編輯器,將來會擴充套件到整個管理員介面。

有關命令面板的開發人員預覽,請檢視請求回撥

網站編輯器的其他功能和改進

除了前面幾節討論的功能和改進之外,WordPress 6.3 還為我們帶來了:

  1. 網站編輯器中的主題預覽
  2. 載入狀態改進
  3. 免打擾模式
  4. 其他使用者介面改進

網站編輯器中的主題預覽

從 6.3 開始,新的 theme_preview 引數允許在網站編輯器中載入每個區塊主題,並在啟用前進行預覽。

在網站編輯器中預覽 TT1 區塊主題

在網站編輯器中預覽 TT1 區塊主題

要預覽區塊主題,請導航至外觀 > 主題螢幕,然後將滑鼠懸停在任何區塊主題上。你會在每個塊主題上方看到一個實時預覽按鈕。只需點選該按鈕,即可在網站編輯器中啟動主題預覽。對於非區塊主題,實時預覽按鈕會啟動主題定製器。

載入狀態改進

WordPress 6.3 對編輯器的載入狀態進行了改進,以防止使用者在編輯器完全載入之前進行互動。

使用者無法與編輯器進行互動

現在,在載入完成之前,使用者無法與編輯器進行互動

免打擾模式

WordPress 6.3 在網站編輯器中引入了免打擾編輯模式。這與 WordPress 6.2 中的文章編輯器的功能相同

網站編輯器中的免打擾模式

網站編輯器中的免打擾模式

您可以在網站編輯器的選項面板中啟用這一功能。一旦啟用 “免打擾模式”,邊欄和工具欄就會消失,讓您可以專注於編輯工作。

其他使用者介面改進

  • 新的 <ViewLink> 元件現在可顯示一個按鈕,用於在新視窗中開啟任何已釋出的文章型別。這是一個小而實用的功能,讓您無需在設定側邊欄中搜尋連結,即可檢視當前的文章型別(PR #50260
  • 改進了模板說明,以更好地解釋每個模板的具體功能。這將有助於使用者在網站編輯器中選擇正確的模板進行自定義。
  • 以前,雙色調過濾器設定只能在區塊工具欄中使用。在 6.3 中,現在可以通過設定側邊欄使用雙色調控制(PR #49838
  • 在 WordPress 6.3 之前,大字型在小螢幕上的縮放不夠。現在,由於採用了對數縮放因子來計算小螢幕的最小字型大小,流體排版可以平滑縮放 (PR #49707)

新區塊和改進的設計工具

WordPress 6.3 還提供了一些有用的區塊,應該會讓很多內容作者感到高興。

  1. 新的閱讀時間區塊
  2. 新腳註區塊
  3. 新的詳細資訊區塊
  4. 封面區塊增強
  5. 增強型雙色調過濾器
  6. 其他改進

新的閱讀時間區塊

新的 “閱讀時間” 區塊顯示當前頁面或文章的平均閱讀時間。該區塊長篇內容尤其有用,因為它可以讓網站讀者組織閱讀並儲存內容以供稍後使用。

帶設定側邊欄和文件概覽的 "閱讀時間" 區塊

帶設定側邊欄和文件概覽的 “閱讀時間” 區塊

區塊中顯示的時間值與詳細資訊面板中顯示的值一致。根據《Investigative Ophthalmology & Visual Science》的研究,平均閱讀率設定為 189。開發人員可以在 GitHub 上檢視該區塊的程式碼

新腳註區塊

WordPress 6.3 還為我們帶來了超級實用的腳註區塊。

為文字區塊新增腳註

為文字區塊新增腳註

有了這個新功能,只需點選幾下就能在文字區塊(段落、標題和列表)中新增腳註。將游標放在要新增連結的位置,然後點選文字區塊上下文選單中的腳註按鈕。這將在頁面底部新增腳註。

WordPress 6.3 中的腳註區塊

WordPress 6.3 中的腳註區塊

腳註區塊會在您編輯文字時自動新增、刪除腳註並重新排序,這一點非常有用,尤其是對長篇文章而言。

新的詳細資訊區塊

現在,有了新的 “詳細資訊” 區塊,您可以隱藏一段內容,直到讀者準備好閱讀您的常見問題、觀看您的視訊或收聽您的精彩播客。

帶有摘要和隱藏內容的空 "詳細資訊" 區塊

帶有摘要和隱藏內容的空 “詳細資訊” 區塊

新區塊由兩個獨立元素組成:摘要和隱藏內容。預設情況下,內容是隱藏的,但您可以在區塊設定邊欄中更改設定。

包含摘要和視訊內容的詳細資訊區塊

包含摘要和視訊內容的詳細資訊區塊

該程式碼塊使用了一個帶有富文字 <summary><details> 元素和一個包含隱藏元素的 <div> (另見 PR #45055)。

封面區塊增強

封面區塊增強了一些設計功能,使其更易於使用,併為自定義提供了更多可能性。

首先,封面區塊現在支援文字顏色設計工具。有了這項新增功能,使用者和主題作者只需設定封面區塊上的文字顏色,就可以更改所有內部區塊的顏色。此外,由於文字顏色現在可以順利傳遞到生成的區塊,因此可以更輕鬆地處理來自媒體和文字區塊的轉換。

封面區塊現在支援文字顏色設計工具

封面區塊現在支援文字顏色設計工具

WordPress 6.3 對封面區塊的另一項新增功能是支援所有與邊框相關的設計工具。這一新增功能可減少對自定義區塊樣式的需求。

封面區塊的邊框控制

封面區塊的邊框控制

WordPress 6.3 還為封面區塊新增了對約束/流程佈局的支援,現在可以像處理組區塊一樣處理封面區塊。這一改動增加了佈局處理的一致性,肯定會使使用者和主題開發人員更容易進行定製。

封面區塊的佈局設定

封面區塊的佈局設定

不過,主題開發人員應在現有主題上進行一些測試,因為區塊佈局系統可能會覆蓋自定義實現。

增強型雙色調過濾器

一些更改改進了我們使用雙色調濾鏡的方式。

首先,您現在可以在網站編輯器的樣式面板中全域性設定雙色調過濾器。以前,您只能在theme.json中全域性應用雙色調濾鏡。

在網站編輯器的樣式面板中應用雙色調過濾器

在網站編輯器的樣式面板中應用雙色調過濾器

之所以可以這樣做,是因為雙色調值現在是使用顏色標籤而不是顏色值來設定的。這也意味著,只要使用相同的標籤,您就可以一次性設定雙色調值,並將其應用到當前主題或主題變體中。

最後,對於那些精通技術的人來說,Duotone 樣式現在使用 WordPress 樣式引擎生成,並與支援 CSS 的區塊一起儲存,而不是內聯。

其他改進

  • 按鈕區塊現在支援邊框顏色、樣式和寬度 (PR #44574)
  • 為 “文章摘要” 區塊新增了摘要長度控制 – https://github.com/WordPress/gutenberg/pull/44964
  • 現在可以控制文章特色圖片區塊的長寬比 (PR #47854)
  • 全域性樣式介面現在包含了標題元素的顏色和排版控制(PR #49141
  • 在釋出日期區塊中新增了文章修改日期變體。如果你想快速新增文章修改日期而不是釋出日期,這將非常有用(PR #49111
  • 現在可以從側邊欄更換網站Logo (PR #49992)

針對開發人員的效能增強和更改

WordPress 6.3 還帶來了許多更改和新功能,旨在改善網站效能和開發人員的工作流程。在眾多新增功能中,我們挑選了以下幾項:

  1. 放棄對 PHP 5 的支援
  2. 影象載入效能增強
  3. 支援 HTML 5 非同步和延遲屬性
  4. 開發模式
  5. 針對開發人員的其他更改

放棄對 PHP 5 的支援

從 WordPress 6.3 開始,將不再支援 PHP 5。新的最低支援版本將是 PHP 7.0.0,建議使用 7.4 或更高版本的 PHP。7.4也是WordPress網站使用最多的版本,佔WordPress網站總數的50.8%

截至 2023 年 7 月現有 WordPress 網站使用的 PHP 版本

截至 2023 年 7 月現有 WordPress 網站使用的 PHP 版本(圖片來源:WordPress.org

這不僅對開發人員很重要,對所有 WordPress 使用者也很重要,因為它可以提高網站的安全性和效能。

截至 2023 年 7 月支援的 PHP 版本

截至 2023 年 7 月支援的 PHP 版本(圖片來源:PHP.net

影象載入效能增強

從 WordPress 6.3 開始,取值為 "high"fetchpriority 屬性會分配給影象,以確定它是否是 LCP(最大內容繪製)影象,而最大內容痛點是一個指標,用於報告視口中最大元素的呈現時間。

fetchpriority 屬性指示瀏覽器在計算佈局之前就優先處理該圖片

另一項改進是使用 loading 屬性自動處理圖片的懶載入。該屬性最初是在WordPress 5.5中引入的,後來在WordPress 5.9中進行了改進,省略了第一張內容圖片的 loading="lazy" 屬性(請參閱WordPress 5.9中的懶載入效能改進)。現在,在WordPress 6.3中,所有遺留問題都已得到解決,從而實現了良好的效能改進。

fetchpriority 和 loading 屬性現在都由新函式 wp_get_loading_optimization_attributes() 控制。該函式返回一個關聯陣列,其中包含用於優化載入效能的屬性。目前,該函式可能返回的屬性有:

  • 值為 "lazy" loading
  • 值為 "high" fetchpriority 屬性

請注意,任何元素都不能同時擁有這兩個屬性,因為它們是相互排斥的。如果一個元素同時包含這兩個屬性,則會觸發警告。

有關 wp_get_loading_optimization_attributes() 函式、 fetchpriority 和 loading 屬性的更深入概述及使用示例,請參閱 WordPress 6.3 中的影象效能增強

支援 HTML 5 async 和 defer 屬性

asyncdefer 兩個 HTML 5 屬性,用於指示瀏覽器在不暫停 HTML 解析的情況下下載 JavaScript

這兩個屬性之間有一個關鍵區別:

  • 帶有 async 屬性的指令碼在載入後會立即非同步執行。指令碼載入完成後,瀏覽器會暫停 HTML 解析並執行指令碼。
  • 而帶有 defer 屬性的指令碼只有在頁面解析完成後才會被執行。

從WordPress 6.3開始,您現在可以使用 wp_register_script()wp_enqueue_script() 函式中的 $in_footer 布林引數,註冊具有 async 和 defer 屬性的指令碼(另請參閱如何在WordPress中排序您的資產)。

該引數已被過載,現在可接受一個新的 $args 陣列引數,允許您為指令碼指定載入策略。

下面舉例說明如何使用 wp_register_script (程式碼與 wp_enqueue_script 相同)在外掛的 PHP 檔案中定義延遲策略:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
wp_register_script(
'custom-script',
plugins_url( '/js/custom-script.js' , __FILE__ ),
array(),
'1.0.0',
array(
'strategy' => 'defer'
)
);
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js' , __FILE__ ), array(), '1.0.0', array( 'strategy' => 'defer' ) );
wp_register_script( 
'custom-script', 
plugins_url( '/js/custom-script.js' , __FILE__ ), 
array(), 
'1.0.0', 
array(
'strategy' => 'defer'
) 
);

允許向後相容,因此您可以繼續指示 WordPress 在頁尾載入您的指令碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
wp_register_script(
'custom-script',
plugins_url( '/js/custom-script.js' , __FILE__ ),
array(),
'1.0.0',
array(
'in_footer' => true,
'strategy' => 'defer'
)
);
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js' , __FILE__ ), array(), '1.0.0', array( 'in_footer' => true, 'strategy' => 'defer' ) );
wp_register_script( 
'custom-script', 
plugins_url( '/js/custom-script.js' , __FILE__ ), 
array(), 
'1.0.0', 
array(
'in_footer' => true,
'strategy' => 'defer'
) 
);

有了新的實現,現在就可以防止指令碼在指令碼依賴樹中以意外的順序載入,而在 WordPress 6.3 之前的工具是無法做到這一點的。有關指令碼應用程式介面更改的詳細概述,以及其他示例和技術細節,請檢視 Simon Dowdles 的開發說明

開發模式

WordPress 6.3 引入了一種新的開發模式,開發人員可以使用新的 WP_DEVELOPMENT_MODE 常量啟用該模式。任何開發網站都建議使用這個新常量,其值取決於正在進行的開發型別。

WP_DEVELOPMENT_MODE 可以使用以下其中一個可能的值:

  • core – 用於表示網站被用作核心開發環境。
  • plugin – 用於開發外掛。
  • theme – 用於主題開發。
  • all – 表示網站用於所有三種型別的開發。
  • 預設為空字串,表示網站不用作開發環境。

WP_DEVELOPMENT_MODE 應僅用於開發安裝。它與生產無關。

開發模式會影響 WordPress 行為的某些底層方面。在撰寫本文時,唯一的區別是主題.json 檔案的快取,當 WP_DEVELOPMENT_MODE 設定為 'theme'時,快取將被繞過。

WP_DEVELOPMENT_MODE 的工作方式與通常在開發中使用的 WP_DEBUGWP_ENVIRONMENT_TYPE 常量不同,因為 WP_DEBUGWP_ENVIRONMENT_TYPE 不會以任何方式影響 WordPress 的行為。當 WP_ENVIRONMENT_TYPE'development' 或 'local' 時,您可能會使用 WP_DEVELOPMENT_MODE ,因為開發不應該發生在實時網站上。

您可以通過這種方式啟用開發模式:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
define( 'WP_DEVELOPMENT_MODE', 'theme' );
define( 'WP_DEVELOPMENT_MODE', 'theme' );
define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 還引入了一個新的 wp_in_development_mode() 函式,讓您可以檢查網站是否處於開發模式。通過 $mode 引數,新函式還可以檢查當前的開發型別,該引數的可能值為 'core''plugin', 和 'theme'

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
if ( wp_in_development_mode( 'theme' ) ) { ... }
if ( wp_in_development_mode( 'theme' ) ) { ... }
if ( wp_in_development_mode( 'theme' ) ) { ... }

您還可以在站點健康工具的資訊面板中檢視 WP_DEVELOPMENT_MODE 的當前值。

針對開發人員的其他更改

小結

隨著 WordPress 6.3 的釋出,我們進入了古騰堡開發路線圖的第二階段:自定義。這個新版本為我們帶來了編輯體驗上的重大改進,包括網站編輯器中的新編輯功能、新的更靈活的區塊樣板系統、新的區塊、更好的效能、可訪問性和國際化方面的改進等等。

WordPress的下一個版本預計將於2023年11月釋出,我們將進入第三階段:協作,其主要目標是為編輯器帶來先進的協作功能

評論留言