gutenbergdocs/getting-started/fundamentals/file-structure-of-a-block.md

附加资源

• 展示区块文件结构的示意图

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配置包含串联的 css-loader、 postcss-loader和 sass-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选项来 自定义入口和输出路径。

区块的文件结构

为WordPress开发自定义区块时，最佳实践是在插件中注册它们而非主题中。这种策略能确保即使用户切换主题，您的区块仍可正常使用。虽然在某些情况下将区块直接嵌入主题可能更为合适，但本指南主要关注插件中的区块结构。具体来说，将详细说明通过create-block工具生成的文件结构。

遵循create-block工具的结构并非强制要求，但它提供了一个可靠的参考标准。该工具生成的文件包含了区块定义和注册所需的所有内容。采用这种结构有助于保持一致性，并确保区块组织有序、易于维护。

<插件文件>.php

在WordPress插件中创建区块时，通常需要在插件的主PHP文件中通过服务器端注册区块。这可以通过使用register_block_type()函数来实现。

有关创建WordPress插件的更多信息，请参阅插件基础文档以及主PHP文件的头部要求。

package.json

package.json文件用于配置Node.js项目（从技术角度说，区块插件就是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文件路径。