Button と Modal と TextControl で出し分け

フォルダ構成

• プラグイン名
  • build
  • node_modules
  • src
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
  • .editorconfig
  • .gitignore
  • package-lock.json
  • package.json
  • readme.txt
  • プラグイン名.php

コード

editor.js

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

import "./editor.scss";

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

	return (
		<div {...blockProps}>
			<h3>1. TextControl</h3>
			<TextControl
				value={message}
				placeholder="input here..."
				className="wp-block-create-block-todo-list__message"
				onChange={(value) => {
					setAttributes({ message: value });
				}}
			/>
			<h3>2. Button & Modal & TextControl</h3>
			<p>{inputText}</p>
			<Button variant="secondary" onClick={() => setIsOpen(true)}>
				Modal Open
			</Button>
			{isOpen && (
				<Modal onRequestClose={() => setIsOpen(false)}>
					<p>更新テキスト</p>
					<TextControl
						value={inputText}
						placeholder="input here..."
						className="wp-block-create-block-todo-list__inputText"
						onChange={(value) => {
							setAttributes({ inputText: value });
						}}
					/>
				</Modal>
			)}
		</div>
	);
}

block.json

	"supports": {
		"html": false
	},
	"attributes": {
		"message": {
			"type": "string",
			"source": "html",
			"selector": "wp-block-create-block-todo-list__message"
		},
		"inputText": {
			"type": "string",
			"source": "html",
			"selector": "wp-block-create-block-todo-list__inputText"
		}
	},

save.json

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

export default function save({ attributes }) {
	const { message, inputText } = attributes;
	// const blockProps = useBlockProps();

	return (
		<div {...useBlockProps.save()}>
			<h3>1. TextControl</h3>
			<p className="wp-block-create-block-todo-list__message">{message}</p>
			{/* inputTextが空の場合は表示しない */}
			{inputText && (
				<>
					<h3>2. Button & Modal & TextControl</h3>
					<p className="wp-block-create-block-todo-list__inputText">
						{inputText}
					</p>
				</>
			)}
		</div>
	);
}

表示

エディター側

フロント側

2. Button & Modal & TextControl が空の場合