ジェネレーターを使わないで、ゼロからBlockを作ってみます。 

この記事の、参考サイトというか、元ネタは、WordPress Gutenberg Handbookのチュートリアルです。そこにある、Gutenberg Example の 01-basic を使っています。(※ 2018/12/18現在だと、そのまま参考サイトのgithubにあるサンプルコードを使うとエラーになってしまうので、エラーが出るところを修正して載せています。）

wordpressのプラグインフォルダ (私の環境だと、/var/www/html/wp-content/plugins ) に「first-block」というフォルダを作成して、その中にファイルを二つ「index.php」と「block.js」作成します。最低限この二つのファイルがあれば、blockとして動かせるみたい。

index.php に Enqueuing Block Scripts

こっちは、blockのjavascriptファイル用設定ファイルのような位置付け、pluginとしての情報色々を書き込むファイルかな。

ソースの最初にあるコメント、{Plugin Name、Description、… } は WordPress管理画面の設定にある Plugins に表示される一覧の名称、説明だと思われる。

「wp_register_script」BlockのjavascriptへのPATH、実装する機能のArray

addAction(‘init’, …) で function「gutenberg_examples_01_register_block」を読み込んでいて、

「register_block_type」block-typeに ‘gutenberg-examples/example-01-basic’ を指定。これは、javascript側のregisterBlockTypeと紐付けかな。さらにその中の「editor_script」は、上の「wp_register_script」と紐づいていそう。

<?php

/**
 * Plugin Name: Gutenberg Examples Basic
 * Plugin URI: https://github.com/WordPress/gutenberg-examples
 * Description: This is a plugin demonstrating how to register new blocks for the Gutenberg editor.
 * Version: 1.0.2
 * Author: the Gutenberg Team
 *
 * @package gutenberg-examples
 */

defined( 'ABSPATH' ) || exit;

function gutenberg_examples_01_register_block() {
	if ( ! function_exists( 'register_block_type' ) ) {
		// Gutenberg is not active.
		return;
	}
	wp_register_script(
		'gutenberg-examples-01',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
	);
	register_block_type( 'gutenberg-examples/example-01-basic', array(
		'editor_script' => 'gutenberg-examples-01',
	) );

    if ( function_exists( 'wp_set_script_translations' ) ) {
        wp_set_script_translations( 'gutenberg-examples-01', 'gutenberg-examples');
    }
}
add_action( 'init', 'gutenberg_examples_01_register_block' );

block.js に Registering the Block

こっちは、blockの中身、「blocks.registerBlockType」のところは、index.phpで書いたのと同じ値。

functionの最後のかっこのところで、index.phpで array( ‘wp-blocks’, ‘wp-i18n’, ‘wp-element’ ) として指定したライブラリを引数に受け取ってるのかな。あとは、タイトル、アイコンなどがあって、function「save, edit」のところでは、blockのedit, saveを行う時の html を書けるっぽい。

( function( blocks, i18n, element ) {
	var el = element.createElement;
	var __ = i18n.__;

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

	blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
		title: __( 'Example: Basic', 'gutenberg-examples' ),
		icon: 'universal-access-alt',
		category: 'layout',
		edit: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Hello World, step 1 (from the editor).'
			);
		},
		save: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Hello World, step 1 (from the frontend).'
			);
		},
	} );
}(
	window.wp.blocks,
	window.wp.i18n,
	window.wp.element
) );

動作確認

ファイルを配置して、編集が終わったら、動作確認。こんな感じのBlockが使えるようになります。