ワードプレス公式チュートリアルでブロックを作成②【ブロック雛形作成】

2022年6月18日

『ブロックを自作したい』
『ブロックをカスタマイズしたい』

そう考えてワードプレス公式ページのブロック作成チュートリアルに取り組んでみたけれども、わかりにくくて途中で挫折した。

そんなあなたに向けて贈る記事の第二弾です。公式サイトのチュートリアルを参考にしてブロックの雛形を作成し、プラグインとして導入します。

※block.jsonファイルの配置フォルダが執筆時（2022年1月）から変更になっていたので、2022年6月にリライトしました。

第一弾の記事【環境準備編】の続きから始めます。まだの方は以下の記事でNode.jsをインストールしてVS Codeのターミナルを開いた状態としてくださいね。

ワードプレス公式チュートリアルでブロックを作成①【環境準備編】

2022年1月リリースのワードプレスversion5.9でフルサイトエディターが実装されると、ブロックをサイト ...

 https://web-children.com/2022/01/01/block-creation-preparati...

Node.jsとVS Codeのほか、今回はワードプレスのローカル環境が必要となります。Local By Flywheelでワードプレスサイトを１つ準備しておきましょう。

作成するブロックの雛形

次のようなブロックを作成します。ブロック名はGutenprideです。

ブロックエディター側のブロック表示

web表示側のブロック表示

いずれも青背景に白字のテキストが表示されるだけの単純なブロックですが、今後作成するブロック作の雛形とすることができます。

ブロック作成の手順概要

1. VS Codeのターミナルで、Local環境ワードプレスサイトのpluginsフォルダにcdする
2. ブロック作成コマンドを実行（Gutenprideというプラグインを作成）
3. プラグインGutenprideを有効化する
4. ブロックエディターでGutenprideブロックをページ内に挿入する

ブロック作成手順詳細

①ターミナルでPluginフォルダにcd（チェンジディレクトリ）

VS Codeのターミナルで次のコマンドを実行して、プラグインフォルダへ切り換えます。

>cd '（Localワードプレスサイトのpluginフォルダまでのpath）’

Local by FlywheelでPluginフォルダがどこにあるかわからない場合は次のように進めましょう。

１．Local by Flywheelのサイトスタート画面でpathへのアクセスボタンをクリック

するとワードプレスがインストールされたフォルダが開きます。

上の例では、arkheというフォルダがワードプレスがインストールされたフォルダとなります。
（ちなみにarkheは私が最近カスタマイズによく使っているテーマArkheのことです。シンプルかつ洗練されたデザインで使いやすいのでカスタマイズにはもってこいです）

２．pluginsフォルダを開ける

ワードプレスフォルダから次のようpluginsフォルダまで辿っていきます。

>app>public>wp-content>plugins

３．フォルダアイコンをターミナル内にドラッグ＆ドロップ

VS Codeのターミナルに >cd と入力した状態でpluginsフォルダのアイコンマークをドラッグ＆ドロップすると”＆”をはさんでフォルダへのpathが入力されます。

４．”＆”を削除してコマンドを実行

”＆”は邪魔なので、カーソルを動かして削除し、>cd '（pluginフォルダまでのpath）’　としてから[Enter]キーを押してcdを実行します。（※cdの後ろには半角スペースが必要）

上のようにplugins>の後ろでカーソルが表示されればうまくチェンジディレクトできています。

②ブロック作成コマンドを実行

pluginsフォルダにcdされたことを確認できたら、次のコマンドを実行します。

>npx @wordpress/create-block gutenpride

@wordpress/create-blockは公式ページはこちら。

@wordpress/create-block – Japanese Team – WordPress.org 日本語

Create Block は、ブロックを登録する WordPress プラグインのひな形を作成する公式サポート…

 https://ja.wordpress.org/team/handbook/block-editor/referenc...

コマンド実行後、途中で OK to proceed? と聞かれますが y をクリックして進めましょう。

コマンドが終了してからpluginsフォルダを見ると、Gutenprideというフォルダが作成されているのが確認できるでしょう。

Creating a new WordPress block in "gutenpride" folder.
Creating a "block.json" file.  
Creating a "package.json" file.
Installing npm dependencies. It might take a couple of minutes...
Installing `@wordpress/scripts` package. It might take a couple of minutes...
Formatting JavaScript files.
Compiling block.
Done: block "Gutenpride" bootstrapped in the "gutenpride" folder.
Inside that directory, you can run several commands:
  $ npm start
    Starts the build for development.
  $ npm run build
    Builds the code for production.
  $ npm run format
    Formats files.
  $ npm run lint:css
    Lints CSS files.
  $ npm run lint:js
    Lints JavaScript files.
  $ npm run packages-update
    Updates WordPress packages to the latest version.
