(旧)ブロックの詳細

(2024/1/20) この文書の原文は削除されました。以後は「チュートリアル: はじめてのブロック作成」を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

一言で言えば、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';
import metadata from './block.json';

registerBlockType( metadata.name, {
	/**
	 * @see ./edit.js
	 */
	edit: Edit,
	/**
	 * @see ./save.js
	 */
	save,
} );

registerBlockType 関数の最初のパラメータはブロック名です。これは、block.json ファイル内の name プロパティと完全に一致する必要があります。メタデータを block.json からインポートし、最初のパラメータの name プロパティを参照することで、両者は確実に一致し、その後 block.json で名前が変更されても、一致し続けます。

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

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

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

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

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

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/gutenpride",
	"version": "0.1.0",
	"title": "Gutenpride",
	"category": "text",
	"icon": "flag",
	"description": "A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride.",
	"supports": {
		"html": false
	},
	"textdomain": "gutenpride",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

title は、インサーターやエディターの他のエリアで表示されるブロックのタイトルです。

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

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

国際化

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

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

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

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

原文

最終更新日: 2024年1月20日