初めてのブロックタイプ

できる限り簡単な最初のサンプルとして、投稿にスタイル付きメッセージを表示する新しいブロックタイプを作成します。この時点ではまだユーザーはメッセージを編集できませんが、後のセクションで編集可能なフィールドについて学習していきます。

静的コンテンツを含むブロックは registerBlockType 関数を使用すると完全に JavaScript 内で実装できます。registerBlockType 関数はブロックの設計の提示に責任を持ち、エディターに対して表示に必要な振る舞いを伝え、編集されれば変更し、全体を投稿コンテンツ内に保存します。

ブロックスクリプトのエンキュー

エディターでのブロックの振る舞いは JavaScript 内で実装できますが、サーバーサイドではブロックを登録してエディターがロードされた際にスクリプトをエンキューする必要があります。スクリプトとスタイルはそれぞれ wp_register_script と wp_register_style を使用して登録します。次にブロックタイプ登録設定 scriptstyleeditor_scripteditor_styleを使用して、これらをブロックに関連付けるハンドルとして割り当てます。

editor_script と editor_style ファイルはエディター内のみにエンキューされますが、script と style はエディターとサイトで投稿が表示される場合の両方でエンキューされます。

<?php
/*
Plugin Name: Gutenberg examples 01
*/
function gutenberg_examples_01_register_block() {

    // automatically load dependencies and version
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

    wp_register_script(
        'gutenberg-examples-01-esnext',
        plugins_url( 'build/block.js', __FILE__ ),
        $asset_file['dependencies'],
        $asset_file['version']
    );

    register_block_type( 'gutenberg-examples/example-01-basic-esnext', array(
        'editor_script' => 'gutenberg-examples-01-esnext',
    ) );

}
add_action( 'init', 'gutenberg_examples_01_register_block' );

注意: 上の例では wp-scripts ビルド手順 を使用して自動的に依存性やファイルのバージョンを設定しています。

ES5 コードを使用する場合には、依存性の配列として array( 'wp-blocks', 'wp-element' ) を指定してください。完全な構文については Gutenberg Examples リポジトリー内の example 01 を参照してください。

  • wp-blocks ブロックタイプの登録および関連する関数を含む
  • wp-element ブロックの構造を記述する WordPress Element abstraction を含む

ブロックの登録

エンキューされるスクリプトでブロックの実装を確認します。

ESNext

import { registerBlockType } from '@wordpress/blocks';

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

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
    title: 'Example: Basic (esnext)',
    icon: 'universal-access-alt',
    category: 'layout',
    example: {},
    edit() {
        return <div style={ blockStyle }>Hello World, step 1 (from the editor).</div>;
    },
    save() {
        return <div style={ blockStyle }>Hello World, step 1 (from the frontend).</div>;
    },
} );

ES5

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

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

    blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
        title: 'Example: Basic',
        icon: 'universal-access-alt',
        category: 'layout',
        example: {},
        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.element
) );

この段階でエディター画面には Hello World, step 1 (from the editor).、投稿を表示すると Hello World, step 1 (from the frontend). と表示されます。

いったんブロックが登録されるとすぐにエディター挿入ダイアログのオプションとして利用可能になります。また titleiconcategory の値を使用していることがわかります。アイコンは組み込みの Dashicons アイコンセット から選択するか、カスタム SVG 要素 を指定できます。

ブロック名はプラグイン専用の名前空間をプレフィックスに付ける必要があります。こうすることで2つ以上のプラグインが同じ名前でブロックを登録しても衝突を避けられます。この例では名前空間は gutenberg-examples です。

ブロック名は英数小文字かダッシュのみで指定し、文字で始まる必要があります。例: my-plugin/my-custom-block.

edit 関数と save 関数ではそれぞれエディターコンテキストでのブロックの構造と、保存されるコンテンツを記述します。この簡単な例では違いがはっきりしませんが、次のセクションでエディタープレビューでブロックのカスタマイズを行う際に、これらがどのように使用されるかを見ます。

最終更新日: