區塊編輯器

區塊編輯器

區塊編輯器是一種全新的編輯體驗。顧名思義,區塊編輯器將您的所有內容視為單獨的塊。每個塊都可以單獨插入、重新排列和設計樣式,使這個新編輯器比舊的 (TinyMCE) 經典編輯器更加靈活。

區塊編輯器為所有常見內容提供單獨的塊,例如段落、標題、有序和無序列表 (即專案符號點) 、引用、影象、相簿以及您之前可以新增到經典編輯器的任何其他內容。最重要的是,區塊編輯器還提供了額外的塊,可以輕鬆新增按鈕、表格和列等內容。

重新排列內容比以前更容易。區塊編輯器允許您拖放或使用塊移動器圖示來重新排列各個塊的順序。每個塊還可以使用塊頂部的工具欄單獨設定樣式。您可以新增到塊的樣式型別取決於各個塊。例如,段落塊允許您更改文字大小、文字顏色和背景顏色,而標題塊僅允許您更改級別 (H2 、 H3 等) 和文字對齊方式。

現在,當您新增新頁面或文章時,WordPress 預設以全屏模式開啟區塊編輯器。全屏模式將隱藏使用者介面的某些部分,例如左側選單和頂部管理欄。單擊頁面右上角的選項圖示 ( ),然後單擊全屏模式選項,可以關閉全屏模式值得注意的是,本指南以下區塊編輯器部分中的所有螢幕截圖都是在關閉全屏模式的情況下拍攝的,因為這是大多數 WordPress 使用者所習慣的。塊工具欄更多選項

也可以看看:

回顧過去的修訂

回顧過去的修訂

當您編輯文章或頁面時,該特定文章或頁面的修訂數量會顯示在 「設定」 側欄的 「文章/頁面」 選項卡上 (如果有) 。

單擊摘要面板下方的修訂連結可瀏覽當前文章或頁面的各種修訂。

區塊編輯器修訂

使用頁面頂部的滑塊或單擊 「上一個」 和「下一個」按鈕來瀏覽各種文章或頁面修訂。

已刪除的內容將顯示為紅色,已新增的內容將顯示為綠色。如果存在深紅色和/或深綠色陰影的內容,則它會突出顯示已刪除或新增的特定內容。如果段落或行只是淺紅色和/或淺綠色,則整個段落或行都受到更改的影響。

您還可以透過單擊頁面頂部的比較任意兩個修訂版覈取方塊來比較兩個不同的修訂版。

如果您想恢復以前的版本,請單擊 「恢復此版本」按鈕。

區塊編輯器修訂

上一篇文章區塊

上一篇文章區塊

上一篇文章塊將顯示當前文章之前的文章的導航連結。此塊對於文章而不是頁面更有用,因為它們通常按時間順序顯示。雖然您可以將此塊新增到正常的頁面或文章內容中,但使用完整站點編輯器將其新增到主題模板中會更有用。該塊生成的連結通常顯示在單個文章的底部,允許您導航到上一篇文章。它與您通常在部落格存檔主頁 (即顯示當前文章列表的頁面) 上看到的導航連結不同。

新增該塊後,「設定」 側欄中會提供更多選項。單擊「轉換到下一篇文章」圖示 ( ),您可以將此塊與「下一篇文章塊」轉換到下一篇文章切換,後者顯示下一篇文章的連結。

您可以更改文字和背景顏色,還可以更改各種版式設定,例如字型大小、外觀、裝飾、行高、字母大小寫和字母間距。

單擊「上一個: 」 佔位符可讓您輸入將出現在連結前面的標籤。使用 「將標籤包含為連結的一部分」開關,將在連結中包含標籤文字。您還可以透過選擇箭頭切換按鈕之一在連結前顯示箭頭圖示

該塊的各種選項位於 「設定」 側欄中單獨的 「設定」( ) 和 「樣式」( ) 選項卡中。

