WordPressのGutenbergに自作のブロックを追加する（実用性は無し）

WordPressのGutenbergを見て未来を感じたのでいじってみました。

Gutenberg自体が開発途上だったり、Reactのこととかあったりしするので、コード自体は結構ムダ知識なんですが、こんなことができるんだよ。というメモがわり。

環境

− WordPress

• Gutenberg 1.2.1

カスタムブロックの追加手順

1. プラグインファイルの作成
2. block.jsの作成
3. 必要に応じてスタイルシートの作成

です。簡単なブロックならあっというまに追加できてしまいます。

猫のイラストを挿入できるカスタムブロック

上記を作成してみました。
プラグインとして、Gutenberg 1.2.1　が動いているWordPressにインストールしていただければ動くと思います。

猫のイラストが挿入できる・・だけのカスタムブロックです。

こんなやつ。

プラグインファイルの作成

プラグインファイルを作成します。
大したことはしていないです。ブロックを実際にコントロールするblock.jsを読み込んでいるだけです。
あとは、それのスタイルシートです。（エディタ側、表示側の両方を作成します）

nyankoblock.php

//エディタ側
add_action( 'enqueue_block_editor_assets', function () {
	//ブロック用のjs
	wp_enqueue_script( 'nyanko-block01', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-element' ));

	$plugin_url = plugin_dir_url( __FILE__ );
	wp_localize_script( 'nyanko-block01' , 'mywp' , array( 'plugin_url' => $plugin_url ) );

	//エディタ側のスタイル
  wp_enqueue_style( 'nyanko-block01-editor', plugins_url( 'editor.css', __FILE__ ),array( 'wp-edit-blocks' ),filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));

});

//表示側のスタイル
add_action( 'enqueue_block_assets', function () {
	wp_enqueue_style( 'nyanko-frontend', plugins_url( 'style.css' , __FILE__ ), array( 'wp-blocks' ), filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));
});

block.jsの作成

実際にブロックの動作はこれでコーディングします。React.jsです。（2017-09-30現在）

block.js

( function() {
	var el = wp.element.createElement;
	var registerBlockType = wp.blocks.registerBlockType;

	registerBlockType( 'shin1kt/nyanko', { //任意の名前　プリフィックス的
		title: 'nyanko', // ブロック名
		icon: function(){
			//ブロックアイコン　imgタグとかでもOK
			return el(
				'img',
				{src: mywp.plugin_url + '/neko-icon.svg',class:'nyanko-icon'}
			);
		},
		category: 'common',//ブロックのカテゴリ

		edit: function( props ) {
			//エディタ画面で挿入される要素
			return el(
				'div',
				{
					class: 'nyan-block',
				},
				React.createElement('div', {class:'nyan-ballon'},
					React.createElement('p', {},'にゃーん')
				),
				React.createElement('img', {src: mywp.plugin_url + '/neko.svg'})
			);
		},


		save: function( props ) {
			//表示側でのHTML要素
			return el(
				'div',
				{
					class: 'nyan-block',
				},
				React.createElement('div', {class:'nyan-ballon'},
					React.createElement('p', {},'にゃーん')
				),
				React.createElement('img', {src: mywp.plugin_url + '/neko.svg'})
			);
		},
	} );
})();

とにかく動きを覚えるために最低限のコードのみ
固定のHTMLを挿入するブロックです。

icon:ブロックのアイコンの見た目や名前
category:ブロックの表示場所
edit: 編集画面で挿入される要素
save: 表示側のHTML要素

上記を設定してあげるだけです。

あとはスタイルとかを書いてあげれ動きます。

以上。

実際には、これからバージョンアップで変わるかもだし、そもそもReact以外で書き直しになったら上記コードはムダ知識になんですが、将来的にGutenbergがリリースされたときには、いろいろな便利なカスタムブロックを作れるようになるといいな。と思う今日このごろ。

そんなWordPressの未来をすこし感じたくて学んでみました。(^^

参考

https://github.com/WordPress/gutenberg/tree/master/blocks
https://github.com/ahmadawais/Gutenberg-Boilerplate

猫のイラストはこちらのを使わせていただきました。