Gutenbergカスタムブロックその1

Gutenbergのカスタムブロックを制作します。
まずは、第1回ということでシンプルなものを。

カスタムブロックはプラグインという形で実装します。

pluginディレクトリに専用のフォルダを好きな名前で用意してください。（今回の場合はgutenberg-custom-block-sample01）

プラグインフォルダ内のphpファイルのコードです。(gutenberg-custom-block-sample01.php)

<?php
/*
Plugin Name: Gutenberg Custom Block Sample01
Plugin URI:
Description:
Version: 1.0.0
Author: ETERNITY DESIGN
Author URI: https://eternitydesign.net/
*/

defined( 'ABSPATH' ) || exit;


function gutenberg_sample01_register_block() {

	if(!function_exists( 'register_block_type' ) ) {
		// Gutenbergがアクティブでない場合
		return;
	}

	// block.jsをロードするように
	wp_register_script(
		'gutenberg-custom-block-sample01',
		plugins_url('block.js', __FILE__),
		array('wp-blocks', 'wp-element'),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js')
	);

	// カスタムブロックの登録
	register_block_type('ed-gutenberg-samples/sample01', array(
		'script' => 'gutenberg-custom-block-sample01',
	));

}
add_action('init', 'gutenberg_sample01_register_block');

?>

次にblock.jsというファイルを同じディレクトリに用意します。

(function( blocks, element ) {

	var el = element.createElement;

	var blockStyle = {
		backgroundColor: '#900',
		color: '#fff',
		padding: '18px',
	};

	blocks.registerBlockType('ed-gutenberg-samples/sample01', {
		title: 'gutenberg_sample01_register_block',

		// https://developer.wordpress.org/resource/dashicons/#tagcloud
		icon: 'universal-access-alt',

		// common, formatting, layout, widgets, embed
		category: 'layout',
		edit: function() {
			return el(
				'p',
				{ style: blockStyle },
				'gutenberg Custom Block Sample 01'
			);
		},
		save: function() {
			return el(
				'p',
				{ style: blockStyle },
				'gutenberg Custom Block Sample 01'
			);
		},
	} );
}(
	window.wp.blocks,
	window.wp.element
));

プラグインを有効化し、ブロックを追加してみてください。
gutenberg Custom Block Sample 01という固定テキストを追加するだけのカスタムブロックができました。

今回のサンプルはこちらのサンプルをシンプルに改変したものになります。

2018/10/30

WordPress