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

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

環境

− WordPress
- Gutenberg 1.2.1

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

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

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

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

上記を作成してみました。
プラグインとして、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

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

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

環境

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

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

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

block.jsの作成

参考