テンプレート用モジュールのインストール
下記のコマンドを実行して、カスタムブロックの雛形をインストールします。
※「test-block」の部分は任意の名称
$ npx @wordpress/create-block test-block
以下のファイルがダウンロードされます。
wp-envでWordPressを起動
モジュールインストール
※local by flywheel や MAMP を使用する場合はスルーしてください。
下記のコマンドを実行してwp-envをインストールします。
npm install @wordpress/env --save-dev
package.jsonを編集
scriptsにwp-env用のコマンドを追加する。
"scripts": {
"wp-start": "wp-env start",
"wp-stop": "wp-env stop"
},
コマンドの実行
下記のコマンドを実行して、WordPressが起動することを確認する。
npm run wp-start
起動したら管理画面に移動して、プラグインとして認識されていることを確認する。
カスタムブロック開発をはじめる
以下のコマンドを実行すると開発モードに(ファイルを上書き保存するためにコンパイルされます)
npm run start
- 「edit.js」がブロックエディタの編集画面を作成するコンポーネント
- 「save.js」が記事画面(記事を保存した時に呼ばれる)コンポーネント
編集が完了したらbuildコマンドを実行します
npm run build