📝

Wordpress ブロックエディタ用プラグインを作る② 〜実装前の下ごしらえ〜

2022/01/25に公開

WordPress

ブロック

tech

実際にブロックエディタープラグインを作成します。

前回でやったこと

開発用Wordpressの準備
http://localhost:8888/wp-admin/ からダッシュボードにログイン

現在のディレクトリ構成

wp-develop/
 +- vendor/       # 既存のプラグイン・テーマを置く
 |  +- plugins/
 |     +- classic-editor
 +- .wp-env.json  # WordPress environment ツールの設定ファイル

この章のゴール

study という名前のブロックを作る
@wordpress/create-block で雛形を作成
.wp-env.json に雛形を登録してプラグインを有効化
ブロックのnamespace、説明文、カテゴリを変更

ブロックの雛形を作成

@wordpress/create-block を使って雛形を作成します。
wp-develop、study の部分は自分の環境に合わせて変更してください。

shell

$ cd wp-develop
$ npx @wordpress/create-block study

study というフォルダが作成されます。
中には php、javascript など必要なものが揃った環境が入っています。

wp-develop/
 +- study/        # 今作成された
 +- vendor/
 +- .wp-env.json

.wp-env.json に雛形を追加して Wordpress 再起動

/wp-develop/.wp-env.json

{
  "plugins": [
    "./study"  ←追加
    "./vendor/plugins/classic-editor"
  ]
}

Wordpress を起動します。

shell

$ wp-env stop
$ wp-env start

ダッシュボードでプラグインを確認します。
「study」が有効になっていれば OK です。

実際に使ってみる

新規投稿を作成し、study を挿入します。
[+] のボックスをクリックして、ウィジェット＞Study を探します。

Study – hello from the editor!

という文字列が挿入されるはずです。

開発開始

ターミナルから npm run start するとWebpackのwatchが働き、jsやscssを保存したときに自動でコンパイルをしてくれます。

shell

$ cd study
$ npm run start

ブロック名、namespaceを変える

namespaceとは

他のブロックと衝突しないためのnamespaceがついています。
デフォルトでは create-block になっているので自分の好きな名前にします。
この記事では my-plugin に変更します。

対象ファイルを編集

{ブロック名}.php、package.json、editor.scss、style.scss、block.jsonの5ファイルに記述されています。

{ブロック名}.php

study.php

 * Plugin Name:       Study
 * Description:       ブロックの説明
 〜略〜
 * @package           my-plugin
 */

// 関数名も変更する
function my_plugin_study_block_init() {
  register_block_type( __DIR__ );
}
// 関数名が変わったのでフックも変更
add_action( 'init', 'my_plugin_study_block_init' );

src/index.js

registerBlockType('my-plugin/study', {

editor.scss、style.scss

挿入されるエレメントには自動で wp-block-{namespace}-{ブロック名} というクラスが付与されるので変更します。

style.scss は編集画面、公開画面の両方に影響します。
editor.scss は編集画面用のスタイルです。style.scss より後に読み込まれます。

editor.scss

.wp-block-my-plugin-study {

style.scss

.wp-block-my-plugin-study {

block.json

名前、説明文、namespaceに加え、カテゴリーも変更します。
デフォルトでは「ウィジェット」ですが一番上のカテゴリ「テキスト」に変更します（任意です）。

block.json

"name": "my-plugin/study",
"version": "0.1.0",
"title": "Study",
"category": "text",
"icon": "smiley",
"description": "ブロックの説明",

アイコンも変更できます。標準で様々なアイコンが用意されていますのでそれを利用するのが簡単です。

反映されなければバージョンを上げる

新規に記事を作成して study を挿入します。

[+]の「テキスト」の最後に移動されているのが確認できればOKです。
ブロック一覧になければnamespaceの書き換えでミスしている可能性が高いです。

もしCSSが反映されていなければキャッシュが原因なので、キャッシュ対策として block.json のバージョンを上げます。

block.json

"version": "0.1.1",

バージョン情報はファイル読み込み時にパラメーターとして付与されます。
この変更で index.css?ver=0.1.1 のようになります。

再読み込みして色が反映されればOKです。

おわり

この章はここまでで終わりです。
次回から実装に入ります。

前回でやったこと

現在のディレクトリ構成

この章のゴール

ブロックの雛形を作成

.wp-env.json に雛形を追加して Wordpress 再起動

実際に使ってみる

開発開始

ブロック名、namespaceを変える

namespaceとは

対象ファイルを編集

{ブロック名}.php

src/index.js

editor.scss、style.scss

block.json

反映されなければバージョンを上げる

おわり

Discussion