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

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

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

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

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

答案是：它做得相當(dāng)好。但是……仍然存在問(wèn)題。不是“錯(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)容。更復(fù)雜的塊可能需要傳遞更多數(shù)據(jù)，但我還沒(méi)有處理過(guò)這種情況。

更神奇的東西：來(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 = `<div>cool</div>`;
</code></code>

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

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

我在這里并沒(méi)有所有答案，因?yàn)檫@是一個(gè)不斷發(fā)展的過(guò)程，但我確實(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)容。


<h3>另一個(gè)示例：粘貼 URL</h3>


<p>“原始”轉(zhuǎn)換不僅發(fā)生在您“轉(zhuǎn)換為塊”時(shí)。當(dāng)您將內(nèi)容粘貼到塊編輯器中時(shí)，也會(huì)發(fā)生這種情況。您可能之前已經(jīng)體驗(yàn)過(guò)這種情況。假設(shè)您從某處復(fù)制了一些表格標(biāo)記并將其粘貼到塊編輯器中——它可能會(huì)粘貼為表格。YouTube URL 可能會(huì)粘貼到嵌入中。這種事情就是為什么從 Word 文檔等復(fù)制/粘貼往往與塊編輯器配合得如此好。</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)寫(xiě)作和構(gòu)建內(nèi)容是一種樂(lè)趣。我喜歡 Justin Tadlock 的說(shuō)法：</p>



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



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




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

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