上一篇文章塊

行區塊

行區塊

允許您在一行中新增多個塊。行塊與堆疊塊和組塊類似,因為它允許將多個塊分組在一起。

新增行塊後,您可以將所需的任何塊新增到此塊中,例如標題、段落或影象塊,僅舉幾例。

將內容新增到塊後,設定側邊欄中提供了更多選項,例如能夠選擇塊的對齊方式型別,以及是否允許它們換行多行。

您還可以更改文字和背景顏色,以及塊周圍的填充量。

該塊的各種選項位於 「設定」 側欄中單獨的 「設定」( ) 和 「樣式」( ) 選項卡中。

排塊

評論區塊

評論區塊

評論查詢迴圈塊允許您顯示針對單個部落格文章釋出的評論。雖然您可以將此塊新增到正常的頁面或文章內容中,但使用完整站點編輯器將其新增到主題模板中會更有用。

新增塊後,設定側欄中提供了更多選項,允許您更改文字和背景顏色,以及各種版式設定,例如字型大小、外觀、裝飾、行高、字母大小寫和字母間距。

該塊的各種選項位於 「設定」 側欄中單獨的 「設定」( ) 和 「樣式」( ) 選項卡中。

評論區

檔案區塊

檔案區塊

檔案允許您使用可選按鈕建立指向您上傳的媒體檔案之一 (例如 PDF 或 Word 文件) 的文字連結。插入檔案塊後,單擊「上傳」按鈕將新檔案上傳到您的媒體庫,或單擊 「媒體庫」按鈕顯示您的媒體庫並選擇您之前上傳的現有檔案。

將檔案新增到塊後,「設定」 側欄中會提供更多選項。您可以選擇連結到媒體檔案本身,或連結到該檔案的 WordPress 附件頁面。您還可以選擇在新選項卡中開啟連結,並選擇顯示帶有文字連結的下載按鈕。您可以透過單擊按鈕並輸入新文字來更改按鈕上的文字。

檔案塊

頭像區塊

頭像區塊

頭像允許您將文章/頁面作者或其他選定使用者的頭像影象插入到您的內容中。雖然您可以將此塊新增到正常的頁面或文章內容中,但使用完整站點編輯器將其新增到主題模板中會更有用。

新增該塊後,「設定」 側欄中會提供更多選項。您可以使用 「影象大小」滑塊選擇影象的大小,還可以使用 「連結到使用者配置檔案」 開關將該影象連結到使用者配置檔案頁面。

預設情況下,該塊將顯示文章/頁面作者的頭像。使用者輸入欄位允許您選擇站點上的其他使用者。如果此欄位為空,則影象預設為文章/頁面作者。

使用塊工具欄中的選項,您可以更改影象的對齊方式,還可以應用雙色調濾鏡。

該塊的各種選項位於 「設定」 側欄中單獨的 「設定」( ) 和 「樣式」( ) 選項卡中。

頭像塊

區塊編輯器工具

區塊編輯器工具

區塊編輯器提供了完全重新設計的編輯體驗,以及一組用於編輯頁面的新工具。雖然編輯介面是全新的,但您會發現許多您已經熟悉的元素。

頁面頂部是主區塊編輯器工具欄這個新工具欄包含許多新圖示和一些熟悉的舊圖示:

區塊編輯器工具

