WordPressでエクスパンダーを自作する方法

npx @wordpress/create-block@latest my-expander-block

cd my-expander-block
code .

my-expander-block
├─ build/
├─ node_modules/
├─ src/
│   └─ my-expander-block/
│       ├─ block.json
│       ├─ edit.js
│       ├─ editor.scss
│       ├─ index.js
│       ├─ save.js
│       ├─ style.scss
│       └─ view.js
├─ .editorconfig
├─ .gitignore
├─ my-expander-block.php
├─ package-lock.json
├─ package.json
└─ readme.txt

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/my-expander-block",
	"version": "0.1.0",
	"title": "My Expander Block",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"attributes": {
		"title": {
			"type": "string",
			"source": "text",
			"selector": ".my-expander-title"
		}
	},
	"textdomain": "my-expander-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
	const { title } = attributes;
	const blockProps = useBlockProps({
		className: 'my-expander',
	});

	return (
		<div {...blockProps}>
			<div className="my-expander-title">
				<RichText
					tagName="span"
					value={title}
					onChange={(value) => setAttributes({ title: value })}
					placeholder={__('タイトルを入力…', 'my-expander-block')}
				/>
			</div>
			<div className="my-expander-content">
				<InnerBlocks
					placeholder={__('ここにブロックを追加…', 'my-expander-block')}
				// allowedBlocks で許可するブロックを絞ることも可能
				// allowedBlocks={ [ 'core/paragraph', 'core/image' ] }
				/>
			</div>
		</div>
	);
}

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} Element to render.
 */
export default function save({ attributes }) {
	const { title } = attributes;
	const blockProps = useBlockProps.save({
		className: 'my-expander',
	});

	return (
		<div {...blockProps}>
			<div className="my-expander-title">
				<RichText.Content tagName="span" value={title} />
			</div>

			<div className="my-expander-content">
				<InnerBlocks.Content />
			</div>
		</div>
	);
}

/**
 * Use this file for JavaScript code that you want to run in the front-end
 * on posts/pages that contain this block.
 *
 * When this file is defined as the value of the `viewScript` property
 * in `block.json` it will be enqueued on the front end of the site.
 *
 * Example:
 *
 * ```js
 * {
 *   "viewScript": "file:./view.js"
 * }
 * ```
 *
 * If you're not making any changes to this file because your project doesn't need any
 * JavaScript running in the front-end, then you should delete this file and remove
 * the `viewScript` property from `block.json`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
 */

document.addEventListener('DOMContentLoaded', function () {
	// ページ上のすべての my-expander を対象とする
	var items = document.querySelectorAll('.my-expander');

	items.forEach(function (item) {
		var title = item.querySelector('.my-expander-title');
		var content = item.querySelector('.my-expander-content');

		if (!title || !content) return;

		// 初期状態は閉じる
		item.classList.remove('is-open');
		content.style.maxHeight = '0px';

		title.addEventListener('click', function () {
			var isOpen = item.classList.contains('is-open');

			// 1つだけ開きたい場合は、先に全部閉じる
			items.forEach(function (other) {
				if (other === item) return;

				other.classList.remove('is-open');
				var otherContent = other.querySelector('.my-expander-content');
				if (otherContent) {
					otherContent.style.maxHeight = '0px';
				}
			});

			if (isOpen) {
				// ---- 自分を閉じる ----
				item.classList.remove('is-open');
				content.style.maxHeight = '0px';
			} else {
				// ---- 自分を開く ----
				item.classList.add('is-open');

				// 中身の高さを取得して、その分だけmax-heightを広げる
				var fullHeight = content.scrollHeight; // px 単位の数値
				content.style.maxHeight = fullHeight + 'px';
			}
		});
	});
});

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-create-block-my-expander-block {
	background-color: #21759b;
	color: #fff;
	padding: 2px;
}

/* 中身のエリア（アコーディオン部分） */
.my-expander-content {
	max-height: 0;
	overflow: hidden;
}

/* 開いているとき：max-height を大きくして内容を表示させる */
.my-expander.is-open .my-expander-content {
	max-height: 10000px; /* 十分大きい値ならOK。*/
}

/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-create-block-my-expander-block {
	border: 1px dotted #f00;
}

.my-expander-content {
	/* 編集画面では常に見えていてほしいので max-height 制限を外す */
	max-height: none;
	overflow: visible;
	padding-bottom: 0.8em;
}

npm run build

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-create-block-my-expander-block {
	background-color: #fff;
	color: black;
	padding: 2px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.my-expander-title {
	position: relative;
	cursor: pointer;
	padding-left: 1.6em; /* ← 左側に三角形のスペースを作る */
}

/* ▼ 閉じているときの三角形（▶：右向き） */
.my-expander-title::after {
	content: "";
	position: absolute;
	left: 0.4em; /* 左側に配置 */
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px; /* ▶ を作る border */
	border-color: transparent transparent transparent #333;
}

/* ▼ 開いているときの三角形（▼：下向きに回転） */
.my-expander.is-open .my-expander-title::after {
	transform: translateY(-50%) rotate(90deg); /* ▶ を 90° 回転して ▼ */
}

/* 中身のエリア（アコーディオン部分） */
.my-expander-content {
	max-height: 0;
	overflow: hidden;
}

/* 開いているとき：max-height を大きくしてアニメーションさせる */
.my-expander.is-open .my-expander-content {
	max-height: 1000px; /* 十分大きい値ならOK。必要なら 2000px などに */
}

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
	const { title } = attributes;
	const [isOpen, setIsOpen] = useState(true);
	const blockProps = useBlockProps({
		className: `my-expander${isOpen ? ' is-open' : ''}`,
	});

	const onToggle = () => {
		setIsOpen((prev) => !prev);
	};

	return (
		<div {...blockProps}>
			<div className="my-expander-title" onClick={onToggle}>
				<RichText
					tagName="span"
					value={title}
					onChange={(value) => setAttributes({ title: value })}
					placeholder={__('タイトルを入力…', 'my-expander-block')}
				/>
			</div>
			<div className="my-expander-content">
				<InnerBlocks
					placeholder={__('ここにブロックを追加…', 'my-expander-block')}
				// allowedBlocks で許可するブロックを絞ることも可能
				// allowedBlocks={ [ 'core/paragraph', 'core/image' ] }
				/>
			</div>
		</div>
	);
}

