使用块属性插件添加自定义 HTML 属性

本周早些时候,websevendev 将其第四个 WordPress 插件发布到名为 Block Attributes 的官方目录中.该扩展允许最终用户向几乎任何块添加任何 HTML 属性.

WordPress 编辑器的一个问题是自定义 HTML 可能有点麻烦.块建立在一组标准上,标记应该满足这些期望.如果某些内容不适合,用户会看到无效标记警告.

但是,有时用户出于各种原因需要添加自定义 HTML 属性.例如,我有时需要添加一个自定义的 data- 属性来处理一些 JavaScript.因为我对代码非常了解,所以我通常通过自定义 HTML 块在这些情况下写出 HTML.但是,当需要添加次要属性时,这没有意义.

WordPress 目前允许用户向几乎每个块添加类和 ID(在管理中称为"HTML 锚点").它不允许直接输入 HTML 支持的许多其他可能的属性.普通用户的用例很少.

对于某些用户可以使用额外功能的场景,块属性插件非常方便.

该插件易于使用.它添加了一个名为"附加属性"的新字段;在每个块的高级选项卡下.用户可以添加属性名称,然后点击"添加";按钮.从那里,它创建一个用于添加属性值的新字段.

onclick 属性添加到 Button 块.

该插件还支持多个属性.添加一个后,您只需使用相同的输入字段即可创建更多.

对于我的第一次试驾,我添加了一个简单的 onclick 属性,其值为 myFunction().然后,我跳转到我的主题并通过 JavaScript 创建该函数以在控制台中输出一条简单的消息.引擎盖下的一切看起来都很好,而且奏效了.

我想到的大多数用例都是为了与 JavaScript 集成,这是一个可能的简单示例.开发人员可以使用这样的功能做更复杂的事情.这就是将这个插件保留在工具箱中的充分理由 —有时您需要扳手而不是锤子.

我还可以看到块属性用于在其他可能有助于可访问性的情况下添加 ARIA 属性.

用户可以通过插件的 style 属性将自定义样式添加到特定块.但是,除非这是一个简单的一次性,否则我建议不要这样做.对于更高级的用例,Blocks CSS 是一个更合适的插件.它有一个内置的语法荧光笔.另外,textarea 比单行文本输入框更友好.

我见过的块属性的唯一缺点是停用时.你会看到可怕的"这个块包含意外或无效的内容";如果您添加了任何自定义属性,则在编辑器中显示消息.编辑器设法解决了我在核心块中遇到的任何问题.

解决停用插件后的块警告.

停用插件不应影响前端输出.因为自定义属性是 HTML 标记的一部分,所以它们仍然存在.错误消息应该只显示在编辑器中.

6

发表回复