WordPressのエディターで入力したテキストがポップアップ表示されるモーダルブロックを作成してみます。

モーダルブロックの挙動

モーダルブロックをエディターに挿入すると入力BOXとボタンが表示されます。

Modalボタンを押下すると、モーダルが表示し、入力値が渡されて表示されます。

フロントエンドにも入力値を渡し、データベースに保存します。

モーダルブックソース

block.json

message属性を定義します。デフォルトの入力値は空にします。

	"attributes": {
		"message": {
			"type": "string",
			"default": "",
			"source": "text"
		}
	},

edit.js

適切なクラス名を付与するuseBlockProps、エディターにUIを表示するコンポーネント、状態管理のuseStateをインポートします。

ボタンをクリックするたびにstateの状態のbooleanを更新し、isOpenがtrueの場合はモーダルを表示します。モーダルにはmessage属性を渡して表示します。

import { useBlockProps } from "@wordpress/block-editor";
import { TextControl, Button, Modal } from "@wordpress/components";
import { useState } from "@wordpress/element";

export default function Edit({ attributes, setAttributes }) {
	const { message } = attributes;
	const blockProps = useBlockProps();
	const [isOpen, setIsOpen] = useState(false);

	return (
		<div {...blockProps}>
			<TextControl
				placeholder="Enter..."
				value={message}
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
			<Button variant="primary" onClick={() => setIsOpen(true)}>
				Modal
			</Button>
			{isOpen && (
				<Modal onRequestClose={() => setIsOpen(false)}>
					<p>次のテキストが入力されました。</p>
					<p>{message}</p>
				</Modal>
			)}
		</div>
	);
}

save.js

エディターから渡ってきたmessage属性を表示します。

import { useBlockProps } from "@wordpress/block-editor";

export default function save({ attributes }) {
	const { message } = attributes;

	return (
		<div {...useBlockProps.save()}>
			<p>次のテキストが入力されました。</p>
			<p>{message}</p>
		</div>
	);
}

style.scss

.wp-block-create-block-my-block {
	background-color: lightblue;
	padding: 2em;
}