「前回書いた記事」と同じBlockをesnextに書き換えたものを見ていきます。

引き続き、参照元のサイトはここ「Gutenberg Handbook」です。

前回との違いは、esnextという未来のjavascriptを使ってるところ、これを使うと、buildが必要になるので、javascriptのソース「block.js」を webpackでbuildして「block.build.js」にするとかやっています。

今回作るファイルはこんな感じです。昨日はなかったファイルが三つほど追加になります。

追加した設定ファイル1 webpack.config.js

module.exports = {
    entry: './block.js',
    output: {
        path: __dirname,
        filename: 'block.build.js',
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
        ],
    },
};

追加した設定ファイル2 .babelrc

{
	"presets": [
		[ "env", {
			"modules": false,
			"targets": {
				"browsers": [
					"last 2 Chrome versions",
					"last 2 Firefox versions",
					"last 2 Safari versions",
					"last 2 iOS versions",
					"last 1 Android version",
					"last 1 ChromeAndroid version",
					"ie 11"
				]
			}
		} ]
	],
	"plugins": [
		[ "transform-react-jsx", {
			"pragma": "wp.element.createElement"
		} ]
	]
}

追加した設定ファイル3 package.json

{
  "name": "01-basic-esnext",
  "version": "1.0.0",
  "license": "GPL-2.0-or-later",
  "main": "block.js",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.1",
    "webpack": "^3.1.0"
  },
  "scripts": {
    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
    "dev": "cross-env BABEL_ENV=default webpack --watch"
  }
}

少々改造した index.php

前回作成したファイルとほとんど同じですが、block.js だったところを、build後のファイル block.build.js に書き換えています。

<?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.build.js', __FILE__ ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'block.build.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' );

esnextに書き換えた block.js

前回作成したblock.jsの esnext版。スッキリシンプル。


const { __, setLocalData } = wp.i18n;
const { registerBlockType } = wp.blocks;

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

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
	title: __('Example: Basic (esnext)', 'gutenberg-examples' ),
	icon: 'universal-access-alt',
	category: 'layout',
	edit() {
		return <div style={ blockStyle }>Basic example with JSX! (editor)</div>;
	},
	save() {
		return <div style={ blockStyle }>Basic example with JSX! (front)</div>;
	},
	
});

ビルドしてblock.build.jsを作る 

pluginを作ったフォルダ、first-block-jsnextに移動、必要なpackageをインストールしてから、buildを叩く。


npm install
npm run build

Blockを確認

wordpressの設定画面で、pluginをactivateしたあと、Blockを選ぶとこんな感じです。