カスタムブロック開発で @wordpress/scripts を活用するための準備の流れ

WordCamp Osaka 2019での情報収集を機に、ブロックエディタに関する技術的な知識を確認しておく必要性を強く感じました。

なので、まずは公式ドキュメントを読み進めるという時間を作って手を動かして見ました。

その際に、@wordpress/scripts を初めて使ってみたので流れをまとめておきたいと思います。

@wordpress/scripts ってなに？

僕もあまり難しいことは分かっていないのですが、要するに書いたプログラムを良しなに処理してくれると考えておけばいいのかな？

@wordpress/scripts | Block Editor Handbook | WordPress Developer Resources

This is a collection of reusable scripts tailored for WordPress development. For convenience, every tool provided in this package comes with…

developer.wordpress.org

とにかく使ってればわかるので試してみましょう！といっても、普段からnpm を使っている人ならば、特別何かを用意しなければならないというわけではありません。

また、こちらに導入ページも用意されているので、参照して進めていけば問題なく使えると思います。

JavaScript Build Setup | Block Editor Handbook | WordPress Developer Resources

ESNext is JavaScript written using syntax and features only available in a version newer than browser support—the support browser versions…

developer.wordpress.org

ブロックエディタ開発のハンドブックにJavaScriptのビルド設定が紹介されているので必見

npmについて「ん？」という方は、昔こんな記事も書いているので参照してもらうとなんとなくつかめるかもしれません。

準備みよう

まずは適当でもいいので使ってみましょう。

WordPressのローカル開発環境を用意して、その中にプラグインを作っていくという状況を想定して話を進めていきますね。

Finderでも黒い画面でも良いので、プラグイン用のディレクトリを作っておきましょう。

$ cd wp-content/plugins
$ mkdir sample-plugin

npmの準備

そこにnpmをセットアップしていきます。

$ npm init

すると、パッケージの名前やら何やら聞かれると思いますが、あとで変更もできるのでタンタカターンッ！！（エンター連打）しておきましょう。

これでnpmの準備ができました。package.jsonというファイルが生成されていることが確認できると思います。

@wordpress/script の準備

次に、このプロジェクト（例でいうプラグイン開発）に@wordpress/scriptsを使えるようにします。

$ npm install --save-dev --save-exact @wordpress/scripts

このコマンドを実行すると、黒い画面でつらつらつらーっと何やら動いていくと思いますが「俺、やってる感」を感じながら見つめておきましょう。（僕はいつもそうです）

処理が終わるとpackage.jsonに以下の記述が追加されていることを確認できるはずです。

"devDependencies": {
  "@wordpress/scripts": "6.0.0"
}

これで準備完了です。

コマンドを用意する

次に@wordpress/scriptsを利用するためのコマンドを用意しておきます。

package.jsonをエディタか何かで開きましょう。そして、このような記述を追加しましょう。

"scripts": {
  "build": "wp-scripts build"
},

どんな感じで記述したら良いかわからない方は、こちらのソースなどを確認してみると参考になると思います。

https://github.com/WordPress/gutenberg-examples/blob/master/01-basic-esnext/package.json

使ってみよう

ディレクトリ構造について

いつもの開発環境に合わせてscripts を設定することはできますが、ここではデフォルトで想定されている環境を紹介しておきます。

- build
- src
  - index.js
sample.php

src/index.js を作る

srcディレクトリにindex.jsのようにJavaScriptファイルを用意して、参照記事にもあるようなスクリプトを記述してみましょう。

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'myguten/test-block', {
    title: 'Basic Example',
    icon: 'smiley',
    category: 'layout',
    edit: () => <div>Hola, mundo!</div>,
    save: () => <div>Hola, mundo!</div>,
} );

ビルドしてみる

それではビルドしてみましょう。

$ npm run build

すると、プログラムの間違いがなければエラーもなく終了すると思います。完了したらbuildディレクトリの中を確認してみてください。あらかじめbuildディレクトリを作っておかなくても、自動的に作ってくれるはずです。

build/index.jsの中身を確認すると、このようになっているはずです。

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.blocks}()},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n(1);Object(o.registerBlockType)("myguten/test-block",{title:"Basic Example",icon:"smiley",category:"layout",edit:function(){return Object(r.createElement)("div",null,"Hola, mundo!")},save:function(){return Object(r.createElement)("div",null,"Hola, mundo!")}})}]);

ES Nextで書いたJavaScriptが良しなにコンパイルされていることが確認できると思います。（圧縮されているので解読しにくいとは思いますが…）

PHP側からスクリプトを設定する

あとは、index.phpでスクリプトを設定してあげればカスタムブロックとして動作するはずです。

$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

wp_register_script(
    'myguten-block',
    plugins_url( 'build/index.js', __FILE__ ),
    $asset_file['dependencies'],
    $asset_file['version']
);

冒頭にbuild/index.asset.phpという生成されたファイルを読み込んでいますが、こちらのファイルはそれぞれの依存関係を収納しているファイルだと理解しておいてください。

Using wp-scripts ver 5.0.0+ the build step will also produce a index.asset.php file that contains an array of dependencies and version number for your block.
https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/#dependency-management

これでエディタ画面から作ったブロックを使うことができるはずです。（「Basic Simple」というブロックができているはず）

まとめ

簡単にnpmを使ったカスタムブロック開発環境の作り方をご紹介しました。まとめると、プロジェクトディレクトリ内で、

npm install
srcディレクトリで開発
npm build

という感じかと思います。実際に手を動かしてみると、素早く理解することができるかと思います。ぜひチャレンジしてみましょう！

オレインデザイン