块API版本2

WordPress 5.6将附带一个新的 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到单一一致的API和用户体验中。 美国石油学会美国石油学会 API或应用程序编程接口是一种软件中介,允许程序相互交互并以有限的、明确定义的方式共享数据。版本,使块能够呈现自己的块包装器元素。这是减轻编辑器内容的DOM树的更大努力的一部分,以便它与保存的内容匹配(因此也是站点的前端)。这样做的最大好处是,如果编辑器中的标记相同,主题和插件可以更容易地设置块内容的样式。

启用API版本2

要使用新API,您必须选择进入API版本2。如果选择API版本2,还必须使用新API呈现自己的块包装元素。要选择,请设置api版本属性到2在上块配置对象.

registerBlockType(名称,{apiVersion:2});

使用块属性

使用API版本2时,必须使用新的使用块属性钩住木块编辑函数标记块的包装元素。钩子将插入启用块行为所需的属性和事件处理程序。要传递给块元素的任何属性都必须传递使用块属性并将返回的值分散到元素上。

从“@wordpress/block-editor”导入{useBlockProps};函数Edit({attributes}){const-blockProps=使用blockProps({className:someClassName,样式:{color:'blue'},} );return<p{…blockProps}>{attributes.content}</p>;}

如果希望使用元素ref,可以将一个传递给使用块属性.

从“@wordpress/block-editor”导入{useBlockProps};函数Edit({attributes}){const ref=useRef();const-blockProps=useBlockProps({ref});return<p{…blockProps}>{attributes.content}</p>;}

这个节约函数还必须使用钩子的save等效项,使用块属性。节约.

从“@wordpress/block-editor”导入{useBlockProps};函数Save({attributes}){const blockProps=使用blockProps.save({className:someClassName,样式:{color:'blue'},} );return<p{…blockProps}>{attributes.content}</p>;}

支持两个版本

如果使用API版本2,建议将至少需要 标题字段5.6所以你的插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以为你的WordPress网站扩展功能或添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPres无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件只有WordPress更新到5.6后才更新。如果用户使用旧版本的WordPress,他们也会明智地使用旧版本插件,希望鼓励他们更新WordPres。可以通过发布补丁补丁 一种特殊的文本文件,通过标识添加、删除和更改的文件和行来描述代码的更改。它也可以称为差异。补丁可以是应用到代码库进行测试。旧插件版本的版本,以防出现问题。

如果你真的想支持两个API版本,你需要为以前的版本注册一个不同的编辑和保存功能,要么完全加载不同的块注册文件,要么将WordPress版本号传递给JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言,常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时,JS在用户的浏览器中执行。https://www.javascript.com/.并在块注册时有条件地设置编辑和保存功能。

API版本1

块包装器元素由框架添加,内容为编辑在里面。

函数Edit({attributes}){返回(<p className={someClassName}style={{color:'blue'}}>{属性内容}</p>);}

API版本2

块包装器元素必须由编辑组件,带有使用块属性挂钩。

从“@wordpress/block-editor”导入{useBlockProps};函数Edit({attributes}){const blockProps=使用blockProps({className:someClassName,样式:{color:'blue'},} );return<p{…blockProps}>{attributes.content}</p>;}

#5-6,#块编辑器,#开发说明