WordPress Gutenberg の真価

ついに、WordPress 5.0 がリリースされました！
実際に使用した感触も踏まえ、Gutenbergについて少し書かせて頂きたいと思います。

Gutenbergとは

WordPress 5.0 に搭載されたビジュアルエディターです。
https://ja.wordpress.org/gutenberg/

特徴

・ブロックでコンテンツを作成する
・ウィジェットを追加できる
・再利用ブロックを保存できる

便利な機能

1. ブロックテンプレート

ブロックテンプレートを作成すると、ブロックを配置した状態で、記事編集をスタートすることができます。
投稿タイプによってテンプレートを指定できるので、投稿タイプが複数あるサイトにおすすめです。

function myplugin_register_book_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Books',
        'show_in_rest' => true,
        'template' => array(
            array( 'core/image', array(
                'align' => 'left',
            ) ),
            array( 'core/heading', array(
                'placeholder' => 'Add Author...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Add Description...',
            ) ),
        ),
    );
    register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

参考：
https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-templates/
https://capitalp.jp/2017/12/03/gutenberg-new-block-saves-cf-manufacturing-industory/

2. カスタムブロック

オリジナルのブロックを作成することができます。
ブロックはJavaScriptで実装されますが、スクリプトを読み込む必要があります。

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        plugins_url( 'step-01/block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );

ブロックを実装します。

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
    title: 'Hello World (Step 1)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function() {
        return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
} );

参考：
https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/
https://capitalp.jp/2018/02/28/my-first-gutenberg-block/

3. クラスを付けられる

地味に便利な機能ですが、ビジュアルエディターでブロックにCSSクラスを付けることができます。
これまではコードエディターに切り替える必要がありましたが、その必要はありません。

4. 記事を共有できる

これも地味に便利な機能ですが、ビジュアルエディターで「すべてのコンテンツをコピー」することができます。
これを新規記事に貼り付けて利用すれば簡単に内容を複製することができます。
※貼り付けるときはコードエディターに切り替える必要があるようです？（他に方法があれば教えてください！）

この複製を行えば、ブロックテンプレートのように簡単にフォーマットを用意できますし、
ビジュアルエディターで誰でも編集することができます。

例えば、ライターが複数いるようなサイトで、あるライターの考えた記事構成が成功したとき、
そのフォーマットをすぐに他のライターへ共有することができます。
個人的にはこれが、Gutenbergの真価だと感じました。

追記

Gutenbergカスタムブロックで吹き出しが作成できる公式プラグインを作成。
https://lqd.jp/wp/plugin/speech-balloon.html
Gutenbergブロックテンプレート＆ブロックパターンを簡単に使える公式プラグインを作成。
https://lqd.jp/wp/plugin/blocks.html

WordPress 5.5 でブロックパターン機能が登場しました。
https://ja.wordpress.org/2020/08/11/eckstine/