6.5中的块元数据viewScriptModule字段

这个 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到单一一致的API和用户体验中。 美国石油学会美国石油学会 API或应用程序编程接口是一种软件中介,允许程序相互交互并以有限的、明确定义的方式共享数据。现在认识到查看脚本模块中的字段块.json元数据。这为脚本模块提供了类似于脚本和查看脚本字段当前提供。中声明的脚本模块查看脚本模块在前端呈现块以供查看时,将进入队列。

这个新字段很重要,这样开发人员可以在前端使用脚本模块。脚本不能依赖于脚本模块,因此需要使用脚本模块,如Interactivity API(通过@wordpress/互动脚本模块).

阅读更多信息:6.5中的块元数据viewScriptModule字段

本文假设您基本了解脚本模块API,在此处阅读更多信息.

入门

您可以生成一个简单的块插件插件 插件是一个包含一组功能的软件,可以添加到WordPress网站。他们可以扩展功能或为WordPress网站添加新功能。WordPress插件是用PHP编程语言编写的,并与WordPress无缝集成。这些可以在WordPress.org插件目录中免费https://wordpress.org/插件/或者可以是第三方基于成本的插件使用@wordpress/create-block交互式模板包裹:

npx@wordpress/create-block--模板@wordpress/create-block交互式模板

这将从使用查看脚本模块.

用法

添加一个查看脚本模块中元数据的字段块.json指向脚本模块的。

以下是一个简单的插件的外观:

我的插件/
├── 建造/
│ ├── 块.json
│ ├── …剪刀…
│ ├── 查看资产.php
│ └── 视图.js
└── 插件.php

中唯一的代码插件.php文件调用寄存器块类型对于块:

add_action('init',function(){
register_block_type(__DIR__.'/build/block.json');
} );

中的相关元数据build/block.json版本包括查看脚本模块:

{
“…狙击…”:“…”,
“viewScriptModule”:“文件:./view.js”
}

构建/view.js是依赖于的脚本模块@wordpress/互动:

从“@wordpress/interactivity”导入{getContext,store};

商店(“myplugin/demo”{
增量(){
getContext().val+=1;
},
减量(){
getContext().val-=1;
},
} );

模块资产文件构建/view.asset.php声明视图脚本模块的依赖项@wordpress/互动:

<?php返回数组(
“依赖关系”=>数组(“@wordpress/interactivity”),
);

REST APIREST API REST API是RESTful Application Program Interface(API)的缩写,它使用HTTP请求获取、输出、POST和删除数据。这是应用程序前端(想想“手机应用程序”或“网站”)如何与数据存储进行通信(想想“数据库”或“文件系统”)https://developer.wordpress.org/rest-api/.

块类型REST API中添加了一个新字段view_script_module_ids。该字段是与块类型关联的视图脚本模块ID的列表。

工具

这个@wordpress/scripts包是标准的编译方式JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言,常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时,JS在用户浏览器中执行。https://www.javascript.com/.用于WordPress的资产。构建和启动脚本中添加了实验功能,以支持编译模块。可以使用启用--实验模块在命令行上,例如:

wp-scripts构建——实验模块

使用编写模块编译脚本@wordpress/脚本此时不支持使用您自己的webpack文件。

上面的示例插件是使用@wordpress/脚本.

@wordpress/dependency-extraction-webpack-plugin语言已更新以生成脚本模块资产文件。无需特殊配置。有关详细信息,请参阅程序包文档.

相关链接

道具

#6-5,#开发说明,#开发注释-6-5