在为 WordPress 开发自定义块时，最佳实践是在插件中注册它们，而不是在主题中。这种策略可确保即使用户切换主题，您的块仍然可用。虽然可能存在将块直接嵌入主题的适当情况，但本指南专注于托管在插件中的块。具体而言，它详细介绍了由 create-block 工具生成的文件结构。
遵循 create-block 工具的结构并非强制要求，但它是一个可靠的参考。该工具生成的文件包含了块定义和注册所需的一切内容。遵循此结构有助于保持一致性，并确保您的块组织良好且易于维护。
<plugin-file>.php
在 WordPress 插件中创建块时，您会在插件的主 PHP 文件中在服务器上注册该块。对于使用 wp-scripts（WordPress 6.8+）构建的插件，推荐的做法是使用 wp_register_block_types_from_metadata_collection()，它通过一次调用注册由生成的 blocks-manifest.php 文件中的所有块。对于更简单的设置或旧版 WordPress 版本，您可以使用 register_block_type() 来注册单个块。有关所有可用注册方法的完整详细信息，请参阅 块的注册。
package.json
package.json 文件用于配置 Node.js 项目，这在技术上就是块插件。在此文件中，您定义块的 npm 依赖项以及用于本地开发的脚本。
src 文件夹
在标准项目中，src（源）文件夹包含原始未编译的代码，包括 JavaScript、CSS 和开发块所需的其他资源。这是您编写和编辑块的源代码的地方，利用现代 JavaScript 功能和 JSX 为 React 组件。
wp-scripts 提供的 构建过程 将从此文件夹获取文件，并在项目的 build 文件夹中生成生产就绪的文件。
block.json
block.json 文件包含 块的元数据，简化其在客户端和服务器端环境中的定义和注册。
此文件包括块名称、描述、属性、支持功能 等，以及负责块功能、外观和样式的必需文件的位置。
当应用构建过程时，block.json 文件和其他生成的文件会被移动到指定文件夹，通常是 build 文件夹。因此，block.json 中指定的文件路径指向这些处理后的打包版本的文件。
可以在 block.json 中定义的一些最重要的属性包括：
editorScript: 通常设置为从src/index.js构建的打包index.js文件的路径。style: 通常设置为从src/style.(css|scss|sass)构建的打包style-index.css文件的路径。editorStyle: 通常设置为从src/editor.(css|scss|sass)构建的打包index.css文件的路径。render: 通常设置为从src/render.php复制的打包render.php文件的路径。viewScript: 通常设置为从src/view.js构建的打包view.js文件的路径。
index.js
index.js 文件（或 block.json 的 editorScript 属性中定义的任何其他文件）是仅应在块编辑器中加载的 JavaScript 的入口点文件。它负责调用 registerBlockType 函数在客户端注册块，并通常导入 edit.js 和 save.js 文件以获取块注册所需的函数。
edit.js
edit.js 文件包含负责渲染块的编辑用户界面的 React 组件，允许用户在块编辑器中与块的内容和设置进行交互并对其进行自定义。此组件会传递给 index.js 文件中 registerBlockType 函数的 edit 属性。
save.js
save.js 导出返回保存到 WordPress 数据库的静态 HTML 标记的函数。此函数会传递给 index.js 文件中 registerBlockType 函数的 save 属性。
style.(css|scss|sass)
具有 .css、.scss 或 .sass 扩展名的 style 文件包含将在块编辑器和前端都加载的块的样式。在构建过程中，此文件会被转换为 style-index.css，通常使用 block.json 中的 style 属性定义。
wp-scripts 内部使用的 webpack 配置包括与 postcss-loader 和 sass-loader 链式连接的 css-loader，使其能够处理 CSS、SASS 或 SCSS 文件。有关更多信息，请查看 默认 webpack 配置。editor.(css|scss|sass)
具有 .css、.scss 或 .sass 扩展名的 editor 文件包含在块编辑器中应用于块的额外样式。您通常会使用此文件来定义特定于块用户界面的样式。此文件在构建过程中会被转换为 index.css，通常使用 block.json 中的 editorStyle 属性定义。
render.php
render.php 文件（或 block.json 的 render 属性中定义的任何其他文件）定义了当来自前端的请求出现时返回块标记的服务器端过程。如果已定义，此文件将优先于前端渲染块标记的其他方法。
view.js
view.js 文件（或 block.json 的 viewScript 属性中定义的任何其他文件）将在块显示时在前端加载。
build 文件夹
build 文件夹包含来自 src 文件夹的代码的编译和优化版本。这些文件由 构建过程生成，该过程由 wp-scripts 的 build 或 start 命令触发。
此转换过程包括压缩、将现代 JavaScript 转换为与更广泛浏览器兼容的版本，以及打包资源以实现高效加载。WordPress 最终会挂起并使用 build 文件夹的内容来在区块编辑器中和前端渲染区块。
wp-scripts 构建命令的 webpack-src-dir 和 output-path 选项来自定义入口和输出点。