如何在不触发验证错误的情况下开发自定义块

时间:2020-04-24 作者:Maciek Rek

我正在尝试为文本输入字段创建一个自定义块。

我设法创建了一个简单的块来生成<p> 标签当我更改它以生成<input> 标记并刷新我正在获取的块验证失败,唯一的解决方案是删除块并重新插入。

如果你在一个页面上有几个块就可以了,但我想知道如果我想用现有内容更新整个主题怎么办。似乎即使更改一个微不足道的属性,因为颜色也会导致验证错误。

  // existing
  save: (props) ->
     el RichText.Content,
        tagName: \'p\'
        value: props.attributes.content

  // updated
  save: (props) ->
     el RichText.Content,
        tagName: \'input\'
        value: props.attributes.content
修正和更新现有古腾堡区块的正确方法是什么?

2 个回复
SO网友:WebElaine

你有两个选择。

您发现的第一个问题是:更改块的底层代码,您将触发验证错误。好处是,您只包含了块当前所需的JS,因此它使代码尽可能轻量级。

第二个选项:添加deprecated code 进入你的街区。在这种情况下,您不仅可以按照现在的样子定义块,还可以定义块的过去(已弃用)版本,以便WP可以识别旧版本,并可以在每次编辑帖子时将其转换为新版本。好处是,无论何时更新save() 输出缺点是,更改输出和保留“不推荐”代码的次数越多,插件就越重。

SO网友:Maciek Rek

在阅读了WP手册指南后,我发现更好的解决方案可能是使用动态块,至少在开发阶段是这样。

[…]代码更新(HTML、CSS、JS)应立即显示在网站前端的块。例如,如果通过添加新类、添加HTML元素或以任何其他方式更改布局来更新块的结构,则使用动态块可确保这些更改立即应用于站点中该块的所有引用。[…]

https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

相关推荐