To enter the folder type:
  $ cd gutenpride
You can start development with:
  $ npm start
Code is Poetry
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.3.0
npm notice Run npm install -g npm@8.3.0 to update!
npm notice
PS C:\Users\satos\Local Sites\arkhe\app\public\wp-content\plugins>

③プラグインGutenprideを有効化

ワードプレスのダッシュボードを開けて、インストール済みプラグインを確認するとGutenprideというプラグインが確認できるはずです。有効化しましょう。

④ブロックGutenprideを挿入

ブロックエディターを開けて、ブロック一覧表のウィジェットの中を見るとGutenprideというブロックが表示されます。

通常のブロックと同じ操作でブロックをページ内に挿入してみましょう。本記事のはじめの方で紹介したように次のブロックが表示されます。

ブロックエディター内のブロック

Google Chromeの開発者ツールでこのブロックのHTMLとCSSも確認しておきます。

<p id="block-690f6309-6515-462c-aa28-e85f78c61cc1" tabindex="0" role="group" aria-label="ブロック: Gutenpride" data-block="690f6309-6515-462c-aa28-e85f78c61cc1" data-type="create-block/gutenpride" data-title="Gutenpride" class="block-editor-block-list__block wp-block wp-block-create-block-gutenpride">
    Gutenpride – hello from the editor!
</p>

.wp-block-create-block-gutenpride {
    background-color: #21759b;
    color: #fff;
    padding: 2px;
}
.wp-block-create-block-gutenpride {
    border: 1px dotted red;
}

web表示側のブロック

<p class="wp-block-create-block-gutenpride">
    Gutenpride – hello from the saved content!
</p>

.wp-block-create-block-gutenpride {
    background-color: #21759b;
    color: #fff;
    padding: 2px;
}

ブロックエディター側とweb表示側とでは表示されているテキストが若干異なります。またブロックの見映えとCSSを見てわかるように、ブロックエディター側のみ赤枠が表示されています。

この違いも含めてそれぞれのブロックがどのようにして作成されているのかを、できあがったgutenprideフォルダ内のファイルのコードを見ながら解説していきます。

できあがったファイルの確認と役割

今回できあがったファイルをざっと確認しておきましょう。

gutenprideフォルダの中

srcフォルダの中

buildフォルダの中

各ファイルの役割

まず重要なのはgutenprideフォルダ直下にあるgutenpride.phpとblock.jsonです。

gutenpride.phpにプラグインGutenprideの宣言文とブロックの設計図であるblock.jsonを読み込む記述がされています。

block.jsonはブロックのメタデータです。ブロックの名前やカテゴリー、属性などを記述することでブロックの設計図となります。（srcフォルダとbuildフォルダの両方に配置されています）

ブロックを形成する具体的パーツはbuildフォルダの中にあるJSとCSSファイル（index.js、style-index.css、index.css）です。これらを読み込むようにblock.jsonで指定されています。

しかしわれわれがブロックを作成したりカスタマイズするとき編集するのは、buildフォルダ内のファイルではなくsrcフォルダ内のファイル（block.json、index.js、edit.js、save.js、style.scss、editor.scss）です。そしてsrcフォルダがビルドされることによってbuildフォルダを自動的に形成することになります。

ビルドしてみる

ビルドによってbuldフォルダが自動形成されることを確認しておきましょう。buildフォルダを削除してから次のビルドコマンドをターミナルで実行します。

まずは、>cd 'gutenpride’ でcdしてから次のコマンドを走らせましょう。

>npm run build

これで新たにbuildフォルダが形成されます。ファイルの作成日時を見るとビルドコマンドが終了した時間であることが確認できるでしょう。

各ファイルのコード

各ファイルのコードを見て、もう少し詳しく各ファイルの役割を確認していきます。コード内の不要なコメント記述は削除して表示します。

gutenpride直下のファイル

gutenpride.php

<?php
/**
 * Plugin Name:       Gutenpride
 * Description:       Example block written with ESNext standard and JSX support – build step required.
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       gutenpride
 *
 * @package           create-block
 */

function create_block_gutenpride_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

最初のコメント記述は、Gutenprideというプラグインを定義するためのものです。

register_block_type(__DIR__)をinitにフックすることでブロックを登録します。具体的には、(__DIR__)で指定した場所にあるblock.jsonを読み込みます。

