【WordPress】自作のカスタムブロックをブロックエディタに追加する方法（サンプル配布）
2018年12月にリリースされたWordpress 5.0から、ブロックエディタ（Gutenberg）での記事編集がデフォルトとなりました。
直感的で使いやすく、最近はアップデートで種類も増えてきましたが、用意されているブロックだけでは物足りない…と感じる方は多いはず。
デフォルトの「カスタムHTML」ブロックや、「クラシック」ブロックなど方法はありますが、毎回それを書くのは手間ですし、一括でテンプレートをカスタマイズ・更新できないので不便ですよね。
一括で自由にカスタマイズできるブロックを使えるようにしたい…という方のために、自作したブロックをGutenbergエディタで呼び出せるようにする方法を解説します。
細かい部分まで説明すると長くなってしまうので、初回は簡単なブロックを1つ追加するまで解説します。
この記事で解説したサンプルを一式ダウンロードできるので、「読んでもよくわからない！」と言う方はデータをDLしちゃってください。
詳しいカスタマイズ方法も今後、当記事に追記していこうと思っています。
最低限、必要なスキル
解説をする前に、この記事の内容を理解・実践するには、
・ HTML
・ CSS
・ PHP
・ jQuery
これらの最低限の知識とスキルが必要です。
わからない箇所を自分で調べて解決できるスキルと理解力があればできるので、上級者である必要はありません。
僕自身もまだ勉強中ですが、なんとか実践できています。
「それなら大丈夫そう！」と思う方はこのまま読み進めてください。
紹介するのは「カスタムブロック用のプラグイン」を追加する手法
カスタムブロックを追加する方法は様々で、テーマのファイルに記述する、プラグインで追加するなどありますが、今回はプラグインで追加する方法を解説します。
人によりますが、テーマに追加するとテーマを変更した時にカスタムブロックの設定が効かなくなるので、プラグインで追加することをおすすめします。
今回、作成するのは上のようなサンプル。
それでは、早速実践してみましょう。
必要なフォルダとファイルを作成する
まずは、以下の構造でプラグイン全体のフォルダとファイルを作成します。
[gutenberg-custom-blocks] … プラグインを格納するフォルダ
┣ index.php … プラグインの設定をするファイル
┗ [sample-block-01] … カスタムブロック単体のフォルダ
┣ block.js
┣ index.php
┗ style.css
これらのファイルに後からコードを記述します。
「sample-block-01/block.js」を編集
( function( data, lodash, blocks, editor, i18n, element, hooks, components, compose ) {
// ▼変数を指定
var el = element.createElement;
const { assign } = lodash;
const { __ } = i18n;
const { AlignmentToolbar, BlockControls, RichText,InspectorControls, InnerBlocks } = editor;
const { registerBlockType, Editable, Toolbar } = blocks;
// ▲変数を指定
// ▼▼ブロックを登録
registerBlockType( 'gutenberg-custom-blocks/sample-block-01', {
//▼ ブロック名
title: 'サンプルブロック01',
//▼ アイコンとカラー
icon: {
foreground: 'red',
src: 'wordpress',
},
//▼ 登録するカテゴリー
category: 'common',
//▼ 値
attributes: {
content: {
type: 'string',
},
},
//▼ オプション設定
supports: {
//save関数で返される要素に対する設定
align: true, //(default:false) ブロックのalign設定。配列で個別指定も可能 (left, center, right, wide, full)
customClassName: true, //(default:true)クラス名の設定。有効にするとオリジナルのクラス名を入力する欄が表示される。
className: false, //(default:true)ブロック要素を作成した際に付く .wp-block-[ブロック名]で自動生成されるクラス名の設定。
},
// ▼ブロックの編集画面
edit: function( props ) {
var attributes = props.attributes;
var content = attributes.content;
var alignment = attributes.alignment;
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}
return [
el( RichText, {
tagName: 'p',
className: 'sampleBlock01 ' + props,
placeholder: 'テキストを入力',
value: content,
onChange: onChangeContent,
} ),
];
},
// ▲ブロックの編集画面
// ▼ブロックを保存
save: function( props ) {
return null;
},
// ▲ブロックを保存
} );
// ▲▲ブロックを登録
} )(
window.wp.data,
window.lodash,
window.wp.blocks,
window.wp.editor,
window.wp.i18n,
window.wp.element,
window.wp.hooks,
window.wp.components,
window.wp.compose,
);[gutenberg-custom-blocks]
┣ index.php
┗ [sample-block-01]
┣ block.js ← このファイルを編集
┣ index.php
┗ style.css
「sample-block-01」フォルダの中のblock.jsに、上記のコードをコピペします。
カスタムブロックを作成する時、主にいじるのは12〜56行。
○ 12行目
registerBlockType( 'gutenberg-custom-blocks/sample-block-01', {カスタムブロックを登録する関数。設定を格納する場所を指定します。後に編集するファイルで「“プラグインのフォルダ名”/“カスタムブロックのフォルダ名”」で登録するようにしているので、同じように指定してください。これを後から変えると別のブロックとして扱われてしまうので、最初に指定したら変更しないようにしましょう。
○ 13〜34行
//▼ ブロック名
title: 'サンプルブロック01',
//▼ アイコンとカラー
icon: {
foreground: 'red',
src: 'wordpress',
},
//▼ 登録するカテゴリー
category: 'original-sample',
//▼ 値
attributes: {
content: {
type: 'string',
},
},
//▼ オプション設定
supports: {
//save関数で返される要素に対する設定
align: true, //(default:false) ブロックのalign設定。配列で個別指定も可能 (left, center, right, wide, full)
customClassName: true, //(default:true)クラス名の設定。有効にするとオリジナルのクラス名を入力する欄が表示される。
className: false, //(default:true)ブロック要素を作成した際に付く .wp-block-[ブロック名]で自動生成されるクラス名の設定。
},カスタムブロックの設定と登録する値をここに記述します。それぞれの値は下記。
・title … 編集画面で表示されるブロック名。
・icon … 編集画面で表示されるブロックのアイコン。foregroundはアイコンの色、srcはWordPressで用意されているダッシュアイコンのスラッグを指定する。
・category … ブロックを分類するカテゴリーを下記から指定。オリジナルのカテゴリーも追加できますが、後々解説します。
'common' // '一般ブロック'
'formatting' // 'フォーマット'
'layout' // 'レイアウト要素'
'widgets' // 'ウィジェット'
'embed' // '埋め込み'
'reusable' // '再利用ブロック'・attributes … 可変する値（テキストや設定値など）を任意の名前と数、配列で割り当てる。これでいうとcontentのこと。typeは基本的にstringでOK。
・supports … 細かいオプション設定。数が多いので、とりあえず省略。一旦コピペしてください。
○ 35〜56行
// ▼ブロックの編集画面
edit: function( props ) {
var attributes = props.attributes;
var content = attributes.content;
var alignment = attributes.alignment;
function onChangeContent( newContent ) {
props.setAttributes( { content: newContent } );
}
return [
el( RichText, {
tagName: 'p',
className: 'sampleBlock01 ' + props,
placeholder: 'テキストを入力',
value: content,
onChange: onChangeContent,
} ),
];
},
// ▲ブロックの編集画面編集画面での挙動や変数の値を差し替える関数を記述する。46行目のreturn内の記述が投稿の編集画面で実際に反映されていく。（保存されるものとはまた別の扱い）tagNameでHTMLタグ、classNameでクラス名を指定できる。
可能な処理等は種類が多いので省略。以後、解説します。
「sample-block-01/style.css」を編集
p.sampleBlock01 {
font-size: 1.5em;
color: #fff;
background: red;
border: solid 5px blue;
}[gutenberg-custom-blocks]
┣ index.php
┗ [sample-block-01]
┣ block.js
┣ index.php
┗ style.css ← このファイルを編集
ブロックのスタイルとなるCSSを記述します。
このファイルは投稿の編集画面と、実際の画面（プレビュー）で読み込まれます。
「sample-block-01/index.php」を編集
<?php
defined( 'ABSPATH' ) || exit;
// ▼パスを取得
$AllDir = dirname( plugin_basename(__FILE__) );
$dirs = explode('/',$AllDir);
$PluginkDir = array_shift($dirs);
$BlockDir = array_pop($dirs);
// ▼▼ブロックを登録
register_block_type( $AllDir, array(
'editor_script' => $BlockDir,
//▼保存する値
'attributes' => array(
'content' => array(
'type' => 'string',
),
'className' => array(
'type' => 'string',
),
),
// ▲保存する値
'render_callback' => 'customBlock_00_01_SampleBlock', //レンダリングの関数
) );
// ▲▲ブロックを登録
// ▼▼レンダリングの関数
function customBlock_00_01_SampleBlock($attributes){
$html = '';
$html .= '<p class="sampleBlock01 '.$attributes['className'].'">'.$attributes['content'].'</p>';
return $html;
}
// ▲▲レンダリングの関数
?>[gutenberg-custom-blocks]
┣ index.php
┗ [sample-block-01]
┣ block.js
┣ index.php ← このファイルを編集
┗ style.css
該当のファイルに上記コードをコピー&ペースト。
主に編集する部分は下記の部分。
○ 14〜21行
'attributes' => array(
'content' => array(
'type' => 'string',
),
'className' => array(
'type' => 'string',
),
),block.jsで記述したattributesの値をここにも書いていきます。値の名前が一致しないと機能しないのでご注意を。クラス名を編集可能にした場合はclassNameを取得するのを忘れないでください。
○ 23行目
'render_callback' => 'customBlock_00_01_SampleBlock', //レンダリングの関数実際に投稿を表示する際にブロックをレンダリングする関数を指定します。こ子で指定した関数をすぐ下に記述していきます。
○ 28〜32行
function customBlock_00_01_SampleBlock($attributes){
$html = '';
$html .= '<p class="sampleBlock01 '.$attributes['className'].'">'.$attributes['content'].'</p>';
return $html;
}先ほど指定したレンダリング関数の処理をここで記述します。このコードが投稿を表示した時に反映されます。
「gutenberg-custom-blocks」直下の「index.php」を編集
<?php
/**
* Plugin Name: カスタムブロック追加プラグイン
* Description: 自作したカスタムブロックを追加するプラグインです。
* Version: 1.0.0
* Author: S-PREAD ていくみー
*
* @package gutenberg-custom-blocks
*/
defined( 'ABSPATH' ) || exit;
//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
// ▼▼カスタムブロックを読み込む関数
function gutenberg_customblocks_register_block() {
$registerBlocks = array (
'sample-block-01/index.php', //◀︎ サンプルブロック01
);
function gutenberg_customblocks_register_loop($BlockFile) {
$AllDir = dirname( plugin_basename(__FILE__) );
$AllDirs = explode('/',$AllDir);
$PluginkDir = array_shift($AllDirs);
$BlockDirs = explode('/',$BlockFile);
$BlockDir = array_shift($BlockDirs);
$Block__DIR__ = __DIR__.'/'.$BlockFile;
load_plugin_textdomain( $PluginkDir, false, $BlockDir . '/languages' );
if ( ! function_exists( 'register_block_type' ) ) {
// Gutenberg is not active.
return;
}
// ▼block.jsを読み込み
wp_register_script(
$BlockDir,
plugins_url( 'block.js', $Block__DIR__ ),
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'underscore' ),
filemtime( plugin_dir_path( $Block__DIR__ ) . 'block.js' )
);
// ▼style.cssを読み込み
wp_enqueue_style(
$BlockDir,
plugins_url( 'style.css', $Block__DIR__ ),
array( ),
filemtime( plugin_dir_path( $Block__DIR__ ) . 'style.css' )
);
include $BlockFile;
if ( function_exists( 'wp_set_script_translations' ) ) {
/**
* May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
* plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
* https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
*/
wp_set_script_translations( $BlockDir, $PluginkDir );
}
}
$blockRegister = "gutenberg_customblocks_register_loop";
foreach ($registerBlocks as $value) {
$blockRegister($value);
}
}
add_action( 'init', 'gutenberg_customblocks_register_block' );
// ▲▲カスタムブロックを読み込む関数
//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
?>[gutenberg-custom-blocks]
┣ index.php ← このファイルを編集
┗ [sample-block-01]
┣ block.js
┣ index.php
┗ style.css
先程の「gutenberg-custom-blocks」フォルダの直下に「index.php」を作成し、上記のコードを記述します。
このファイルがプラグイン全体の設定をする役割になります。
編集する箇所は以下。
○ 4行目：「Plugin Name: ◯◯◯」
//* Plugin Name: カスタムブロック追加プラグイン◯◯◯の部分は任意でプラグイン名を付けてください（後から変更可）。プラグイン一覧に記述したプラグイン名が表示されます。
○ 5行目：「Description: ◯◯◯」
//* Description: 自作したカスタムブロックを追加するプラグインです。◯◯◯の部分は任意でプラグインの説明を記述してください（後から変更可）。プラグイン説明欄に表示されます。
○ 6行目：「Version: ◯◯◯」
//* Version: 1.0.0◯◯◯の部分にプラグインのバージョンを記述しましょう（例：1.0）。ナンバリングは自由につけてください。
○ 7行目：「Author: ◯◯◯」
//* Author: S-PREAD ていくみー◯◯◯の部分はプラグインの管理者名です。自分の名前やペンネームなどを付けましょう。
○ 18行目
$registerBlocks = array (
'sample-block-01/index.php', //◀︎ サンプルブロック01
);先程、作成したブロックフォルダ内のindex.phpを指定します。これを指定しておけば後は自動でカスタムブロックを登録してくれる処理にしています。
「wp-content/plugins/」に作成した「gutenberg-custom-blocks」をアップロード
一通り作成したファイルをプラグインのフォルダごと、FTPサーバーの「wp-content/plugins/」にアップロードしましょう。
問題ないとは思いますが、パーミッションの設定を間違えないように気を付けて。
カスタムブロックが追加されました
試しに、投稿の編集画面で「＋」マークを押してみると、先程作成したブロックが一覧に出るようになりました。
プレビューで見てみるとこんな感じ。
CSSも問題なく反映されていますね。
ダウンロードはこちらから
ここまで解説した内容をまとめたデータを一式ダウンロードできます。
記事を読んでもわからなかった方、作成が面倒な方はこちらからどうぞ。
カスタムブロックでさらにオリジナリティのあるサイトにしよう
今回は簡単な構造のブロックですが、これを応用することで複雑な構造のカスタムブロックも自由に追加することができるようになります。
デフォルトで用意されているブロック、テーマやプラグインで追加されるブロックじゃ物足りない方は、この方法で好きなテンプレートのブロックを作成しましょう。
応用編は今後、追記していきますのでお待ちくださいね。
質問や、もっといい方法あるよ！っていう優しい方はぜひコメントしてもらえると嬉しいです。
それでは。