カスタムブロック作成 モーダル

モーダルコンポーネントの使用方法。

import { useBlockProps } from "@wordpress/block-editor";
import { TextControl, Button, Modal } from "@wordpress/components";
import { currencyDollar } from "@wordpress/icons";
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
				value={message}
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
			<Button>Push</Button>
			<hr />
			<Button onClick={() => setIsOpen(true)}>Modal</Button>
			{isOpen && (
				<Modal onRequestClose={() => setIsOpen(false)}>
					<Button icon={currencyDollar} label="Dollar" />
					<Button icon={currencyDollar} label="Dollar" />
					<Button icon={currencyDollar} label="Dollar" />
					<Button icon={currencyDollar} label="Dollar" />
				</Modal>
			)}
		</div>
	);
}