只是更新2021的答案。您需要熟悉节点和可选纱线（个人喜好，但通常可以npm run x 对于yarn x 脚本）。
使用初始化文件夹yarn init 它会帮助你解决一些问题。通常，项目名称与插件或主题名称相同，版本与插件或主题版本相同。之后你会得到package.json. 现在添加包。
在命令提示符/终端中，我们要yarn add @wordpress/scripts @wordpress/data @wordpress/block-editor @wordpress/blocks. 如果您想访问React组件，还可以@wordpress/element 您可以加载项。
接下来，您需要创建作为编译起点的源文件。您可以通过导入使用一个JS文件或多个JS文件。通常，我会假设多个，以避免将来的重构。
对于露齿而笑的人，让我们把我们的切入点js/src/blocks.js, 相对于项目的根。在这个文件中，让我们导入registerBlockType 像这样：
import { registerBlockType } from \'@wordpress/blocks\';
接下来，让我们为这个SEO模块创建目录
js/src/seo/. 这些可以是任何东西，我只是顺其自然。
我们将返回该文件夹，但首先让我们完成这些块。js。
以块的形式导入该目录的导出。js。
import * as seo from \'./seo\';
正如我前面提到的在一个项目中支持多个块，我们将构建一个数组并在每次导入上运行registerBlockType。
[ seo ].forEach( ( block ) => {
if ( ! block ) {
return;
}
const { settings, name } = block;
registerBlockType( name, settings );
} );
现在让我们进入实际的块本身。在seo文件夹内创建
index.js 和
block.json 文件。
内部block.json 要引用的文件https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/, 但要开始，您至少需要以下几点：
"apiVersion": 2,
"name": "namespace/seo",
"title": "Your SEO Block",
"category": "widgets",
"description": "SEO Classic Port",
"textdomain": "namespace"
我可以连续几天谈论街区。json文件。但这会让你开始。
接下来是索引。js文件。您需要使用以下导入启动文件：
import { useBlockProps } from \'@wordpress/block-editor\';
import { useSelect } from \'@wordpress/data\';
import metadata from \'./block.json\';
现在让我们使用它们。
const { name } = metadata;
export { name }
export const settings = {
...metadata,
edit: function() {
const { title, content } = useSelect(
( select ) => {
return {
title: select( \'core/editor\' ).getEditedPostAttribute( \'title\' ),
content: select( \'core/editor\' ).getEditedPostContent(),
}
},
[]
);
return (
<div { ...useBlockProps() }>
<div>Title: { title }</div>
<div>Content: { content }</div>
</div>
);
},
save: () => null,
};
我们正在导出中引用的名称和设置对象
blocks.js 在上面还有，我们现在什么都没做，只是在保存。大多数时候，我都会使用这些“；“快速块”；编辑一段post meta，因此返回null是完全有效的。
我们只需要再多走两步就可以把一切都解决了。添加我们的块。js到包脚本并注册脚本（如果导入任何css或sass，还可以选择任何样式）。
首先是包脚本。添加以下内容：
"scripts": {
"build": "wp-scripts build ./js/src/blocks.js --output-path=./js/build",
"start": "wp-scripts start ./js/src/blocks.js --output-path=./js/build"
}
使用这些脚本，运行
yarn start 将在src/build文件夹中创建已编译JS的开发副本。同样地
yarn build 将创建一个小型生产就绪编译。
最后，我们需要将这些文件排队。通常我们会使用admin_enqueue_scripts 然而，您可以使用此块将公共js排队。所以我喜欢使用init。使用init的另一个原因，我们将使用register_block_type_from_metadata.
将其包含在插件文件或函数中。php（主题）。为了详细起见，我假设使用插件。您需要将插件引用函数更改为主题友好的函数。
function register_block_files() {
$asset_file = include plugin_dir_path( __FILE__ ) . \'js/build/blocks.asset.php\';
wp_register_script(
\'your-blocks\',
plugins_url( \'js/build/blocks.js\', __FILE__ ),
$asset_file[\'dependencies\'],
$asset_file[\'version\'],
false
);
$folders = array(
\'seo\',
);
foreach ( $folders as $folder ) {
register_block_type_from_metadata(
plugin_dir_path( __FILE__ ) . \'js/src/\' . $folder . \'/block.json\',
array(
\'editor_script\' => \'your-blocks\',
)
);
}
}
add_action( \'init\', \'register_block_files\' );
这应该就是全部！您将创建一个加载到小部件下的块，并将打印标题：文章标题，以及内容：文章的html内容。显然，您可以在编辑功能中执行您想要的操作。通常，我将保存和导入拆分为单独的文件并导入它们。
