カスタムブロック作成メモ アコーディオンブロック拡張

サイドバーに設定パネルを追加する

edit.jsを編集、InspectorControlsを追加

import { __ } from "@wordpress/i18n";
import {
	RichText,
	useBlockProps,
	InspectorControls,
} from "@wordpress/block-editor";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
	const { title, content } = attributes;
	return (
		<div {...useBlockProps()}>
			<InspectorControls>Sidebar</InspectorControls>
			<RichText
				className="wp-block-create-block-dojo-block__title"
				placeholder="ここにタイトル"
				value={title}
				onChange={(value) => {
					setAttributes({ title: value });
				}}
			/>

PanelBody を追加

import { PanelBody } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
	const { title, content } = attributes;
	return (
		<div {...useBlockProps()}>
			<InspectorControls>
				<PanelBody>Sidebar</PanelBody>
			</InspectorControls>

タイトルとして「設定」を追加

			<InspectorControls>
				<PanelBody title="設定">Sidebar</PanelBody>
			</InspectorControls>

初期状態で開く設定のため、ToggleControlを追加

import { PanelBody, ToggleControl } from "@wordpress/components";
…
			<InspectorControls>
				<PanelBody title="設定">
					<ToggleControl />
				</PanelBody>
			</InspectorControls>

ラベルを設定

			<InspectorControls>
				<PanelBody title="設定">
					<ToggleControl label="初期状態で開く" />
				</PanelBody>
			</InspectorControls>

トグルを操作

			<InspectorControls>
				<PanelBody title="設定">
					<ToggleControl label="初期状態で開く" checked={true} />
				</PanelBody>
			</InspectorControls>

attributes定義 block.json

	"attributes": {
		"title": {
			"type": "string",
			"default": "タイトル",
			"selector": "wp-block-create-block-dojo-block__title",
			"source": "html"
		},
		"content": {
			"type": "string",
			"default": "コンテンツ",
			"selector": "wp-block-create-block-dojo-block__content",
			"source": "html"
		},
		"isInitialOpen": {
			"type": "boolean",
			"default": false
		}
	},

edit.js

			<InspectorControls>
				<PanelBody title="設定">
					<ToggleControl label="初期状態で開く" checked={isInitialOpen} />
				</PanelBody>
			</InspectorControls>

チェックボックス有効化

			<InspectorControls>
				<PanelBody title="設定">
					<ToggleControl
						label="初期状態で開く"
						checked={isInitialOpen}
						onChange={() => {
							setAttributes({ isInitialOpen: !isInitialOpen });
						}}
					/>
				</PanelBody>
			</InspectorControls>

フロントエンドに反映する

save.js

export default function save({ attributes }) {
	const { title, content, isInitialOpen } = attributes;
	return (
		<details {...useBlockProps.save()} open={isInitialOpen}>

ネストしてinnerblock

edit.jsを編集、useInnerBlocksPropsをインポート

import {
	RichText,
	useBlockProps,
	useInnerBlocksProps,
	InspectorControls,
} from "@wordpress/block-editor";
…

			<RichText
				className="wp-block-create-block-dojo-block__title"
				placeholder="ここにタイトル"
				value={title}
				onChange={(value) => {
					setAttributes({ title: value });
				}}
			/>
			<div {...useInnerBlocksProps()} />

			{/* <RichText
				className="wp-block-create-block-dojo-block__content"
				placeholder="ここにコンテンツ"
				tagName="p"
				value={content}
				onChange={(value) => {
					setAttributes({ content: value });
				}}
			/> */}
		</div>

save.jsを編集、保存処理を書く

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

export default function save({ attributes }) {
	const { title, content, isInitialOpen } = attributes;
	return (
		<details {...useBlockProps.save()} open={isInitialOpen}>
			<RichText.Content
				{...useBlockProps.save()}
				className="wp-block-create-block-dojo-block__title"
				tagName="summary"
				value={title}
			/>
			<div {...useInnerBlocksProps.save()} />
		</details>
	);
}

リファクタリング

block.jsonを編集、”content”を削除

	"attributes": {
		"title": {
			"type": "string",
			"default": "タイトル",
			"selector": "wp-block-create-block-dojo-block__title",
			"source": "html"
		},
		"content": {
			"type": "string",
			"default": "コンテンツ",
			"selector": "wp-block-create-block-dojo-block__content",
			"source": "html"
		},

edit.jsとsave.jsより、contentを削除

	const { title, isInitialOpen } = attributes;

参考

• (旧) ブロックコントロール: ブロックツールバーと設定サイドバー
• Panel
• ToggleControl
• ネストしたブロック: InnerBlocks の使用
• Take more control over Inner Block Areas (as a block developer)