NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.

WordPressの自作のカスタムブロックを作る

(1)VSCodeを使用している場合、プラグインディレクトリを開き、ターミナルを起動。

(2)ターミナルを開いたら下記を入力。

npx @wordpress/create-block 作成フォルダ名    //例:custom-blocks

(3)インストールが終了したら下記を入力して編集スタート。

npm start

完了したらとりあえず下記を入力して公開用データを作成。

npm run build

自作のカスタムブロックを1つのプラグイン内で複数作成する場合

この方法は非公式のようだが問題なく動くのでこれでもよいのかと思う。

(1)/src内に適当なフォルダ(例:custom-blocks-text)を作成し、そのフォルダ内にデータを全て移動。

//プラグイン名:custom-blocks
>custom-blocks
 >src
  >custom-blocks-text
   >block.json
   >edit.js
   >editor.scss
   >index.js
   >save.js
   >style.scss

(2)block.jsonのnameはディレクトリに合わせて変更する。

(3)rootにあるphpファイル(作成フォルダ名.php)の「register_block_type」のリンクをそのフォルダに変更。

/build → /build/a-blocks-text

(4)作成したa-blocks-textフォルダを複製し別名保存(例:custom-blocks-modal)。
もちろんblock.jsonのname等合わせて変更する。

(5)あとは一旦 npm run build で書き出しておき、root(custom-blocks)にcdで移動して、npm startで編集スタート。

<?php
//作成フォルダ名.phpの内部はこんな感じなる
function create_block_custom_plugins_block_init(){
  register_block_type( __DIR__ . '/build/custom-blocks-text' );        //書き換える部分
  register_block_type( __DIR__ . '/build/custom-blocks-modal' );    //複数で追加する部分
}
?>

足りないnpmを追加する場合

(1)例えばURLを制御するnpmがインストールされていない場合は、下記をターミナルで入力してインストール。

npm install @wordpress/url --save
パーマリンクで/categoryを.ドットで削除しても記事をちゃんと表示させることができる方法の1つ