(旧)ブロックサポート

(2023/12/24) この文書の原文は削除されました。以後は「ブロック開発の基本原理」以下を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

コアブロックを含む多くのブロックには、同じようなカスタマイズオプションがあります。たとえば背景色の変更、文字色の変更、パディングの追加、マージンのカスタマイズオプション等々。

ブロックの中で同じロジックを何度も何度も繰り返すのを避け、ブロックの動作をコアブロックに合わせるには、さまざまな supports プロパティを利用できます。

前の章 (例3) で作成したブロックを、たった1行のコードで、テキスト、リンク、背景色のカスタマイズに対応します。

以下は、前の章でブロックを登録するのに使用したコードとまったく同じものです。

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, RichText } from '@wordpress/block-editor';

registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
	apiVersion: 3,
	title: 'Example: Basic with block supports',
	icon: 'universal-access-alt',
	category: 'design',
	attributes: {
		content: {
			type: 'string',
			source: 'html',
			selector: 'p',
		},
	},
	example: {
		attributes: {
			content: 'Hello World',
		},
	},
	edit: ( props ) => {
		const {
			attributes: { content },
			setAttributes,
			className,
		} = props;
		const blockProps = useBlockProps();
		const onChangeContent = ( newContent ) => {
			setAttributes( { content: newContent } );
		};
		return (
			<RichText
				{ ...blockProps }
				tagName="p"
				onChange={ onChangeContent }
				value={ content }
			/>
		);
	},
	save: ( props ) => {
		const blockProps = useBlockProps.save();
		return (
			<RichText.Content
				{ ...blockProps }
				tagName="p"
				value={ props.attributes.content }
			/>
		);
	},
} );

では、ブロックの block.json ファイルを変更し、サポートキーを追加します。(block.json ファイルを使用していない場合は、registerBlockType 関数呼び出しにキーを追加できます)

{
	"apiVersion": 3,
	"name": "gutenberg-examples/example-03-editable-esnext",
	"title": "Example: Basic with block supports",
	"icon": "universal-access-alt",
	"category": "layout",
	"editorScript": "file:./build/index.js",
	"supports": {
		"color": {
			"text": true,
			"background": true,
			"link": true
		}
	}
}

以上です。上の「supports」キーの追加により、自動的にブロックに以下の変更が加えられます。

  • ブロックに style 属性を追加し、リンク、テキスト、背景の色を保存する。
  • ブロックエディターのサイドバーに「色」パネルを追加し、ユーザーがテキスト、リンク、背景の色を調整できるようにする。
  • 自動的に theme.json の構成を使用する。色を無効にしたり、パレットを継承したり…
  • ユーザーが色を変更したときに、自動的に適切なスタイルを注入し、それらをブロックラッパーに適用する。

ブロックサポートについての詳細と、自身のブロックで有効にできるすべての利用可能なプロパティを見るには、supports documentation を参照してください。

最終更新日: