【WordPress】カスタムブロックの開発環境構築

2021/02/232021/03/01

当サイトのリンクには広告が含まれています。

ブロックエディターの登場により、これからはオリジナルのブロックを作る必要がどんどん増えていくのではないでしょうか。

まだまだエディターは過渡期であり、情報が少ない部分もあるので、自分の備忘録を兼ねて勉強したことを記載しておきます。
これからカスタムブロックを作る人のなにか参考になれば幸いです。

まずは最初の開発環境構築についてです。

シリーズ記事

前提条件

前提としてWordPressのローカル開発環境の構築とnode.jsの導入は済んでいるものとします。
環境構築はMAMP、LocalbyFlywheel、Dockerなど普段お使いのものでOKです。

私はDockerを使っておりますので、こちらも合わせてどうぞ。

create-blockでビルド環境を構築

ブロックを作成する際にJSXで記載するので、まずはビルド環境を構築する必要があります。

WordPressでは公式で環境構築を簡単に行える@wordpress/create-block パッケージというものが用意されているので、今回はこれを使います。

公式サイト：https://ja.wordpress.org/team/handbook/block-editor/tutorials/create-block/

カスタムブロックを作成する時は、公式の手順ではテーマの中ではなくプラグインとして追加する流れになるので、これに則っていきます。

プラグインを作成

まずはWordPressのプラグインのディレクトリに移動。

$ cd wp-content/plugins

create-blockを実行します。
下記のcustom-blockの部分がプラグインの名前になりますので、お好きなものに変更して構いません。今回、わたしはcustom-blockという名前にしたので、以降それで説明してきます。

$ npx @wordpress/create-block custom-block

プラグインディレクトリにcustom-blockという名前で新しいプラグイン用のファイルが追加されますので、このディレクトリに移動します。

$ cd custom-block

追加されたファイルを見ると主なものは以下のようになっています。

build：ビルドで出力されるファイルが入るディレクトリ
src：開発用のファイルを入れるディレクトリ（この中のファイルを編集していく）
custom-block.php：プラグイン用のファイル（プラグインのディレクトリと同じ名前になる）
その他ファイル：ビルドに必要なファイル達

プラグインを有効化

管理画面にログインして、プラグインの画面を見ると上記で追加したプラグインCustom Blockがありますので、有効化します。

ちなみにこのプラグイン一覧画面で表示されるプラグインの説明や作者などは、custom-block.phpの上部で設定しますので、必要に応じて変えてOKです。
私はDescriptionとAuthorだけ以下のように変更してみました（他はデフォルトのまま）

/**
 * Plugin Name:     Custom Block
 * Description:     カスタムブロック用のプラグイン
 * Version:         0.1.0
 * Author:          Ayaka
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     custom-block
 *
 * @package         create-block
 */

ブロックの確認

管理画面から投稿画面を開きブロックの追加をすると、ウィジェットカテゴリーにcustom-blockというsmileyのアイコンが表示されています。

以下のようにただサンプルのテキストが表示されるだけのブロックですが、このブロックが追加できれば問題ありません。

コマンド

開発で主に使用するコマンドは以下のふたつです。

// ビルド用コマンド
$ npm run build

//　開発用コマンド
$ npm run start

ビルド用コマンドは、最終的に本番環境に入れる用の圧縮されたファイルを作成するために使用しますので、普段は開発用コマンドを使用します。

npm run startをした後、src内にあるedit.jsの”Custom Block – hello from the saved content!”とある部分を適当な言葉に変えて保存してみます。

export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			{ __( '書き換えました', 'custom-block' ) }
		</p>
	);
}

投稿画面をみると文章の変更が反映されています。

開発ではこのようにjsファイルを編集していきますので、詳しくは次回の記事から書いていきます。

【WordPress】カスタムブロック用のカテゴリーを追加する前回、ブロックエディターの開発環境構築をしたので、カスタムブロックの開発に入っていきます。カスタムブロックはWordPressデフォルトのブロックのカテゴリーとは分…

参考サイト