CSS-Tricks 的Gutenberg 之年。去年年底，我們定下了這個目標(biāo)。我們的進展比預(yù)期快得多，所有新內(nèi)容都在塊編輯器1中創(chuàng)作，現(xiàn)在所有內(nèi)容都啟用了塊編輯器。這意味著當(dāng)我們打開大多數(shù)舊帖子時，我們會看到所有內(nèi)容都在“經(jīng)典”塊中。它看起來像這樣：

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

我最擔(dān)心的問題

將經(jīng)典塊轉(zhuǎn)換為新塊就像選擇經(jīng)典塊並選擇“轉(zhuǎn)換為塊”選項一樣簡單。

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

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

基本塊轉(zhuǎn)換

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

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

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

它可能看起來像這樣：

 <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>

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

更神奇的東西：來自原始代碼的塊轉(zhuǎn)換

這是舊內(nèi)容的真相時刻：

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

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

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

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

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

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

 <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函數(shù)運行於它找到的每個HTML 節(jié)點上，因此這是在您需要的情況下從該函數(shù)返回true的絕佳機會。請注意，在上面的代碼中，我特別是在尋找看起來像

<code>的HTML。當(dāng)匹配時，轉(zhuǎn)換運行，我可以返回一個`createBlock` 調(diào)用，該調(diào)用傳入我使用JavaScript 從節(jié)點中提取的數(shù)據(jù)和內(nèi)容。</code>另一個示例：粘貼URL


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



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



<p>這是一個看起來像這樣的“from”轉(zhuǎn)換：</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>所以……</h3>


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



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



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



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




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

以上是WordPress塊變換的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！