Gutenberg 区块编辑器文档 文档中心 › Gutenberg 区块编辑器文档

title: "安装" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Data Basics - How To Guides - Repos

安装

我们将以 WordPress 插件的形式构建应用程序，这意味着您需要先安装 WordPress 本身。一种方法是按照入门指南页面的说明进行操作。完成安装后，您可以继续学习本教程的其余部分。

此外，本教程将大量涉及 Redux 概念，如状态、操作和选择器。如果您不熟悉这些概念，建议先阅读Redux 入门指南。

Creating a plugin

We'll do all the development inside of a WordPress plugin. Let's start by creating a wp-content/plugins/my-first-gutenberg-app directory in your local WordPress environment. We will need to create four files inside that directory:

Go ahead and create these files using the following snippets:

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! 的页面：

恭喜！您现在可以开始构建应用了！

下一步做什么？

← 返回文档中心