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

帖子的全部?jī)?nèi)容都在單個(gè)塊中，因此並沒有真正利用塊編輯器。它仍然是“可視的”，就像塊編輯器一樣，但更像是使用TinyMCE 的舊可視編輯器。我從未使用過它，因?yàn)樗晕也幌矚g的方式強(qiáng)制破壞了HTML。

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

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

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

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

基本塊轉(zhuǎn)換

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

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

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

它可能看起來(lá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)換。幸運(yùn)的是，這是一個(gè)非常簡(jiǎn)單的塊，我們只是在四處移動(dòng)內(nèi)容。更複雜的塊可能需要傳遞更多數(shù)據(jù)，但我還沒有處理過這種情況。

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

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

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

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

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

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

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

我在這裡並沒有所有答案，因?yàn)檫@是一個(gè)不斷發(fā)展的過程，但我確實(shí)已經(jīng)實(shí)現(xiàn)了一些現(xiàn)在運(yù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ù)運(yùn)行於它找到的每個(gè)HTML 節(jié)點(diǎn)上，因此這是在您需要的情況下從該函數(shù)返回true的絕佳機(jī)會(huì)。請(qǐng)注意，在上面的代碼中，我特別是在尋找看起來(lái)像

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


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



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



<p>這是一個(gè)看起來(lái)像這樣的“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>它很凌亂嗎？有點(diǎn)。但它功能強(qiáng)大，滿足您的需求。如果您有一個(gè)包含大量定制HTML、短代碼等內(nèi)容的舊網(wǎng)站，那麼進(jìn)入塊轉(zhuǎn)換是唯一的出路。</p>



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



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



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




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

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