环境设置

我们将把应用程序构建为WordPress插件，这意味着您需要先安装WordPress本体。其中一种安装方式是按照快速入门页面的说明进行操作。完成环境配置后，您就可以继续学习本教程的后续内容。

另外，本教程将大量涉及Redux相关概念，例如状态（state）、操作（actions）和选择器（selectors）。如果您对这些概念不熟悉，建议先阅读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() {
	// 为我们的应用创建新的管理页面
	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 ) {
	// 仅在 ?page=my-first-gutenberg-app 页面加载
	if ( 'toplevel_page_my-first-gutenberg-app' !== $hook ) {
		return;
	}

	// 加载必需的WordPress包

	// 自动加载导入的依赖项和资源版本
	$asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

	// 入队CSS依赖
	foreach ( $asset_file['dependencies'] as $style ) {
		wp_enqueue_style( $style );
	}

	// 加载我们的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' );

	// 加载我们的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!_的页面：

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

后续步骤

上一部分：介绍
下一部分：构建基础页面列表
（可选）在block-development-examples仓库中查看完整应用示例

5.8 KiB Raw Blame History Unescape Escape

环境设置

创建插件

配置构建流程

测试运行效果

后续步骤

5.8 KiB

Raw Blame History