今までたくさんカスタムブロックを作成してきましたが、これまではいわゆる「オリジナルブロック」と呼ばれるもので、テーマに存在するわけではなく、プラグインファイルとして追加して機能するものでした

これは一からブロックを定義、登録して開発していくものでしたが、そもそもオリジナルのテーマで開発しているため、通常のデフォルトブロックがさみしいもので、イマイチ機能的に優れているわけではなかったため、そろそろ既存のブロックを拡張した開発がしたいと考えていました

今回は前回に引き続き、デフォルトブロックの拡張を目的として備忘録として残しておきます

関連記事

WordPress 既存のブロックスタイルをカスタマイズする

2022/07/05

今回は特に、現在の私のポートフォリオサイトのカスタマイズとしてのアップデート作業になります。
したがって、備忘録的な内容になりがちなのでご了承下さい

テーマにおける環境構築の準備

前回のfunctions.phpを編集していくカスタマイズと変わって今回はReactのJSXやコンポーネントをふんだんに使用して既存のブロックを拡張してく予定なので、モジュールを用意しエントリーポイントとなるJSファイルをコンパイルする必要があります

まずはターミナルでテーマのディレクトリ直下にブロック拡張の専用フォルダを作成します

コピーするcd /Applications/MAMP/htdocs/wp-content/themes/ojako-potfleo  //テーマのフォルダに移動
mkdir blocks //ブロックを制作するフォルダを作成
cd blocks      //作成したブロックに移動

上記の３つのコマンドでファイルの作成が出来たら、ここでpackage.jsonを生成します
@wordpress/scriptsをこのディレクトリにインストールし環境を整えます

@wordpress/scripts : wordpress.org
基本的にこれだけでほどんどの準備が整います

※ git などで監視しているテーマの場合node_modulesが記録されてしまうため、.gitignoreなどで対象から外しておきましょう

コピーするnpm init -y //package.jsonが生成される
npm i @wordpress/scripts -D //@wordpress/scriptsのインストール

これでインストール後にblocksディレクトリにnode_modules/が追加されバンドルに必要な環境が整いました

package.jsonにコマンドを登録する

コピーする{
  "name": "blocks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wordpress/scripts": "^23.4.0"
  }
}

追記するのは8,9行目の start と build です
こうして追記しておくことで、ファイルの監視コマンドや本番環境用のバンドルコマンドは以下になります

npm start //ファイルの監視を開始
npm run build //本番用にバンドル

webpack.config.js

デフォルトでは src ディレクトリの index.js をコンパイルして、build ディレクトリに出力するようになっています
ここからはお好みで、出力するファイルを変更したりするための設定を追加していきます

まずは package.json が置かれているディレクトリにwebpack.config.jsファイルを作成します
今回、ファイルの中身は以下にしました

コピーするconst defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require("path");

module.exports = {
  ...defaultConfig, //既存の設定をここに展開
  entry: {
    "exblock": "./src/exblock.js",
    "custom_blocks": "./src/custom-blocks.js"
  },
  output: {
    path: path.join(__dirname, "/build"),
    filename: "[name].js",
  },
};

設定を取り込む

Node.js の require() 関数を使って全ての設定を読み込み変数とした後、
module.exports文の中でスプレッド構文（…）で展開します

これにより既存の設定を全て取り込んでから、新しい設定として拡張することができす。 
pathはpath.join()メソッドを使用するため Node.js の path モジュールを、require() を使って読み込みます

スプレッド構文で既存の設定を展開した後には、独自の設定を追加することができます。

entry

entryプロパティにはメインで作業するエントリーファイルを指定します
書き方は「キー：値」のようにオブジェクトのように記述します

今回の例ではcustom_blocks、exblockと２つのエントリーポイントを指定することでブロックごとにファイルを分割するようなイメージで作成しています

output

outputプロパティはコンパイルしたファイルの出力先を設定します

output.path プロパティと output.filename プロパティに対してファイルの出力先のパスと名前を指定します
この例では出力先のパスにデフォルトと同じ /build/ディレクトリを指定しました

ファイル名は [name] を使って、entry プロパティで指定したキーが [name] に入ったファイル名のファイルが出力されるようにしています
entryプロパティに別のエントリポイントを「キー：値」のペアで記述すると、キーで指定した名前と同じファイル名で出力されるようになっています

それではここからはファイルの監視、npm start を実行して開発していきます

npm start

functions.phpでファイルの読み込み

ここまでで、ブロックファイルのbuildディレクトリにコンパイルされたファイルが出力されているはずなので、このファイルを読み込んでエディター上でデバックしてみましょう

コピーするadd_action( 'enqueue_block_editor_assets', function () {
  $asset_file = include __DIR__ . '/../blocks/build/exblock.asset.php';
	wp_enqueue_script(
		'custom-block-script',
		get_theme_file_uri( '/blocks/build/exblock.js' ),
		$asset_file['dependencies'], //依存スクリプトの配列
                $asset_file['version'], //バージョン
		true
	);
});

これで、ファイルの読み込みは完了したはずなので src/exblock.js のソースファイルにデバック用のコードを書いて、管理画面からエディターを開いてコンソールで確認してみましょう

コピーするconsole.log('ブロックのテストです');

コンソールで文字列が確認できたらいよいよ次回から実際にブロックを作成して行きます

そして全ての作業が完了し本番用にアップする際には圧縮版のコマンドで完了し、完成したディレクトリを個々にFTPなどでアップするわけですね

npm run build

環境構築だけでも初心者の私にとってはハードルが高く、繰り返し使用するわけではないため、自分で確認用に今回の記事を書いてみました

お疲れさまでした