【WordPress】ブロックエディタ新規作成｜npmでひな形を作る手順

記事更新日：2022-08-27

npm で create-block
↓参考
wordpress.org

１．npmで、ブロックのひな形を作成する

※block-name=ブロック名：好きな名前を付ける

(pc名) app % cd public/wp-content/plugins
(pc名) plugins % npx @wordpress/create-block block-name

↓

(pc名) plugins % cd block-name
(pc名) block-name % npm start

クラス名は「wp-block-create-block-block-name」となる

２．srcディレクトリの中のファイルを設定する

block.json
- category：表示させる場所
- attributes：属性
edit.js
- エディタ画面の設定
save.js
- フロント画面の設定
style.css
- フロント共通のCSS
- 編集画面だけのCSSは、edit.cssに設定

attributesについて

attributesとは

edit 関数と save 関数には、値を設定する setAttributes 関数と共に attributes が渡されます。

参照：

wordpress.org:ブロックの属性

編集画面とフロントとで値を受け渡しするもの

３．block-name.phpの情報を書き換える

※管理画面に反映される情報

<?php

/**
 * Plugin Name:       （書き換え）
 * Description:       （書き換え）
 * Requires at least: 5.9
 * Requires PHP:      7.0
 * Version:           1.1.0
 * Author:            （書き換え）
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       （書き換え）
 *
 * @package           create-block
 */