使用create-guten-block和wp-env工具轻松进行Gutenberg块开发

2 年 ago
逸, 科
1 minute

如果想要独自开发Gutenberg模块，通常需要两个部分：(1) Gutenberg模块开发项目和(2) WordPress测试环境。可以从头开始构建它们，但这次我们介绍如何使用create-guten-block和wp-env来快速构建环境。
需要注意的是，这个步骤是根据2020年4月19日的内容编写的，未来可能会有更便捷的方法出现。

本次采取的方法与其他方法

在环境搭建的方法上没有固定的正确答案，可以通过各种不同的方式来构建环境。
仅供参考，我会提供其他选项和我选择的方法。（这里列举的方法并不是全部）

(1) 制作 Gutenberg 代码块开发项目的方法

    • 全てを自分で作成するソースファイルやビルド用の環境など全てを自分で構築する方法です。自由な構成ができる反面、環境作成には手間がかかります。

 

    • @wordpress/scriptsを使う方法https://developer.wordpress.org/block-editor/packages/packages-scripts/@wordpress/scriptsを使えばシンプルなGutenbergブロックの環境を作成できます。PHPファイルやSass環境の構築などは自分で行う必要があります。

 

    create-guten-blockを使う方法（今回採用した方法）https://github.com/ahmadawais/create-guten-blockcreate-guten-blockを使うとプラグインのテンプレートやSass環境などが自動で作成されます。基本的にはsrcフォルダ配下のコードを編集していく形になります。

(2) 创建WordPress测试环境的方法

    • レンタルサーバなどに独自にサーバを立てる一般に公開するときと同じように、テスト用の環境をレンタルサーバなどに用意する方法です。修正したプラグインを都度アップロードする必要があったり、複数環境を作成しづらい…など色々と手間がかかるのでおすすめしません。

 

    • docker-composeでWordPress環境を作成する方法docker-compose.ymlにWordPressやdbコンテナの定義を書いて環境を作成する方法です。この方法を使っている人も多いと思いますが、docker-compose.ymlの編集などが少し面倒です。

 

    wp-envを使う方法（今回採用した方法）https://developer.wordpress.org/block-editor/packages/packages-env/wp-envを使うとプラグインやテーマのフォルダでwp-env startとするだけで、WordPressやdb環境が自動で作成され、プラグインやテーマが自動でバインドされた状態になります。内部ではdocker-composeが使われていますが、利用する側はdocker-composeを意識せずに使えます。利用するWordPressのバージョンやポート番号など、細かい設定は.wp-env.jsonを作っておけばOKです。

環境準備：境界整備

在进行之前，需要满足以下环境要求。

    • Windows 10 Pro（macOSやLinuxなどでも可能なはず）

 

    • Docker Desktop（Docker Composeも自動で入ります）

 

    • Node.js（Docker環境ではなく、Windows側にNode.jsのインストールが必要です）

 

    wp-envのインストールコマンドプロンプトでnpm install @wordpress/env -gグローバル環境にインストールしていますが-gをつけずにローカルにインストールも可能。ローカルにインストールした場合は、wp-envをnpx wp-envと読み替えてください。

具體步驟

本次的步骤是基于开发和测试位于S:\my-custom-block文件夹中的自定义模块my-custom-block。

使用create-guten-block创建开发项目。

打开命令提示符并执行以下命令（以“#”开头的部分是注释）。

# フォルダに移動
cd /d s:\

# my-custom-blockプロジェクトの作成
npx create-guten-block my-custom-block

# プロジェクトフォルダに移動してsrcフォルダを監視（srcフォルダの内容が変われば自動でビルドされる）
# 終了したい場合はCtrl+C
cd my-custom-block
npm start

使用wp-env进行测试的方法

打开另一个命令提示符窗口，并使用以下命令创建WordPress环境。
关键是要在插件文件夹S：\my-custom-block内执行wp-env命令。

# プラグインのフォルダに移動
cd /d s:\my-custom-block

# wp-envでWordPressの実行
# @wordpress/envをローカルにインストールした場合はnpx wp-envで実行
wp-env start

一旦WordPress启动，您就可以通过http://localhost:8888/来访问WordPress。
我认为会显示WordPress的Hello world!页面，如果您想进入管理界面，请从登录页面使用User:admin、Password:password来登录。初始界面是英文版的，但您可以通过WordPress的设置将其更改为日语。
此外，请注意，在此时my-custom-block插件已经启用。

如果想要关闭WordPress，可以使用wp-env stop命令。

wp-env的配置

将.wp-env.json文件放在执行wp-env start命令的文件夹中，根据该配置创建wp-env环境。在这个例子中，.wp-env.json文件位于S:\my-custom-block\.wp-env.json。
虽然不是必需的，但建议根据以下简单内容创建.wp-env.json文件。

{
    "core": null,
    "plugins": [ "." ],
    "port": 10088,
    "testsPort": 10089
}

通过这个设置，在最新的WordPress中，将使用10088端口号（”core”:null）。

bannerAds