標準のアコーディオンブロックをスムーズに開閉させるようにするコード例

document.addEventListener('DOMContentLoaded', () => {
	const accordionButtons = document.querySelectorAll('.wp-block-accordion-heading__toggle');

	// ここで設定した秒数が反映されます
	const openSpeed = 400;   // 開くスピード（400ms = 0.4秒）
	const closeSpeed = 150;  // 閉じるスピード（150ms = 0.15秒）

	accordionButtons.forEach(button => {
		button.addEventListener('click', (e) => {
			// WordPressコアのJSが動くのをブロックする
			e.preventDefault();
			e.stopImmediatePropagation();

			const item = button.closest('.wp-block-accordion-item');
			const panel = item ? item.querySelector('.wp-block-accordion-panel') : null;

			if (!item || !panel) return;

			// 現在開いているかどうかの判定
			const isOpen = item.classList.contains('is-open');

			// アニメーション中のガタつきを防ぐ基本処理
			panel.style.setProperty('display', 'block', 'important');
			panel.style.overflow = 'hidden';
			const contentHeight = panel.scrollHeight;

			if (!isOpen) {
				// 【開くアニメーション】
				item.classList.add('is-open'); // 親にクラスをつけて外見をオープン状態に
				button.setAttribute('aria-expanded', 'true');
				panel.removeAttribute('inert');

				panel.animate([
					{ height: '0px', opacity: 0 },
					{ height: contentHeight + 'px', opacity: 1 }
				], {
					duration: openSpeed,
					easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
					fill: 'forwards'
				});

				setTimeout(() => {
					panel.style.height = 'auto';
					panel.style.opacity = '1';
				}, openSpeed);

			} else {
				// 【閉じるアニメーション】
				item.classList.remove('is-open');
				button.setAttribute('aria-expanded', 'false');
				panel.setAttribute('inert', '');

				const currentHeight = panel.offsetHeight;

				const closingAnim = panel.animate([
					{ height: currentHeight + 'px', opacity: 1 },
					{ height: '0px', opacity: 0 }
				], {
					duration: closeSpeed,
					easing: 'ease-in',
					fill: 'forwards'
				});

				closingAnim.onfinish = () => {
					panel.style.removeProperty('display');
					panel.style.height = '';
					panel.style.opacity = '';
					panel.getAnimations().forEach(anim => anim.cancel());
				};
			}
		}, { capture: true }); // コアのJSより「先」にクリックに反応させる設定
	});
});

/* アコーディオンの中身（パネル）の初期状態 */
.wp-block-accordion-panel {
	display: none;
	height: 0;
	opacity: 0;
	overflow: hidden;
}

/* 開いている時のスタイル */
.wp-block-accordion-item.is-open .wp-block-accordion-panel {
	display: block;
	height: auto;
	opacity: 1;
}

/* 画像の余白によるガタつき防止 */
.wp-block-accordion-panel .wp-block-image {
	margin-top: 0;
	margin-bottom: 0;
	padding: 1rem 0;
}

/* アコーディオンが開く時、中の画像も「箱の広がり」と同じ速度でふわっと同期させる */
.wp-block-accordion-item .wp-block-accordion-panel .wp-block-image img {
	transition: opacity 0.3s ease-out;
	opacity: 0;
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel .wp-block-image img {
	opacity: 1;
}

function pwcn_all_accordion_filter_html( $block_content, $block ) {
	// アコーディオンアイテムブロックの時だけ処理
	if ( 'core/accordion-item' === $block['blockName'] ) {
        
		// 1. 開始タグの置換
		// 「wp-block-accordion-heading」というクラス名が含まれる H2〜H6 タグだけをマッチングさせ、<p> に変換
		$block_content = preg_replace(
			'/<h([2-6])\b([^>]*class="[^"]*wp-block-accordion-heading[^"]*"[^>]*)>/i',
			'<p$2>',
			$block_content
		);

		// クラス名の属性順序（classが先か後か）に依存しないよう、もう一つのパターンもカバーしておく
		$block_content = preg_replace(
			'/<h([2-6])\b([^>]*class=\'[^\']*wp-block-accordion-heading[^\']*\'[^>]*)>/i',
			'<p$2>',
			$block_content
		);

		// 2. 終了タグの置換
		// ただし、これだけだと中身の見出しの終了タグまで </p> になってしまうのを防ぐため、
		// 「直前にアコーディオンのボタンの中身（</button>）がある </h... >」を狙い撃ちします。
		// WordPressの標準構造： ...</button></h3 > の並びを利用します。
		$block_content = preg_replace( '/(<\/button>)\s*<\/h[2-6]>/i', '$1</p>', $block_content );
	}

	return $block_content;
}
add_filter( 'render_block', 'pwcn_all_accordion_filter_html', 10, 2 );