今週はWordPress 6.6 Beta1、6.5.4が公開されました。手持ちの2サイトは順次6.5.4へ、開発環境もとりあえずは6.5.4へアップデートしました。
そんなこんなで気分一新し、新しいブロックでも作ってみようかと思い、「create-block」で新しいプラグインを作成。
% npx @wordpress/create-block hello-blocks
このコマンドは、wp-content/pluginsディレクトリで実行するのが正解なわけだが、先にプラグインのディレクトリを作ってその中で実行しちゃいがち(その度にやり直してる)。
とりあえずプラグインのディレクトリへ移ってビルド。
% npm run build
プラグインを有効化し投稿編集画面を開いてみたが、作ったブロックが表示されない。なんで!?
投稿編集画面のHTMLソースを見ると、cssファイルはロードされているけど、jsファイルが見当たらない。思いついたことは試してみたが原因がさっぱりわからず昨晩は寝てしまった。
夜があけてXを眺めていると、「浜野さん」のポストを発見!
wordpress/scriptsがv28.0からReactの新しいJSXトランスフォームを使用するようになったのですが、これはWordPress6.5以下では動作しないので、ブロック開発でscriptsを使用していてWordPress6.5以下もサポートする場合は、scriptsのv27.9以下を使う必要があります
https://x.com/tetsuaki_hamano/
ということで、プラグインディレクトリのpackage.jsonを確認。確かに、「^28.0.0」になっていた。
"devDependencies": {
"@wordpress/scripts": "^28.0.0"
}
「^28.0.0」を「^27.9.0」に書き換えて保存。wordpress/scriptsを再インストールして、もう一度ビルド。
% npm install --save-dev @wordpress/scripts
% npm run build
投稿編集画面を開き直すと、無事ブロックが表示されました。
本件はWordPress 6.6 Beta1が公開され、それに合わせてwordpress/scriptsもアップデート。このタイミングで新しいブロック(プラグイン)を作成したことにより、生じたのでしょう。これからは、wordpress/scriptsのバージョンに注意しないといけませんね。