🧩 カスタムブロックを作る！

カスタムブロック作成に必要な道具はnode.jsで簡単に作れる

🔧 node.jsでwp-content > pluginフォルダに専用フォルダを作る

次のnode.jsで必要なファイル群（道具）を生成できます。

npx @wordpress/create-block my-plugin #my-pluginは作るプラグインの名前に変更

Bash

フォルダ内で重要なのは３つ

srcディレクトリ	ブロックを作成するためのコードを書く場所
buildディレクトリ	srcでブロックを作成後に “npm run build”でファイルが生成されるところ
ルートのphpファイル	プラグインのエントリーポイント

srcディレクトリでプラグインを作成使用

主に以下のファイルを作成することで、プラグインを作ることができます。

edit.js	編集画面でのブロックの見え方や入力項目を設定できる
save.js	編集を保存したら、このjsに従ってHTMLを出力する。（edit.jsと連携して作成する）
block.json	ブロックの名前や機能などの設定ファイル。プラグインの名前もここで設定できます。

作成後はBuildしよう！

ファイルの編集が完了したらBuildコマンドでしてアップロード用ファイルを書き出します。これで、buildディレクトリにプラグインのファイルが生成されます。

npm run build

Bash

✈️ プラグインのファイルをアップロード

Buildフォルダとエントリーポイントのファイル（phpファイル）をアップロードすれば、あとは管理画面のプラグイン項目から有効化すれば使えるようになります。

使用する際は、他のブロックと同様に名前で検索できます。

plugin/
  ├── my-custom-block-plugin/
      ├── build/my-custom-block-plugin/
      │   ├── index.js         ← ビルドされたJS（Reactコンポーネント含む）
      │   ├── index.asset.php  ← WordPressが必要とする依存・バージョン情報（自動生成）
      │   ├── block.json           ← ブロック定義ファイル（必須）
      │   ├── cssファイル...
      │    
      ├── my-custom-block-plugin.php      ← プラグインのエントリーポイント

*そのほかにpackage.json, src/, node_modules/ などのファイルは開発用なのでアップロード不要

JavaScript