WordPressのブロック開発ではエディターUIを専用のコンポーネントを使用して組み立てていきます。コンポーネントの使い方とリファレンスの見方を見ていきましょう。

コンポーネントの使い方を調べる方法

Buttonコンポーネント

Component ReferenceでButtonコンポーネントを確認します。

冒頭にStory BookのURLが案内されているので見てみます。左側のツリービューからButtonコンポーネントは、Story BookのActions配下にまとめられていることがわかります。ますはDocsに目を通し、定義を確認します。

また、Controlの値を変更するとプレビューに反映されるので、挙動を確かめることができます。

コードに置き換えると次のようなボタンを設置できます。

import { Button } from "@wordpress/components";

export default function Edit() {
	return (
		<div>
			<p>
				デフォルト：
				<Button>Click</Button>
			</p>
			<p>
				バリアント：
				<Button variant="primary">Click</Button>
				<Button variant="secondary">Click</Button>
				<Button variant="tertiary">Click</Button>
				<Button variant="link">Click</Button>
			</p>
			<p>
				押下状態：
				<Button variant="primary" isPressed>
					Click
				</Button>
				<Button variant="secondary" isPressed>
					Click
				</Button>
				<Button variant="tertiary" isPressed>
					Click
				</Button>
				<Button variant="link" isPressed>
					Click
				</Button>
			</p>
			<p>
				サイズ：
				<Button variant="primary" size="default">
					Click
				</Button>
				<Button variant="primary" size="small">
					Click
				</Button>
				<Button variant="primary" size="compact">
					Click
				</Button>
			</p>
			<p>
				破壊的な選択：
				<Button isDestructive>Click</Button>
			</p>
		</div>
	);
}

コンポーネントはimportが必須

作成中のブロックでコンポーネントを使用する場合は、コンポーネントごとにimportが必要です。ブロックがうまく動かないときやエラーが出るときは、importの記述を確認しましょう。