function create_block_gutenpride_block_init() {
	register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

srcフォルダ内のファイル

実際にブロック作成に直接使われるのはbuildフォルダ内の各ファイルですが、srcフォルダ内のファイルがその原型となっています。srcフォルダをbuild（コンパイル）してbuildフォルダが作成されるのです。

したがって我々がブロックを作成するために直接編集するのは、src内の各ファイルということになります。

block.json

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "create-block/gutenpride",
	"version": "0.1.0",
	"title": "Gutenpride",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block written with ESNext standard and JSX support – build step required.",
	"supports": {
		"html": false
	},
	"textdomain": "gutenpride",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

block.jsonでメタデータ（ブロックの設計図なようなもの）を記述しています。例えば、"apiVersion": 2 ではこのブロックがAPIバージョン２に従って作成されることを指定しているので、関連するJSファイルなどをAPIバージョン２のルールに則って記述する必要があります。

このほか主なところを解説すると、

block.jsonに詳しくは、次の公式ページを参照するとよいでしょう。

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/

index.js

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';

registerBlockType('create-block/gutenpride', {
	edit: Edit,
	save,
});

関連するオブジェクトやファイルをimportしたあと、registerBlockType( )を実行します。

registerBlockType( '（ブロックのname）’, （ブロックの構成）);

（ブロックのname）はblock.jsonの “name" と同じとし、namespace/block-nameの形式をとります。

（ブロックの構成）はオブジェクトで、{ key: value,} の形式をとります。

（ブロックの構成）の、edit でブロックエディター内のブロックを、save でwebサイト側で表示されるブロックの内容を記述していきます。この save で記述したデータはデータベースのpost_content フィールドに保存されます。

editと save の内容は、importしているedit.jsとsave.jsの中に記述してあります。

edit.js

ブロックエディター内で表示されるブロックのメインパーツです。

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			{__('Gutenpride – hello from the editor!', 'gutenpride')}
		</p>
	);
}

return( )の中の記述がブロックとして出力されます。

実際にブロックエディター内に表示されたブロックとreturn( )内の記述を照合すると記述の意味がわかるでしょう。

ブロックエディター内に表示されたブロック

単に文字列”Gutenpride-hello from the editor!”を出力するという目的であれば、以下のように記述を変えても可能です。（変更箇所は<p>タグの中だけです。）

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<p {...useBlockProps()}>
			Gutenpride – hello from the editor!
		</p>
	);
}

書き換えてedit.jsを保存したあと、ターミナル内で >npm run build を実行すると新しくbuildフォルダ内のファイルが更新されてブロックに反映されます。無事更新されたかどうかはbuildフォルダ内のファイルの日時を確認してみてください。

useBlockProps( )について

useBlockProps( )はブロックの属性を記述する関数です。例えばmy-classnameというクラス名をブロックに付与したい場合は次のように記述します。

useBlockProps( {
	className: 'my-classname',
} );

今回のedit.js内のuseBlockPropsでは( )内が空なので属性は何も指定していません。それでもuseBlockPropsを記述しているのは、block.jsonで “apiVersion": 2 と記述した場合ブロックのラッパー要素に必須となるからです。

edit.jsではuseBlockProps( )、save.jsではuseBlockProps.save( )が必須となります。

(旧)JavaScript のバージョンとビルド手順 – Japanese Team – WordPress.

(2023/12/24) この文書の原文は削除されました。以後は「ブロック開発の基本原理」以下を参照ください ...

 https://ja.wordpress.org/team/handbook/block-editor/referenc...

save.js

webサイト側で表示されるブロックのメインパーツです。データベースに保存されています。

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
	return (
		<p {...useBlockProps.save()}>
			{__('Gutenpride – hello from the saved content!', 'gutenpride')}
		</p>
	);
}

こちらもedit.jsと同じく、return( )内の記述がweb表示側に出力されますが、属性指定関数が useBlockProps.save となっていることに注意してください。

これも実際にweb表示されたブロックと照合しておきましょう。

web表示されたブロック

style.scss

ブロックエディター側とフロント側（web表示側）の両方に適用されるCSSの元となるファイルです。

