@wordpress/create-block 创建多个block框架教程

如果只转移的话带有package.json的话就 使用 npm install 进行安装

只需要安装一次npm的module模块：

npx @wordpress/create-block@latest my-custom-block –variant dynamic –namespace wptutorblocks

my-custom-block 是block的名字

–variant: 设置输出为render.php 设置dynamic : 不输出静态内容 输出动态内容

–namespace: 注册block时候的命名空间 比如注册block的时候是 wptutorblocks/my-custom-block。namespace就是block.json里面的name属性。title属性也需要同步更改。

点击确认就能安装模块

如果你要安装多个blocks， 只需要复制src里面的文件夹，更改为你需要的内容即可。不需要重新执行npx的命令来安装模块。

文件解释：

package.json： 最主要的执行命令的文件和加载dependencies依赖的文件

src里面的block.json： 创建字段的文件，block最基础的配置文件，配置字段和block基本信息等，里面配置设置了加载的js和渲染的页面，最新的话渲染适用render.php

src里面的index.js：注册block的功能性文件。 通过import引入其他js文件导出的模块

src里面的render.php: 执行加载编辑和前端输出界面的内容。

styles.css和view.js 执行的是前端的脚本，edit.js和editor.css 加载的是编辑页面的脚本。

通过package.json文件里的build或者start的命令通过wp-script执行webpack-copy-php加载build文件夹里面的blocks-manifest.php 转换成build文件夹中的成品block.

wp-scripts 会检测无限多的block并进行渲染。

主要的php文件里已经通过blocks-manifest.php 循环注册block （记得安装模块时候要安装latest版本）

$manifest_data = require DIR . ‘/build/blocks-manifest.php’;
foreach ( array_keys( $manifest_data ) as $block_type ) {
register_block_type( DIR . “/build/{$block_type}” );
}

Wp加载的都是build里面的成品Block 而不是src文件夹里的。

npm run build 执行一次production成品

npm start 监听

WP Script 官方介绍

@wordpress/scripts

CRETAE BLOCK 官方介绍

@wordpress/create-block