216 lines
5.8 KiB
Markdown
216 lines
5.8 KiB
Markdown
# 环境设置
|
||
|
||
我们将把应用程序构建为WordPress插件，这意味着您需要先安装WordPress本体。其中一种安装方式是按照[快速入门](/docs/contributors/code/getting-started-with-code-contribution.md)页面的说明进行操作。完成环境配置后，您就可以继续学习本教程的后续内容。
|
||
|
||
另外，本教程将大量涉及Redux相关概念，例如状态（state）、操作（actions）和选择器（selectors）。如果您对这些概念不熟悉，建议先阅读[Redux入门指南](https://redux.js.org/introduction/getting-started)。
|
||
|
||
## 创建插件
|
||
|
||
我们将在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:**
|
||
|
||
```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:**
|
||
|
||
```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
|
||
<?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:**
|
||
|
||
```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构建环境配置入门指南](/docs/how-to-guides/javascript/js-build-setup.md)。
|
||
|
||
要安装构建工具，请使用终端进入插件目录并运行`npm install`命令。
|
||
|
||
所有依赖项安装完成后，只需运行`npm start`即可！终端中将运行一个监听器。之后您可以在文本编辑器中随意编辑代码，每次保存后都会自动构建。
|
||
|
||
## 测试运行效果
|
||
|
||
现在进入插件页面，您应该能看到名为**My first Gutenberg App**的插件。请激活该插件，此时会出现一个标为_My first Gutenberg app_的新菜单项。点击该菜单项后，您将看到一个显示_Hello from JavaScript!_的页面：
|
||
|
||
|
||
|
||
恭喜！您现在可以开始构建应用程序了！
|
||
|
||
## 后续步骤
|
||
|
||
- 上一部分：[介绍](/docs/how-to-guides/data-basics/README.md)
|
||
- 下一部分：[构建基础页面列表](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md)
|
||
- （可选）在block-development-examples仓库中查看[完整应用示例](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) |