/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-create-block-my-expander-block {
	border: 1px dotted #f00;
}

.my-expander-content {
	// エディタで閉じているときは display:none にする
	display: none;
}

.my-expander.is-open .my-expander-content {
	// 開いているときのスタイル（height:auto でもOK）
	display: block;
}

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-create-block-my-expander-block {
	background-color: #fff;
	color: black;
	padding: 2px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.my-expander-title {
	position: relative;
	cursor: pointer;
	padding-left: 1.6em; /* ← 左側に三角形のスペースを作る */
}

/* ▼ 閉じているときの三角形（▶：右向き） */
.my-expander-title::after {
	content: "";
	position: absolute;
	left: 0.4em; /* 左側に配置 */
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px; /* ▶ を作る border */
	border-color: transparent transparent transparent #333;
	transition: transform 0.4s ease; /* ▶マーク回転のアニメーション */
}

/* ▼ 開いているときの三角形（▼：下向きに回転） */
.my-expander.is-open .my-expander-title::after {
	transform: translateY(-50%) rotate(90deg); /* ▶ を 90° 回転して ▼ */
}

/* 中身のエリア（アコーディオン部分） */
.my-expander-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-in-out; /* max-height の変化をアニメーションさせる */
}

/* 開いているとき：max-height を大きくしてアニメーションさせる */
.my-expander.is-open .my-expander-content {
	max-height: 1000px; /* 十分大きい値ならOK。必要なら 2000px などに */
}

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/my-expander-block",
	"version": "0.1.0",
	"title": "My Expander Block",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"attributes": {
		"title": {
			"type": "string",
			"source": "text",
			"selector": ".my-expander-title"
		},
		"borderEnabled": {
			"type": "boolean",
			"default": true
		},
		"borderColor": {
			"type": "string",
			"default": "#dddddd"
		},
		"borderWidth": {
			"type": "number",
			"default": 1
		}
	},
	"textdomain": "my-expander-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { PanelBody, ToggleControl, RangeControl, ColorPalette } from '@wordpress/components';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

const COLORS = [
	{ name: '薄いグレー', color: '#dddddd' },
	{ name: '黒', color: '#000000' },
	{ name: '青', color: '#0073aa' },
	{ name: 'オレンジ', color: '#ff9900' },
];

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
	const { title, borderEnabled, borderColor, borderWidth } = attributes;
	const [isOpen, setIsOpen] = useState(true);
	// 枠線スタイル（有効なときだけ付ける）
	const style =
		borderEnabled
			? {
				border: `${borderWidth || 1}px solid ${borderColor || '#dddddd'}`,
				borderRadius: '4px',
			}
			: { border: 'none' };
	const blockProps = useBlockProps({
		className: `my-expander${isOpen ? ' is-open' : ''}`,
		style,
	});

	const onToggle = () => {
		setIsOpen((prev) => !prev);
	};

	return (
		<>
			<InspectorControls>
				<PanelBody title="枠線の設定" initialOpen={true}>
					<ToggleControl
						label="枠線を表示する"
						checked={borderEnabled}
						onChange={(value) => setAttributes({ borderEnabled: value })}
					/>
					{borderEnabled && (
						<>
							<p>枠線の色</p>
							<ColorPalette
								colors={COLORS}
								value={borderColor}
								onChange={(color) => setAttributes({ borderColor: color })}
							/>
							<RangeControl
								label="枠線の太さ（px）"
								value={borderWidth}
								onChange={(value) => setAttributes({ borderWidth: value })}
								min={0}
								max={10}
							/>
						</>
					)}
				</PanelBody>
			</InspectorControls>

			<div {...blockProps}>
				<div className="my-expander-title" onClick={onToggle}>
					<RichText
						tagName="span"
						value={title}
						onChange={(value) => setAttributes({ title: value })}
						placeholder={__('タイトルを入力…', 'my-expander-block')}
					/>
				</div>
				<div className="my-expander-content">
					<InnerBlocks
						placeholder={__('ここにブロックを追加…', 'my-expander-block')}
					// allowedBlocks で許可するブロックを絞ることも可能
					// allowedBlocks={ [ 'core/paragraph', 'core/image' ] }
					/>
				</div>
			</div>
		</>
	);
}

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} Element to render.
 */
export default function save({ attributes }) {
	const { title, borderEnabled, borderColor, borderWidth } = attributes;
	const style =
		borderEnabled
			? {
				border: `${borderWidth || 1}px solid ${borderColor || '#dddddd'}`,
				borderRadius: '4px',
			}
			: { border: 'none' };
	const blockProps = useBlockProps.save({
		className: 'my-expander',
		style,
	});

	return (
		<div {...blockProps}>
			<div className="my-expander-title">
				<RichText.Content tagName="span" value={title} />
			</div>

			<div className="my-expander-content">
				<InnerBlocks.Content />
			</div>
		</div>
	);
}

sudo chown -R www-data:www-data ./my-expander-block

npm install

my-expander-block
├─ build/
└─ my-expander-block.php