區塊編輯器工具欄 - 新增塊 新增塊圖示用於將新塊插入到您的內容中。單擊此圖示將彈出一個小面板,您可以透過該面板訪問可以插入的所有不同型別的塊。
區塊編輯器工具欄 - 工具 「工具按鈕提供了用於塊選擇和編輯的不同互動。使用選擇工具幫助選擇塊。選擇塊後,按 Enter 鍵返回到編輯工具。
區塊編輯器工具欄 - 撤消 撤消圖示允許您撤消最近的更改。
區塊編輯器工具欄 - 重做 重做按鈕允許您重做最近的更改。
區塊編輯器工具欄 - 塊導航 按鈕允許您使用 「列表檢視」選項卡檢視內容中所有塊的列表,以及使用 「大綱」選項卡檢視有關頁面內容的資訊。後一個選項將顯示您的內容包含多少個字元和單詞、內容中的塊型別以及閱讀內容的大致時間
區塊編輯器工具欄 - 切換到 Daft 「切換到草稿」按鈕僅在您的頁面/文章釋出後才會出現。單擊此按鈕將取消釋出您的頁面/文章並將其恢復為草稿模式。雖然此按鈕過去顯示在區塊編輯器工具欄中,但現在顯示在設定側欄內的摘要面板中。
區塊編輯器工具欄 - 儲存草稿 「儲存草稿」按鈕允許您儲存頁面,並且僅在您的頁面/文章尚未釋出時才會出現。
區塊編輯器工具欄 - 預覽 預覽」按鈕將允許您預覽頁面。單擊此按鈕會提供多個選項。您可以在桌面檢視 (預設) 、平板電腦移動檢視中預覽頁面您還可以透過選擇 「在新選項卡中預覽」 選項在新的瀏覽器選項卡/視窗中預覽頁面。
區塊編輯器工具欄 - 釋出 「釋出」按鈕允許您釋出您的頁面/文章。與以前版本的 WordPress 不同,釋出頁面現在只需兩個步驟。第一次單擊 「釋出」 按鈕後,您會看到一個新面板,其中包含確認訊息和另一個 「釋出」 按鈕。此面板還允許您更改內容的可見性以及釋出日期和時間。單擊第二個 「釋出」 按鈕將實際釋出您的內容並使其在您的網站上釋出。
區塊編輯器工具欄 - 更新 If your content is published, then the Publish button will be replaced with an Update button. Just like in previous versions of WordPress, clicking the Update button saves your changes.
區塊編輯器工具欄 - 設定側欄 The Settings Sidebar shows all the settings for your Page/Post including elements like adding Featured Images, specifying your Categories and Tags on Posts, or selecting Page/Post templates. Clicking the Settings icon will show and hide the settings sidebar.
區塊編輯器工具欄 - 更多選項 The last icon in the Toolbar is the Show more tools & options icon. This button provides access to a number of adhoc settings. You can turn on/off the Top Toolbar and Spotlight Mode. You can also display your content using the Visual Editor (the default mode for adding blocks) or using the Code Editor, which allows you to edit the underlying html. You can also re-show the Block Editor tips, view a list of the editor keyboard shortcuts and also copy all the content in your page with a single click.

 

A word of caution, with the new Code Editor features. The Block Editor saves your content in a slightly different manner than the old (TinyMCE) Classic Editor. Previously, WordPress would save your content as a simple chunk of HTML. Whilst there is still HTML in your underlying content, the new Block editor also wraps each individual section of your content within HTML comment tags. It uses these comment tags to differentiate the various types of blocks your content is contained within. So, while you can still edit your HTML using the Code Editor view within the Block Editor, please take extra caution not to remove or change any of the HTML comments surrounding your content. Doing so, will cause one or more of your blocks to not display correctly once you switch back to the Visual Editor mode, and may possibly even cause you to lose content. If you feel you do need to edit the Block HTML, it's safer to use the 『Edit as HTML' option under the 『More Options' icon for each individual Block, than using the 『Code Editor' option under the 『Show more tools & options' icon at the top of the page.

 

Underneath the Block Editor Toolbar you'll find your content area. This is where you'll add all your content, comprised of various types of blocks. Each block that you add into your content area, will have its own toolbar, and will either display just above the block (by default) or in the main Block Editor Toolbar at the top of the screen (if the Top Toolbar option is turned on).

每個塊都有一個不同的工具欄,該工具欄中的圖示將取決於塊包含的內容型別。例如,段落塊上的工具欄與標題塊上的工具欄不同,因為它們包含不同型別的內容。單擊或選擇一個塊後,您甚至可能會發現可以在 「設定」 側欄中設定額外的選項。同樣,這將取決於您選擇的單個塊。

區塊編輯器工具

螢幕右側內容區域旁邊是 「設定側邊欄」設定側邊欄包含您當前正在編輯的整個頁面/文章的設定,以及當前所選塊的設定。

區塊編輯器工具

在設定側邊欄的頂部有兩個選項卡可供選擇。第一個選項卡將顯示PagePost,具體取決於您是編輯頁面還是文章,第二個選項卡將顯示Block頁面/文章選項卡顯示您當前正在編輯的單個頁面/文章的設定。這可能包括設定特色影象、選擇類別和標籤 (編輯文章時) 或選擇頁面/文章模板等。

選項卡顯示當前所選塊的設定。這些設定將根據當前選擇的塊的型別而變化,並且某些塊比其他塊具有更多的設定。例如,段落塊具有用於更改文字大小、是否顯示首字下沉的設定,以及在某些主題中用於文字顏色和背景顏色的設定。另一方面,標題塊僅具有更改文字大小和顏色的設定。

最後更新時間:2023 年 9 月 18 日


,

文章列表區塊

文章列表區塊

文章列表塊允許您插入最近文章的列表。選擇此塊實際上會將查詢迴圈塊的預自定義版本插入到您的內容中,這就是它在設定側欄中顯示 「查詢迴圈」 的原因。雖然您可以將此塊新增到正常的頁面或文章內容中,但使用完整站點編輯器將其新增到主題模板中會更有用。

首次插入文章列表塊時,系統會提示您從預製模式中進行選擇或從空白開始。

文章列表塊

如果您選擇從預製圖案開始,單擊 「選擇」按鈕將顯示一個彈窗,您可以在其中選擇用於顯示內容的佈局圖案。只需滾動瀏覽可用的佈局模式列表,然後單擊您喜歡的佈局即可選擇它。您還可以使用彈窗頂部的搜尋欄位來搜尋您喜歡的佈局。

單擊您喜歡的佈局後,適當的塊將被插入到您的內容中。然後,您還可以訪問塊工具欄和設定側欄中的更多選項。

文章列表塊

您還可以在首次插入文章列表塊後單擊開始空白按鈕。然後,您將看到一系列可供選擇的佈局變體。只需單擊相應的圖示即可選擇一個。然後,適當的塊將被插入到您的內容中。

文章列表塊

確認文章列表塊使用的佈局後,您可以使用塊工具欄上的顯示設定( ) 圖示來更改每頁顯示的文章數、設定要跳過的文章數 (如果有)查詢迴圈塊顯示設定,並限制分頁中顯示的文章數量

設定側欄中的選項還允許您調整為檢索文章而執行的 WordPress 查詢。您可以選擇文章型別 (例如,如果您使用的是 WooCommerce,則顯示文章、頁面,甚至產品) 。您還可以選擇顯示文章的順序 (例如,最新的在前、最舊的在前、按字母順序) 、選擇是否包含 「粘性」 文章,還可以新增過濾器,例如類別、標籤、作者或關鍵字。

值得注意的是,文章列表塊 (同樣,查詢迴圈塊) 將在主查詢迴圈塊中插入多個塊。在能夠調整查詢迴圈的所有設定之前,您需要選擇最外面的查詢迴圈塊。選擇此塊將顯示塊工具欄和設定側欄中的所有查詢設定。如果您發現很難選擇查詢迴圈塊,請嘗試使用頁面底部顯示的塊麵包屑來選擇該塊。只要您選擇了一個塊,麵包屑就會出現,並將列出當前所選塊的所有父塊。您還可以使用編輯器頂部工具欄中的列表檢視圖示 ( ),幫助您選擇所需的確切塊。區塊編輯器工具欄 - 列表檢視

文章列表塊