我们将把该应用程序构建为 WordPress 插件，这意味着您需要安装 WordPress 本身。一种方法是按照 入门指南 页面上的说明进行操作。一旦您的环境设置完成，您就可以继续跟随本教程的其余部分。

此外，本教程将大量依赖 Redux 概念，如状态、操作和选择器。如果您不熟悉这些概念，您可能希望先复习一下 Redux 入门指南。

创建插件

我们将在 WordPress 插件内进行所有开发工作。让我们首先在本地 WordPress 环境中创建一个 wp-content/plugins/my-first-gutenberg-app 目录。我们需要在该目录中创建四个文件：

  • my-first-gutenberg-app.php – 用于创建新的管理页面
  • src/index.js – 用于我们的 JavaScript 应用程序
  • src/style.css – 用于最小样式表
  • package.json – 用于构建过程

请按照以下代码片段创建这些文件：

src/index.js:

import { createRoot } from 'react-dom';
import './style.css';

function MyFirstApp() {
    return <span>Hello from JavaScript!</span>;
}

const root = createRoot( document.getElementById( 'my-first-gutenberg-app' ) );
window.addEventListener(
    'load',
    function () {
        root.render(
            <MyFirstApp />,
        );
    },
    false
);

src/style.css:

.toplevel_page_my-first-gutenberg-app #wpcontent {
    background: #fff;
    height: 1000px;
}
button .components-spinner {
    width: 15px;
    height: 15px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.form-buttons {
    display: flex;
}
.my-gutenberg-form .form-buttons {
    margin-top: 20px;
    margin-left: 1px;
}
.form-error {
    color: #cc1818;
}
.form-buttons button {
    margin-right: 4px;
}
.form-buttons .components-spinner {
    margin-top: 0;
}
#my-first-gutenberg-app {
    max-width: 500px;
}
#my-first-gutenberg-app ul,
#my-first-gutenberg-app ul li {
    list-style-type: disc;
}
#my-first-gutenberg-app ul {
    padding-left: 20px;
}
#my-first-gutenberg-app .components-search-control__input {
    height: 36px;
    margin-left: 0;
}

#my-first-gutenberg-app .list-controls {
    display: flex;
    width: 100%;
}

#my-first-gutenberg-app .list-controls .components-search-control {
    flex-grow: 1;
    margin-right: 8px;
}

my-first-gutenberg-app.php:

<?php
/**
 * Plugin Name: My first Gutenberg App
 *
 */

function my_admin_menu() {
    // Create a new admin page for our app.
    add_menu_page(
        __( 'My first Gutenberg app', 'gutenberg' ),
        __( 'My first Gutenberg app', 'gutenberg' ),
        'manage_options',
        'my-first-gutenberg-app',
        function () {
            echo '
            <h2>Pages</h2>
            <div id="my-first-gutenberg-app"></div>
        ';
        },
        'dashicons-schedule',
        3
    );
}

add_action( 'admin_menu', 'my_admin_menu' );

function load_custom_wp_admin_scripts( $hook ) {
    // Load only on ?page=my-first-gutenberg-app.
    if ( 'toplevel_page_my-first-gutenberg-app' !== $hook ) {
        return;
    }

    // Load the required WordPress packages.

    // Automatically load imported dependencies and assets version.
    $asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

    // Enqueue CSS dependencies.
    foreach ( $asset_file['dependencies'] as $style ) {
        wp_enqueue_style( $style );
    }

    // Load our app.js.
    wp_register_script(
        'my-first-gutenberg-app',
        plugins_url( 'build/index.js', __FILE__ ),
        $asset_file['dependencies'],
        $asset_file['version']
    );
    wp_enqueue_script( 'my-first-gutenberg-app' );

    // Load our style.css.
    wp_register_style(
        'my-first-gutenberg-app',
        plugins_url( 'build/style-index.css', __FILE__ ),
        array(),
        $asset_file['version']
    );
    wp_enqueue_style( 'my-first-gutenberg-app' );
}

add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_scripts' );

package.json:

{
  "name": "09-code-data-basics-esnext",
  "version": "1.1.0",
  "private": true,
  "description": "My first Gutenberg App",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "keywords": [
    "WordPress",
    "block"
  ],
  "homepage": "https://github.com/WordPress/gutenberg-examples/",
  "repository": "git+https://github.com/WordPress/gutenberg-examples.git",
  "bugs": {
    "url": "https://github.com/WordPress/gutenberg-examples/issues"
  },
  "main": "build/index.js",
  "devDependencies": {
    "@wordpress/scripts": "^24.0.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "start": "wp-scripts start"
  }
}

设置构建管道

本教程将假定读者熟悉 ESNext 语法和构建工具（如 webpack）的概念。如果这听起来令人困惑，您可能希望先复习 在区块编辑器中使用 JavaScript 指南。

要安装构建工具，请使用终端导航到插件目录并运行 npm install。

一旦所有依赖项都已就位，剩下的就是运行 npm start，瞧！终端中将启动一个监听器。然后您可以在文本编辑器中进行编辑；每次保存后，它都会自动构建。

测试是否成功

如果您现在转到插件页面，您应该看到一个名为 My first Gutenberg App 的插件。请激活它。应会出现一个标记为 My first Gutenberg app 的新菜单项。单击它后，您将看到一个显示 Hello from JavaScript! 的页面：

设置

恭喜！您现在已准备好开始构建应用程序了！

下一步是什么？