ブロックの詳細

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

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

JavaScript 部分は src/index.js ファイル内にあります。

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

import './style.scss';

import Edit from './edit';
import save from './save';

registerBlockType( 'create-block/gutenpride', {
    apiVersion: 2,
    /**
     * @see ./edit.js
     */
    edit: Edit,
    /**
     * @see ./save.js
     */
    save,
} );

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

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

最後の2つのブロックオブジェクトプロパティは edit と save です。これらはブロックのメインのパーツです。どちらのプロパティも上の import で取り込まれる関数です。

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

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

ほとんどのプロパティは、block.json ファイルで設定されます。

{
    "apiVersion": 2,
    "name": "create-block/gutenpride",
    "title": "Gutenpride",
    "category": "widgets",
    "icon": "smiley",
    "description": "Example block written with ESNext standard and JSX support – build step required.",
    "supports": {
        "html": false
    },
    "textdomain": "gutenpride",
    "editorScript": "file:./build/index.js",
    "editorStyle": "file:./build/index.css",
    "style": "file:./build/style-index.css"
}

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

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

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

国際化

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

__( 'Gutenpride – hello from the saved content!', 'gutenpride' ) 

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

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

原文

最終更新日: