WordPress塊變換

CSS-Tricks 的Gutenberg 之年。去年年底，我們定下了這個目標。我們的進展比預期快得多，所有新內容都在塊編輯器¹中創作，現在所有內容都啟用了塊編輯器。這意味著當我們打開大多數舊帖子時，我們會看到所有內容都在“經典”塊中。它看起來像這樣：

帖子的全部內容都在單個塊中，因此並沒有真正利用塊編輯器。它仍然是“可視的”，就像塊編輯器一樣，但更像是使用TinyMCE 的舊可視編輯器。我從未使用過它，因為它以我不喜歡的方式強制破壞了HTML。

我最擔心的問題

將經典塊轉換為新塊就像選擇經典塊並選擇“轉換為塊”選項一樣簡單。

當我們從“轉換為塊”選項中告訴它這樣做時，塊編輯器如何處理舊內容的塊化？如果轉換過程中內容完全被破壞了怎麼辦？我們能夠切換嗎？

答案是：它做得相當好。但是……仍然存在問題。不是“錯誤”，而是我們舊內容中包含自定義HTML 的情況，它不知道該如何處理——更不用說如何將其轉換為我們希望的塊了。有一種方法！

基本塊轉換

這就是“塊轉換”這個想法的由來。所有（好吧，大多數？）原生塊都有“到”和“從”轉換。您可能已經熟悉它在UI 中的表現方式。例如，段落可以轉換為引用，反之亦然。這是一個關於本段的超級元截圖：

這些轉換並非魔法；它們是明確編碼的。註冊塊時，您會指定轉換。假設您正在註冊您自己的自定義代碼塊。您需要確保您可以轉換它……

• 從和到默認內置代碼塊，以及可能還有其他一些可能有用的塊。
• 返回到內置代碼塊。

它可能看起來像這樣：

 <code>registerBlockType("my/code-block", { title: __("My Code Block"), ... transforms: { from: [ { type: "block", priority: 7, blocks: ["core/code", "core/paragraph", "core/preformatted"], transform: function (attributes) { return createBlock("my/code-block", { content: attributes.content, }); }, }, ], to: [ { type: "block", blocks: ["core/code"], transform: ({ content }) => createBlock("core/code", { content }), }, ], ...</code>

這些是到其他塊和從其他塊的轉換。幸運的是，這是一個非常簡單的塊，我們只是在四處移動內容。更複雜的塊可能需要傳遞更多數據，但我還沒有處理過這種情況。

更神奇的東西：來自原始代碼的塊轉換

這是舊內容的真相時刻：

在這種情況下，塊的創建不是來自其他塊，而是來自原始代碼。從字面上看，HTML 正在被查看，並且正在做出關於從HTML 塊創建哪些塊的決定。這就是塊編輯器在選擇方面做得如此出色的地方，也是事情可能出錯、做出錯誤的塊選擇或破壞內容的地方。

在我們的舊內容中，帖子中的代碼塊（非常重要的事情）看起來像這樣：

 <code><code markup="tt">let html = `</code></code> cool `;

有時塊轉換會對這些塊進行處理，將其轉換為原生代碼塊。但存在一些問題：

1. 我不想要原生代碼塊。我希望將其轉換為我們自己的新代碼塊（此處有博客文章）。
2. 我需要這些屬性中的一些信息來告知新塊的設置，例如代碼的類型。
3. 我們舊代碼塊中的HTML未轉義，我需要它不要被卡住。

我在這裡並沒有所有答案，因為這是一個不斷發展的過程，但我確實已經實現了一些現在運行得很好的塊轉換。以下是“原始”轉換（與“塊”轉換相反）的樣子：

 <code>registerBlockType("my/code-block", { title: __("My Code Block"), // ... transforms: { from: [ { type: "block", priority: 7, // ... }, { type: "raw", priority: 8, isMatch: (node) => node.nodeName === "PRE" && node.children.length === 1 && node.firstChild.nodeName === "CODE", transform: function (node) { let pre = node; let code = node.querySelector("code"); let codeType = "html"; if (pre.classList.contains("language-css")) { codeType = "css"; } if (pre.getAttribute("rel") === "CSS") { codeType = "css"; } if (pre.classList.contains("language-javascript")) { codeType = "javascript"; } if (code.classList.contains("language-javascript")) { codeType = "javascript"; } // ... other data wrangling... return createBlock("csstricks/code-block", { content: code.innerHTML, codeType: codeType, }); }, }, ], to: [ // ... ], // ... }</code>

isMatch函數運行於它找到的每個HTML 節點上，因此這是在您需要的情況下從該函數返回true的絕佳機會。請注意，在上面的代碼中，我特別是在尋找看起來像

<code>的HTML。当匹配时，转换运行，我可以返回一个`createBlock` 调用，该调用传入我使用JavaScript 从节点中提取的数据和内容。</code>另一個示例：粘貼URL


<p>“原始”轉換不僅發生在您“轉換為塊”時。當您將內容粘貼到塊編輯器中時，也會發生這種情況。您可能之前已經體驗過這種情況。假設您從某處複製了一些表格標記並將其粘貼到塊編輯器中——它可能會粘貼為表格。 YouTube URL 可能會粘貼到嵌入中。這種事情就是為什麼從Word 文檔等複制/粘貼往往與塊編輯器配合得如此好。</p>



<p>假設您希望在將某種類型的URL 粘貼到編輯器中時執行某些特殊行為。這就是我使用自定義CodePen Embed 塊的情況。我希望如果粘貼codepen.io URL，它將使用此自定義塊，而不是默認嵌入。</p>



<p>這是一個看起來像這樣的“from”轉換：</p>



{
  type: "raw",
  priority: 8, // higher number to beat out default
  isMatch: (node) =>
    node.nodeName === "P" &&
    node.innerText.startsWith("https://codepen.io/"),

  transform: function (node) {
    return createBlock("cp/codepen-gutenberg-embed-block", {
      penURL: node.innerText,
      penID: getPenID(node.innerText), // helper function
    });
  },
}


<h3 id="所以">所以……</h3>


<p>它很凌亂嗎？有點。但它功能強大，滿足您的需求。如果您有一個包含大量定制HTML、短代碼等內容的舊網站，那麼進入塊轉換是唯一的出路。</p>



<p>我很高興能夠掌握這一點，因為我現在非常喜歡塊編輯器。用它來寫作和構建內容是一種樂趣。我喜歡Justin Tadlock 的說法：</p>



<blockquote><p>塊系統不會消失。 WordPress 已經超越了我們應該將塊編輯器視為單獨實體的階段。它是WordPress 不可或缺的一部分，最終將觸及編輯屏幕之外的更多領域。</p></blockquote>



<p>它會一直存在。擁抱塊編輯器並使其符合我們的意願是關鍵。</p>




<ol><li>我們到底稱它為什麼呢？ “Gutenberg”似乎不再合適了。感覺它會逐漸消失，即使它的開發仍在Gutenberg 插件中進行。我認為我只會稱它為“塊編輯器”，除非特別指代該插件。</li></ol>

以上是WordPress塊變換的詳細內容。更多資訊請關注PHP中文網其他相關文章！