开发平台

Gutenberg 项目不仅正在为 WordPress 构建更好的编辑器，还正在创建一个可供开发的平台。该平台由一组 JavaScript 包和工具组成，您可以在自己的 Web 应用程序中使用它们。查看 npm 上可用的包列表。

UI 组件

WordPress Components 包包含一组您可以在项目中使用的 UI 组件。有关可用组件和设置的交互式指南，请参阅 WordPress Storybook 网站。

以下是一个快速示例，展示如何在您的项目中使用组件。

安装依赖项：

npm install --save @wordpress/components

在 React 中的用法：

import { Button } from '@wordpress/components';

function MyApp() {
    return <Button>Hello Button</Button>;
}

许多组件包含用于添加样式的 CSS，您需要包含它们以使组件正确显示。组件样式表位于 node_modules/@wordpress/components/build-style/style.css，您可以直接链接或复制并将其包含在您的项目中。

开发脚本

@wordpress/scripts 包是一组可重用的 JavaScript 开发脚本——包括构建、代码检查和测试的脚本——无需额外的配置文件。

以下是一个快速示例，展示如何在您的项目中使用 wp-scripts 工具。

安装依赖项：

npm install --save-dev @wordpress/scripts

然后您可以在 package.json 文件中添加 scripts 部分，例如：

    "scripts": {
        "build": "wp-scripts build",
        "format": "wp-scripts format",
        "lint:js": "wp-scripts lint-js",
        "start": "wp-scripts start"
    }

然后您可以使用 npm run build 构建项目，所有默认的 webpack 设置都已配置好，格式化和代码检查也是如此。start 命令用于开发模式。有关完整文档，请参阅 @wordpress/scripts 包。

更多信息请参见 Block Editor 手册中的 Block Editor JavaScript 使用指南。

块编辑器

@wordpress/block-editor 包允许您创建和使用独立的块编辑器。

您可以通过阅读 教程“构建自定义块编辑器”来了解更多。