块编辑器开发文档

💡 云策文档标注

概述

本文档介绍了 WordPress 提供的 JavaScript 包和工具,用于 WordPress 开发,包括包的设计指南、通过 WordPress 全局变量和 npm 使用包的方法,以及如何测试特定 WordPress 主版本的 JavaScript 代码。

关键要点

  • 包是 Gutenberg 架构的第一层,每个包应有单一明确的目的,包含 README、文档化先决条件和公共 API,避免工具包模式,默认使用捆绑包。
  • 通过 WordPress 全局变量使用包:包作为注册脚本可用,通过 wp 全局变量访问,需在 wp_enqueue_script 中声明依赖。
  • 通过 npm 使用包:所有包在 npm 上可用,可通过 npm install 安装,使用 import 语句访问。
  • 测试特定 WordPress 主版本的 JavaScript 代码:使用 npm 分发标签(如 @wp-5.8)安装包版本,或使用 npx @wordpress/scripts packages-update 命令更新所有包。

代码示例

wp_enqueue_script(
    'my-custom-block',
    plugins_url( $block_path, __FILE__ ),
    array( 'react', 'wp-blocks', 'wp-block-editor', 'wp-i18n' )
);
const { PlainText } = wp.blockEditor;
npm install @wordpress/block-editor --save
import { PlainText } from '@wordpress/block-editor';
npm install @wordpress/block-editor@wp-5.8
npx @wordpress/scripts packages-update --dist-tag=wp-5.8

📄 原文内容

WordPress exposes a list of JavaScript packages and tools for WordPress development.

For information on creating and managing packages in Gutenberg, see the packages README. For details on the build system and package configuration, see the @wordpress/build README.

Package Guidelines

Packages are the first layer of architecture in Gutenberg. Each package should have a single, clear purpose, include a README, document prerequisites and public APIs, and avoid utility/kitchen-sink patterns. Default to bundled packages unless globals or modules are necessary.

For complete guidelines, see the package guidelines in the packages README.

Using the packages via WordPress global

JavaScript packages are available as a registered script in WordPress and can be accessed using the wp global variable.

If you wanted to use the PlainText component from the block editor module, first you would specify wp-block-editor as a dependency when you enqueue your script:

wp_enqueue_script(
    'my-custom-block',
    plugins_url( $block_path, __FILE__ ),
    array( 'react', 'wp-blocks', 'wp-block-editor', 'wp-i18n' )
);

After the dependency is declared, you can access the module in your JavaScript code using the global wp like so:

const { PlainText } = wp.blockEditor;

Using the packages via npm

All the packages are also available on npm if you want to bundle them in your code.

Using the same PlainText example, you would install the block editor module with npm:

npm install @wordpress/block-editor --save

Once installed, you can access the component in your code using:

import { PlainText } from '@wordpress/block-editor';

Testing JavaScript code from a specific major WordPress version

There is a way to quickly install a version of the individual WordPress package used with a given WordPress major version using npm distribution tags (example for WordPress 5.8.x):

npm install @wordpress/block-editor@wp-5.8

It’s also possible to update all existing WordPress packages in the project with a single command:

npx @wordpress/scripts packages-update --dist-tag=wp-5.8

All major WordPress versions starting from 5.7.x are supported (e.g., wp-5.7 or wp-6.0). Each individual dist-tag always points to the latest bug fix release for that major version line.