WordPressのブロック開発のクイックスタートガイド

実行環境

私がテストしたときの環境です。

• windows11 24H2
• npm 11.3.0
• node v22.22.0
• docker 28.1.1
• wp-env 10.22.0

準備

従来WorsPressの開発といえばPHPで関数やテンプレートを作成してきました。

現代のブロックエディタ時代ではPHPだけでなく、React、npmなどフロントエンド開発で利用する知識やツールを使うことになります。

わくわくしますね。

必要なもの：

• npm
• Docker
• wp-env

npmはNode.jsをインストールしましょう。付属されています。

wp-envでDockerが必要になります。Dockerをインストールしましょう。

wp-envはWordPressの実行環境です。QuickStartGuideで紹介されていました。WordPressのお薦めなのかもしれません。

ちなみにWordPressの実行環境は何でもいいです。「Local」などが有名どころでしょうか。こちらでも動作しました。

プロジェクト作成

プロジェクトディレクトリの準備はnpmで準備します。

このサンプルではテンプレートが採用されています。少しコマンドが長くなってますね。

プロジェクト名は「copyright-date-block」です。

npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template

入力を求められますので、”y”を入力して継続してください。

Need to install the following packages:
@wordpress/create-block@4.67.0
Ok to proceed? (y)

Downloading template files. It might take some time...
Creating a new WordPress plugin in the C:\htdocs\wordpress\block10\copyright-date-block directory.
Creating a "block.json" file.
Creating a "package.json" file.
Installing `@wordpress/scripts` package. It might take a couple of minutes...
Formatting JavaScript files.
Compiling block and generating blocks manifest.
Installing `@wordpress/env` package. It might take a couple of minutes...
Configuring `@wordpress/env`...
Done: WordPress plugin Copyright Date Block bootstrapped in the C:\htdocs\wordpress\block10\copyright-date-block directory.

You can run several commands inside:
  $ npm start
    Starts the build for development.
  $ npm run build
    Builds the code for production.
  $ npm run format
    Formats files.
  $ npm run lint:css
    Lints CSS files.
  $ npm run lint:js
    Lints JavaScript files.
  $ npm run plugin-zip
    Creates a zip file for a WordPress plugin.
  $ npm run packages-update
    Updates WordPress packages to the latest version.

To enter the directory type:
  $ cd copyright-date-block

You can start development with:
  $ npm start

You can start WordPress with:
  $ npx wp-env start

Code is Poetry

「copyright-date-block」ディレクトリが作成されてファイル群が用意されます。

このディレクトリをプラグインディレクトリと呼ぶ様ですね。

カレントディレクトリをプラグインディレクトリへ移動しましょう。

cd copyright-date-block

WordPress起動とプラグインの認識

wp-envのインストールとバージョン確認

wp-envインストール方法です。

インストール済みであればスキップしてください。

npm install -g @wordpress/env

動作確認としてバージョンを確認してみましょう。

> wp-env --version
10.22.0

Dockerの起動

Dockerを起動してください。

wp-envの起動

カレントディレクトリがプラグインディレクトリであることを確認してから実行します。

wp-env start

wp-envの停止方法

wp-env stop

wp-envはテンプレートに含まれているプラグインを認識した状態でWordPressを起動します。

便利ですね。

他のWordPress実行環境の場合

他のWordPressの実行環境を使用する場合は、先ほど作成したプラグインディレクトリをWordPressのプラグインフォルダに移動してください。

「Local」であれば、app\public\wp-content\pluginsディレクトリがプラグインディレクトリです。LocalのメインパネルのSite folderを開くと簡単に辿り着けます。

WordPress管理画面のプラグインから新しいプラグインを探して有効化してください。

プラグインの動作確認

wp-envが起動している状態で以下にアクセスしてください。

http://localhost:8888/wp-admin

• username: admin
• password: password

ログインしたらPluginsのリスト内に、「Copyright Date Block」があることを確認しましょう。

ブロックエディタを開きます。

ブロック追加から「Copyright Date Block」探し、記事に追加できることを確認してください。

ブロックはWIDGETSにあります。

ビルド

今回使用したブロックは完成されていたので、ビルドする必要はありませんでした。

編集する場合はビルドが必要です。

開発中は開発ビルドを開始しましょう。これはファイルの変更を検知してすぐさまビルドしてくれます。

npm start

停止する場合は

Ctrl + C

本番用ビルドの場合は

npm run build

以上