.wp-block-create-block-gutenpride {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

このstyle.scssがビルドされて、buildフォルダのstyle-index.cssとなります。

editor.scss

ブロックエディター側だけに適用するCSSの元ファイルです。

.wp-block-create-block-gutenpride {
	border: 1px dotted #f00;
}

このeditor.scssがビルドされて、buildフォルダのindex.cssとなります。

ブロックエディター側のブロックだけに赤枠が表示されるスタイルとなっていたのは、このeditor.scssが原因だったというわけですね。

buildフォルダ内のファイル

buildフォルダ内のファイルは、ビルドされた結果なので、これらのファイルを直接編集することはありません（というかしてはいけません）。

内容だけ確認しておきましょう。

block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "create-block/gutenpride",
  "version": "0.1.0",
  "title": "Gutenpride",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block written with ESNext standard and JSX support – build step required.",
  "supports": {
    "html": false
  },
  "textdomain": "gutenpride",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

index.asset.php

<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element', 'wp-i18n'), 'version' => '850286137e6b43857ecc517ee0d0289d');

index.jsの中で使う関数やオブジェクトが依存するハンドル名を指定しています。このおかげで、わざわざphpファイルの中でwp_register_scriptで依存性を記述する必要がなくなります。（ビルドでなく自分で素のJSでブロックを作成する場合はこの手間が必要）

index.js

実際にブロック形成時に走るJSです。次のように圧縮された形となっています。

!function(){"use strict";var e,r={273:function(){var e=window.wp.blocks,r=window.wp.element,n=window.wp.i18n,t=window.wp.blockEditor;(0,e.registerBlockType)("create-block/gutenpride",{edit:function(){return(0,r.createElement)("p",(0,t.useBlockProps)(),(0,n.__)("Gutenpride – hello from the editor!","gutenpride"))},save:function(){return(0,r.createElement)("p",t.useBlockProps.save(),(0,n.__)("Gutenpride – hello from the saved content!","gutenpride"))}})}},n={};function t(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,t),i.exports}t.m=r,e=[],t.O=function(r,n,o,i){if(!n){var u=1/0;for(l=0;l<e.length;l++){n=e[l][0],o=e[l][1],i=e[l][2];for(var c=!0,p=0;p<n.length;p++)(!1&i||u>=i)&&Object.keys(t.O).every((function(e){return t.O[e](n[p])}))?n.splice(p--,1):(c=!1,i<u&&(u=i));if(c){e.splice(l--,1);var f=o();void 0!==f&&(r=f)}}return r}i=i||0;for(var l=e.length;l>0&&e[l-1][2]>i;l--)e[l]=e[l-1];e[l]=[n,o,i]},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},function(){var e={826:0,46:0};t.O.j=function(r){return 0===e[r]};var r=function(r,n){var o,i,u=n[0],c=n[1],p=n[2],f=0;if(u.some((function(r){return 0!==e[r]}))){for(o in c)t.o(c,o)&&(t.m[o]=c[o]);if(p)var l=p(t)}for(r&&r(n);f<u.length;f++)i=u[f],t.o(e,i)&&e[i]&&e[i][0](),e[u[f]]=0;return t.O(l)},n=self.webpackChunkgutenpride=self.webpackChunkgutenpride||[];n.forEach(r.bind(null,0)),n.push=r.bind(null,n.push.bind(n))}();var o=t.O(void 0,[46],(function(){return t(273)}));o=t.O(o)}();

style-index.css

ブロックエディター側とweb表示側の両方に適用されるCSSです。srcフォルダ内のstyle.scssから作成されます。

.wp-block-create-block-gutenpride{background-color:#21759b;color:#fff;padding:2px}

index.css

ブロックエディター側のみに適用されるCSSです。srcフォルダ内のeditor.scssから作成されます。

.wp-block-create-block-gutenpride{border:1px dotted red}

ビルドの方法

script作成に使えるコマンドはpackage.jsonに記述されています。

"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start",
		"packages-update": "wp-scripts packages-update"
	},

このうちよく使うのはbuildとstartです。

まず単純にビルドするのがbuildコマンドです。

>npm run build

出来上がったJSやCSSファイルは圧縮された形で出来上がるので、最終配布物の作成に向いています。

しかし開発中はstartコマンドの方が便利です。

>npm run start

startを走らせると、コードを書き換えるたびにビルドフォルダ内のファイルに非圧縮の形で反映されます。したがって、開発中にはこのstartを使っておいてブロックを仕上げていき、最後にはbuildを走らせて完成させるとよいでしょう。

ちなみに Ctrl+c でstartが走っている状態から抜けることができます。

まとめ

ブロック雛形（Gutenprideブロック）を作成する手順をもう一度見ておきましょう。

1. VS Codeのターミナルで、Locak環境ワードプレスサイトのpluginsフォルダにcdする
2. ブロック作成コマンドを実行
3. プラグインGutenprideを有効化する
4. ブロックエディターでGutenprideブロックをページ内に挿入する

これでGutenprideというブロックがプラグインとして使えるようになります。このときpluginsフォルダの中のgutenprideフォルダにブロック用の各ファイルが形成されています。

次回は今回作成した雛形ブロックをモデファイして、テキスト入力機能をつけていきます。

ワードプレス公式チュートリアルでブロックを作成③【テキスト入力機能をつける】

『ブロックを自作したい』『ブロックをカスタマイズしたい』 そう考えてワードプレス公式ページのブロ ...

 https://web-children.com/2022/01/04/block-creation-textcontr...

ワードプレスの始め方
～稼ぐためのしくみづくりまでを
徹底解説！！

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

詳細はこちら

amazonでたった１コインで手に入れる