1. 首页
  2. css

CSSWordPress块转换

对我们来说,今年是古腾堡的一年。事实上,这是我们去年底定下的目标。我们比我想象的更进一步,在块编辑器¹中编写所有新的内容,现在为所有内容启用块编辑器。这意味着当我们打开大多数旧帖子时,我们会看到\”经典\”块中的所有内容。它看起来是这样的:在我们使用块编辑器之前,一篇关于CSS技巧的文章。
文章的全部内容都在一个块中,因此不完全使用块编辑器。它仍然是\”可视化的\”,就像块编辑器,但是它更像是使用TinyMCE的旧的可视化编辑器。我从来没有用过,因为它会以我不喜欢的方式强行破坏HTML。这是我担心的第一件事
将经典块转换为新块就像选择经典块并选择\”转换为块\”选项一样简单。选择该选项和一个块变为多个块。
当我们从\”转换为块\”选项告诉块编辑器如何处理块化旧内容时,它是如何处理的?如果在转换过程中完全搞砸了内容怎么办?我们能转换吗?
答案:它做得非常好。但是…仍然有一些问题。不是\”bug\”,而是我们在旧内容中有自定义HTML,它不知道如何处理它——更不用说如何将它转换成我们希望的块。有办法!基本块变换
这就是\”块变换\”概念的由来。全部(大部分?)本机块具有\”to\”和\”from\”转换。您可能已经熟悉了它在UI中的表现方式。就像一个段落可以转换成一个引用,反之亦然。下面是这一段的超级元截图:
这些转换不是魔法,它们是非常明确的编码。注册块时,指定变换。假设您正在注册自己的自定义代码块。您需要确保您可以将它…
– 从和转换为默认的内置代码块,可能还有一些其他可能有用的代码块。
– 返回到内置代码块。
看起来像:
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>
Those are transforms to and from other blocks. Fortunately, this is a pretty simple block where we\”re just shuffling the content左右。更复杂的块可能需要传递更多的数据,但我还没有处理这个问题。更神奇的东西:从原始代码进行块转换
这是旧内容的关键时刻:转换为块选项。
在这种情况下,块不是从其他块创建的,而是从原始代码创建的。从字面上讲,HTML正在被观察,并且正在选择从HTML的块中生成什么块。这是令人惊奇的地方,块编辑器在选择方面做得如此出色,也可能出现问题,它可能会失败,做出错误的块选择,或损坏内容。
在我们以前的内容中,post中的一个代码块(一个非常重要的东西)看起来是这样的:
cool`;
有时块转换可以在这些代码块上完成,将其转换为本机代码块。但是有很多问题:
1. 我不想要一个本地代码块。我想把它转换成我们自己的新代码块。
2. 我需要这些属性中的一些信息来通知新块的设置,比如它是什么类型的代码。
3. 旧代码块中的HTML没有转义,我需要它不要被转义阻塞。
我这里没有所有的答案,因为这是一个不断发展的过程,但我现在确实有一些块变换,它们工作得很好。以下是\”原始\”转换(与\”块\”转换相反)的样子:
registerBlockType(\”my/code-block\”, {title: __(\”My Code Block\”),// …transforms: {from: [{type: \”block\”,priority: 7,// …},{type: \”raw\”,priority: 8,isMatch: === \”PRE\” &&node.children.length === 1 &&node.firstChild.nodeName === \”CODE\”,transform: function (node) {let = node.querySelector(\”code\”);let = \”css\”;}if (pre.getAttribute(\”rel\”) === \”CSS\”) = \”javascript\”;}if (code.classList.contains(\”language-javascript\”))>
That isMatch函数在它找到的HTML中的每个节点上运行,因此这是一个在特殊情况下返回true的好机会。请注意,在上面的代码中,我特别寻找类似于的HTML。当匹配时,转换运行,我可以返回一个createBlock调用,该调用通过JavaScript传入我从节点提取的数据和内容。另一个例子:粘贴URL
\”原始\”转换不仅发生在\”转换为块\”时,还发生在将内容粘贴到块编辑器时。你以前可能经历过这种情况。假设您从某处复制了一些表标记并将其粘贴到块编辑器中——它可能会粘贴为一个表。YouTube的URL可能会粘贴到嵌入文件中。这就是为什么从Word文档复制/粘贴之类的东西往往与块编辑器配合得很好的原因。

CSSWordPress块转换 为WP2原创文章,链接:https://www.wp2.cn/css/csswordpress%e5%9d%97%e8%bd%ac%e6%8d%a2/