title: "开发平台" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Platform - How To Guides - Repos

开发平台

Gutenberg 项目不仅为 WordPress 构建更好的编辑器，同时也在创建一个可供构建的平台。该平台包含一系列可在您的 Web 应用程序中使用的 JavaScript 包和工具。查看 npm 上可用的包列表。

UI 组件

WordPress 组件包包含一系列可在您的项目中使用的 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": {
        "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 包。

更多信息，请参阅区块编辑器手册中的 JavaScript 入门教程。

区块编辑器

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

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