KON BLOG

6/28/2021

カスタムブロック開発の始め方

  • WordPress

テンプレート用モジュールのインストール

下記のコマンドを実行して、カスタムブロックの雛形をインストールします。
※「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


関連リンク