ブロックの詳細

WordPress ブロックエディターの「ブロック」は、一言で言えば、規定のプロパティ集合をもった JavaScript のオブジェクトです。

注意: ブロックの開発では最新の JavaScript 標準に従った ESNext 構文を使用します。わからない場合は ESNext 構文ドキュメント を参照してモダンな JavaScript 開発で使用される新しい構文に親しんでください。

以下はブロックを登録する完全なコードです。

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

registerBlockType( 'create-block/gutenpride', {
    title: 'Gutenpride',
    description: 'Example block.',
    category: 'widgets',
    icon: 'smiley',
    supports: {
        // Removes support for an HTML mode.
        html: false,
    },

    edit: () => {
        return <div> Hello in Editor. </div>;
    },

    save: () => {
        return <div> Hello in Save.</div>;
    },
} );

registerBlockType 関数の最初のパラメータはブロック名です。PHP ファイルで登録された名前と完全に一致する必要があります。

2番目のパラメータはブロックオブジェクトです。詳細な説明は ブロックの登録ドキュメント を参照してください。

title はインサーターで表示されるブロックのタイトルです。

icon はインサーターで表示されるアイコンです。icon プロパティは文字列として Dashicon の名前を取ります。利用可能なアイコンリスト を参照してください。SVG オブジェクトを渡すこともできますが、ここでは簡単のために Dashicon 名を選択します。

category には common、formatting、layout、widgets、embed のどれかの文字列を指定します。カスタムカテゴリーを作成することもできます。詳細についてはドキュメントを参照してください。このチュートリアルではカテゴリーとして「widgets」を指定します。

最後の2つのブロックオブジェクトプロパティは edit と save です。これらはブロックのメインのパーツです。どちらのプロパティも関数として定義する必要があります。

edit 関数の結果は、エディターにブロックが挿入された際の、ブロックのレンダリング結果になります。

save 関数の結果は、投稿が保存された際に、エディターが post_content フィールドに挿入するブロックの形になります。post_content フィールドは投稿のコンテンツを保存する、WordPress データベース内のフィールドです。

注意: プラグインと一緒に block.json ファイルも生成されます。このファイルはブロックディレクトリの登録で使用され、プロパティを変更する際は両方のファイルを更新する必要があります。1か所の変更で済むようこのプロセスを簡素化する開発が継続中です。

国際化

生成された src/index.js ファイルを見るとブロックのタイトルや説明が次のような関数で囲まれています。

__( 'Gutenpride', 'gutenpride' );

これは国際化ラッパーで、文字列「Gutenpride」を翻訳することができます。2番目のパラメータ「gutenpride」はテキストドメインと呼ばれ、翻訳対象の文字列がどこから来たかのコンテキストを提供します。JavaScript の国際化はコアの WordPress の国際化プロセスと同じです。詳細については WordPress の国際化 ドキュメント を参照してください。

次のセクション: ブロックの属性

原文

最終更新日: