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という固定テキストを追加するだけのカスタムブロックができました。
今回のサンプルはこちらのサンプルをシンプルに改変したものになります。