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 = `<div>cool</div>`;
</code></code>

有时块转换会对这些块进行处理，将其转换为原生代码块。但存在一些问题：

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 从节点中提取的数据和内容。


<h3 id="另一个示例-粘贴-URL">另一个示例：粘贴 URL</h3>


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

以上是WordPress块变换的详细内容。更多信息请关注PHP中文网其他相关文章！