云策 WordPress 开发者社区

块编辑器开发文档

文件夹结构

查看官方原文 ↗
💡 云策文档标注

概述

本文档详细介绍了 Gutenberg 仓库的文件夹结构，重点解释了核心文件和目录的作用，包括配置文件、源代码、测试和文档等部分，旨在帮助 WordPress 开发者理解项目组织方式。

关键要点

  • 根目录包含许可证、README、配置文件（如 .editorconfig、.eslintrc）用于代码规范和构建工具。
  • 配置文件分组包括 linting 工具（PHP、JS、样式）、转译和打包（如 webpack.config.js）、开发环境（.wp-env.json）以及依赖管理（composer.json、package.json）。
  • 核心文件包括 Gutenberg 插件入口点 gutenberg.php、演示内容 post-content.php，以及插件仓库的 readme.txt 和 changelog.txt。
  • 源代码目录：lib 存放 PHP 源代码，packages 包含 WordPress 包（生产 JS/样式和开发工具），每个包有独立的 package.json、源代码和测试文件。
  • 测试相关目录覆盖 PHP 单元测试（phpunit）、JavaScript 单元测试（packages/*/src/**/*.test.js）、集成测试（test/integration）、端到端测试（test/e2e）和性能测试（test/performance）。
  • 文档和工具包括 Block editor handbook 文档（docs/*.md）、平台文档（platform-docs）、GitHub 配置（.github/*）以及脚本工具（如 bin/api-docs、bin/packages）。
  • 其他重要目录：storybook 用于组件故事配置，tools 存放 ESLint 和 webpack 的配置文件。
📄 原文内容

The following snippet explains how the Gutenberg repository is structured omitting irrelevant or obvious items with further explanations:

│
├── LICENSE
├── README.md
├── SECURITY.md
├── CONTRIBUTING.md
│
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .jshintignore
├── .eslintignore
├── .prettierrc.js
├── .stylelintignore
├── .stylelintrc.js
├── .markdownlintignore
├── .npmpackagejsonlintrc.json
├── phpcs.xml.dist
│   Dot files and config files used to configure the various linting tools
│   used in the repository (PHP, JS, styles...).
│
├── .browserslistrc
├── babel.config.js
├── jsconfig.json
├── tsconfig.json
├── tsconfig.base.json
├── webpack.config.js
│   Transpilation and bundling Config files.
│
├── .wp-env.json
│   Config file for the development and testing environment.
│   Includes WordPress and the Gutenberg plugin.
│
├── composer.lock
├── composer.json
│   Handling of PHP dependencies. Essentially used for development tools.
│   The production code don't use external PHP dependencies.
│
├── package-lock.json
├── package.json
│   Handling of JavaScript dependencies. Both for development tools and
│   production dependencies.
│   The package.json also serves to define common tasks and scripts
|   used for day to day development.
│
├── changelog.txt
├── readme.txt
│   Readme and Changelog of the Gutenberg plugin hosted on the WordPress
│   plugin repository.
│
├── gutenberg.php
│   Entry point of the Gutenberg plugin.
│
├── post-content.php
│   Demo post content used on the Gutenberg plugin to showcase the editor.
│
├── .github/*
│   Config of the different GitHub features (issues and PR templates, CI, owners).
│
├── bin/api-docs
│   Tool/script used to generate the API Docs.
│
├── bin/packages
│   Set of scripts used to build the WordPress packages.
│
├── bin/plugin
│   Tool use to perform the Gutenberg plugin release and the npm releases as well.
│
├── docs/tool
│   Tool used to generate the Block editor handbook's markdown pages.
│
├── docs/*.md
│   Set of documentation pages composing the [Block editor handbook](https://developer.wordpress.org/block-editor/).
│
├── platform-docs
│   Documentation website targeted to non WordPress developers
│   using Gutenberg in their own applications.
│   Deployed on [https://wordpress.org/gutenberg-framework/](https://wordpress.org/gutenberg-framework/).
│
│
├── lib
│   PHP Source code of the Gutenberg plugin.
│
├── lib/compact/wordpress-x.x
│   PHP code that was include in WordPress ont the WordPress X.X version.
│   It is kept to ensure plugin compatibility with older WordPress versions.
│
├── packages
│   Source code of the WordPress packages.
│   Packages can be:
│    - Production JavaScript scripts and styles loaded on WordPress
│      and the Gutenberg plugin or distributed as npm packages.
│    - Development tools available on npm.
│
├── packages/{packageName}/package.json
│   Dependencies of the current package.
│
├── packages/{packageName}/CHANGELOG.md
├── packages/{packageName}/README.md
│
├── packages/{packageName}/src/**/*.js
├── packages/{packageName}/src/**/*.scss
│   Source code of a given package.
|
├── packages/{packageName}/src/**/*.test.js
│   JavaScript unit tests.
|
├── packages/{packageName}/src/**/{ComponentName}/index.js
│   Entry point of a given component.
|
├── packages/{packageName}/src/**/{ComponentName}/style.scss
│   Style entry point for a given component.
│
├── packages/{packageName}/src/**/{ComponentName}/stories/*.jsx
│   Component Stories to load on the Gutenberg storybook.
│
├── phpunit
│   Unit tests for the PHP code of the Gutenberg plugin.
│
├── storybook
│   Config of the [Gutenberg Storybook](https://wordpress.github.io/gutenberg/).
│
├── test/integration
│   Set of WordPress packages integration tests.
│
├── test/native
│   Configuration for the Gutenberg Mobile unit tests.
│
├── test/unit
│   Configuration for the Packages unit tests.
│
├── test/e2e
│   End-2-end tests of the Gutenberg plugin.
│
├── test/performance
│   Performance metrics. Results are tracked on the [Gutenberg performance dashboard](https://codevitals.run/project/gutenberg).
│
├── tools/eslint
│   Configuration files for the ESLint linter.
│
├── tools/webpack
│   Configuration files for the webpack build.