Interactivity API を使ったタブブロックの作成

"workspaces": [
    "wp-content/plugins/chiilog-iapi-tabs"
],

<?php
/**
 * @param array    $attributes The block attributes.
 * @param string   $content    The block default content.
 * @param WP_Block $block      The block instance.
 *
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

$wrapper_attributes = get_block_wrapper_attributes(
	[
		'class' => 'custom-class',
	]
);
?>
<div <?php echo $wrapper_attributes; ?>>
	Block!
</div>

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "chiilog-blocks/iapi-tabs",
	"version": "0.1.0",
	"title": "IAPI Tabs",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"attributes": {
		"contents": {
			"type": "array",
			"default": []
		},
		"tabNavText": {
			"type": "string",
			"source": "text",
			"selector": ".wp-block-chiilog-blocks-iapi-tabs__button span"
		}
	},
	"supports": {
		"interactivity": true
	},
	"textdomain": "chiilog-iapi-tabs",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScriptModule": "file:./view.js",
	"render": "file:./render.php"
}

import { useState } from '@wordpress/element';
import type { BlockEditProps } from '@wordpress/blocks';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

type BlockAttributes = {
	contents: TabItem[];
};

type TabItem = {
	tabNavText: string;
};

const defaultContents: TabItem = {
	tabNavText: '',
};

export default function Edit( {
	attributes: { contents },
	setAttributes,
}: BlockEditProps< BlockAttributes > ) {
	// 選択中のタブが何番目かを保持するステート
	const [ currentTab, setCurrentTab ] = useState( 0 );

	return (
		<div { ...useBlockProps() }>
			<div className="mb-2">
				<Button
					variant="secondary"
					onClick={ () => {
						setAttributes( {
							contents: [ ...contents, defaultContents ],
						} );
						setCurrentTab( contents.length );
					} }
				>
					{ __( 'Add Tab', 'chiilog-iapi-tabs' ) }
				</Button>
			</div>
			<div
				className="wp-block-chiilog-blocks-iapi-tabs__nav"
				role="tablist"
			>
				{ contents.map( ( tabItem, index ) => {
					const tabId = index + 1;

					return (
						<button
							role="tab"
							className="wp-block-chiilog-blocks-iapi-tabs__button"
							aria-selected={
								currentTab === index ? 'true' : 'false'
							}
							id={ `tab-${ tabId }` }
							aria-controls={ `panel-${ tabId }` }
							tabIndex={ currentTab === index ? 0 : -1 }
							key={ index }
							onClick={ () => {
								setCurrentTab( index );
							} }
						>
							<RichText
								value={ tabItem.tabNavText }
								tagName="span"
								onChange={ ( value ) => {
									const newContents = [ ...contents ];
									newContents[ index ] = {
										...contents[ index ],
										tabNavText: value,
									};
									setAttributes( {
										contents: newContents,
									} );
								} }
								placeholder={ __( 'Tab', 'chiilog-iapi-tabs' ) }
							/>
						</button>
					);
				} ) }
			</div>
			...
	);
}

import { useState } from '@wordpress/element';
import type { BlockEditProps } from '@wordpress/blocks';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { close } from '@wordpress/icons';

type BlockAttributes = {
	contents: TabItem[];
};

type TabItem = {
	tabNavText: string;
};

const defaultContents: TabItem = {
	tabNavText: '',
};

export default function Edit( {
	attributes: { contents },
	setAttributes,
}: BlockEditProps< BlockAttributes > ) {
	// 選択中のタブが何番目かを保持するステート
	const [ currentTab, setCurrentTab ] = useState( 0 );

	return (
		<div { ...useBlockProps() }>
			<div className="mb-2">
				<Button
					variant="secondary"
					onClick={ () => {
						setAttributes( {
							contents: [ ...contents, defaultContents ],
						} );
						setCurrentTab( contents.length );
					} }
				>
					{ __( 'Add Tab', 'chiilog-iapi-tabs' ) }
				</Button>
			</div>
			<div
				className="wp-block-chiilog-blocks-iapi-tabs__nav"
				role="tablist"
			>
				{ contents.map( ( tabItem, index ) => {
					const tabId = index + 1;

					return (
						<div className="flex flex-col gap-1 flex-auto">
							{ currentTab === index ? (
								<div>
									<Button
										size="small"
										icon={ close }
										label="削除"
										onClick={ () => {
											const newContents = [ ...contents ];
											newContents.splice( index, 1 );
											setAttributes( {
												contents: newContents,
											} );
										} }
									/>
								</div>
							) : null }

							<button
								role="tab"
								className="wp-block-chiilog-blocks-iapi-tabs__button mt-auto"
								aria-selected={
									currentTab === index ? 'true' : 'false'
								}
								id={ `tab-${ tabId }` }
								aria-controls={ `panel-${ tabId }` }
								tabIndex={ currentTab === index ? 0 : -1 }
								key={ index }
								onClick={ () => {
									setCurrentTab( index );
								} }
							>
								<RichText
									value={ tabItem.tabNavText }
									tagName="span"
									onChange={ ( value ) => {
										const newContents = [ ...contents ];
										newContents[ index ] = {
											...contents[ index ],
											tabNavText: value,
										};
										setAttributes( {
											contents: newContents,
										} );
									} }
									placeholder={ __(
										'Tab',
										'chiilog-iapi-tabs'
									) }
								/>
							</button>
						</div>
					);
				} ) }
			</div>
			...
		</div>
	);
}

import { useDispatch } from '@wordpress/data';
import { createBlock } from '@wordpress/blocks';
import { Button } from '@wordpress/components';

function InsertBlockButton() {
    const { insertBlocks } = useDispatch('core/block-editor');

    const insertParagraphBlock = () => {
        // パラグラフブロックのインスタンスを作成
        const block = createBlock('core/paragraph', {
            content: 'Hello, world!',
        });

        // ブロックをエディターに挿入
        insertBlocks(block);
    };

    return <Button onClick={insertParagraphBlock}>Insert Paragraph</Button>;
}

const updatePanelsVisibility = ( selectedIndex: number ) => {
	blocks.forEach( ( block: BlockInstance, index: number ) => {
		if ( block.name === panelBlockName ) {
			const isVisible = index === selectedIndex;
			updateBlockAttributes( block.clientId, {
				ariaExpanded: isVisible,
				ariaHidden: ! isVisible,
			} );
		}
	} );
};

useEffect( () => {
	if ( blocks.length > 0 ) {
		updatePanelsVisibility( currentTab );
	}
}, [ blocks ] );

import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import {
	type BlockEditProps,
	type BlockInstance,
	createBlock,
} from '@wordpress/blocks';
import {
	RichText,
	useBlockProps,
	useInnerBlocksProps,
	store as blockEditorStore,
} from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { close } from '@wordpress/icons';

type BlockAttributes = {
	contents: TabItem[];
};

type TabItem = {
	tabNavText: string;
};

const defaultContents: TabItem = {
	tabNavText: '',
};

const panelBlockName: string = 'chiilog-blocks/iapi-tabs-panel';

export default function Edit( {
	attributes: { contents },
	setAttributes,
	clientId,
}: BlockEditProps< BlockAttributes > ) {
	const { insertBlocks, updateBlockAttributes } =
		useDispatch( 'core/block-editor' );

	// 選択中のタブが何番目かを保持するステート
	const [ currentTab, setCurrentTab ] = useState( 0 );

	// インナーブロックの設定まわり
	const ALLOWED_BLOCKS = [ panelBlockName ];
	const innerBlocksProps = useInnerBlocksProps(
		{},
		{
			allowedBlocks: ALLOWED_BLOCKS,
			// @ts-ignore
			renderAppender: false,
		}
	);
	const blocks: BlockInstance[] = useSelect(
		// @ts-ignore
		( select ) => select( blockEditorStore ).getBlocks( clientId ),
		[ clientId ]
	);

	useEffect( () => {
		if ( blocks.length > 0 ) {
			updatePanelsVisibility( currentTab );
		}
	}, [ blocks ] );

	/**
	 * タブのナビアイテムを追加する
	 */
	const addNavItem = () => {
		setAttributes( {
			contents: [ ...contents, defaultContents ],
		} );
	};

	/**
	 * タブのナビアイテムを削除する
	 */
	const removeNavItem = ( index: number ) => {
		const newContents = [ ...contents ];
		newContents.splice( index, 1 );
		setAttributes( {
			contents: newContents,
		} );
	};

	/**
	 * タブのパネルを追加する
	 */
	const addNavPanel = ( index: number ) => {
		const createPanel = createBlock(
			panelBlockName,
			{
				panelId: `panel-${ index + 1 }`,
				ariaLabelledby: `tab-${ index + 1 }`,
				ariaExpanded: index === currentTab,
				ariaHidden: index !== currentTab,
			},
			[
				createBlock( 'core/paragraph', {
					content: __(
						`Tab Content : ${ index }`,
						'chiilog-iapi-tabs'
					),
				} ),
			]
		);
		insertBlocks( createPanel, index, clientId );
	};

	/**
	 * タブのパネルのカレントを更新する
	 */
	const updatePanelsVisibility = ( selectedIndex: number ) => {
		blocks.forEach( ( block: BlockInstance, index: number ) => {
			if ( block.name === panelBlockName ) {
				const isVisible = index === selectedIndex;
				updateBlockAttributes( block.clientId, {
					ariaExpanded: isVisible,
					ariaHidden: ! isVisible,
				} );
			}
			console.log( blocks );
			console.log( `selectedIndex: ${ selectedIndex }` );
			console.log( `index: ${ index }` );
		} );
	};

	return (
		<div { ...useBlockProps() }>
			<div className="mb-2">
				<Button
					variant="secondary"
					onClick={ () => {
						addNavItem();
						setCurrentTab( contents.length );
						addNavPanel( contents.length );
						updatePanelsVisibility( contents.length );
					} }
				>
					{ __( 'Add Tab', 'chiilog-iapi-tabs' ) }
				</Button>
			</div>
			<div
				className="wp-block-chiilog-blocks-iapi-tabs__nav"
				role="tablist"
			>
				{ contents.map( ( tabItem, index ) => {
					const tabId = index + 1;

					return (
						<div
							key={ `nav-${ index }` }
							className="flex flex-col gap-1 flex-auto"
						>
							{ currentTab === index ? (
								<>
									<Button
										size="small"
										icon={ close }
										label="削除"
										onClick={ () => {
											removeNavItem( index );
											setCurrentTab( 0 );
										} }
									/>
								</>
							) : null }

							<button
								role="tab"
								className="wp-block-chiilog-blocks-iapi-tabs__button mt-auto"
								aria-selected={
									currentTab === index ? 'true' : 'false'
								}
								id={ `tab-${ tabId }` }
								aria-controls={ `panel-${ tabId }` }
								tabIndex={ currentTab === index ? 0 : -1 }
								onClick={ () => {
									setCurrentTab( index );
									updatePanelsVisibility( index );
								} }
							>
								<RichText
									value={ tabItem.tabNavText }
									tagName="span"
									onChange={ ( value ) => {
										const newContents = [ ...contents ];
										newContents[ index ] = {
											...contents[ index ],
											tabNavText: value,
										};
										setAttributes( {
											contents: newContents,
										} );
									} }
									placeholder={ __(
										'Tab',
										'chiilog-iapi-tabs'
									) }
								/>
							</button>
						</div>
					);
				} ) }
			</div>
			<div { ...innerBlocksProps } />
		</div>
	);
}

add_filter( 'render_block_chiilog-blocks/iapi-tabs-panel', 'add_directives_to_inner_blocks', 10, 2 );

function add_directives_to_inner_blocks( $block_content, $block ) {
	$panels = new WP_HTML_Tag_Processor( $block_content );

	if ( $panels->next_tag( array( 'class_name' => 'wp-block-chiilog-blocks-iapi-tabs-panel' ) ) ) {
		$panels->set_attribute( 'data-wp-bind--aria-expanded', 'false' );
		$panels->set_attribute( 'data-wp-bind--aria-hidden', 'true' );
	}

	return $panels->get_updated_html();
}
add_filter( 'render_block_chiilog-blocks/iapi-tabs-panel', 'add_directives_to_inner_blocks', 10, 2 );

function add_directives_to_inner_blocks( $block_content, $block ) {
	$panels = new WP_HTML_Tag_Processor( $block_content );
	$panelCount = 0;

	while ( $panels->next_tag() ) {
		foreach ( $panels->class_list() as $class_name ) {
			if ( $class_name === 'wp-block-chiilog-blocks-iapi-tabs-panel' ) {
				$panels->set_attribute( 'data-wp-bind--aria-expanded', $panelCount === 0);
				$panels->set_attribute( 'data-wp-bind--aria-hidden', $panelCount !== 0 );
				$panelCount++;
			}
		}
	}

	return $panels->get_updated_html();
}
add_filter( 'render_block_chiilog-blocks/iapi-tabs', 'add_directives_to_inner_blocks', 10, 2 );

/**
 * WordPress dependencies
 */
import { store } from '@wordpress/interactivity';

const { state, actions } = store( 'iapiTabs', {
	state: {
		get currentItem() {
			if ( state.currentTab ) {
				return state.currentTab;
			}

			return 0;
		},
	},
	actions: {
		selectTab: () => {
			console.log( state.currentItem );
		},
	},
	callbacks: {},
} );

wp_interactivity_state( 'iapiTabs', array (
	'currentTab' => 1
));

/**
 * パネルの aria-expanded と aria-hidden を data-wp-bind--xxx に変換する
 *
 * @param $block_content
 * @param $block
 * @return string
 */
function add_directives_to_inner_blocks( $block_content, $block ) {
	$panels = new WP_HTML_Tag_Processor( $block_content );
	$panelCount = 0;

	while ( $panels->next_tag() ) {
		foreach ( $panels->class_list() as $class_name ) {
			if ( $class_name === 'wp-block-chiilog-blocks-iapi-tabs-panel' ) {
				$panels->set_attribute( 'data-wp-bind--aria-expanded', 'state.panelExpanded' );
				$panels->set_attribute( 'data-wp-bind--aria-hidden', 'state.panelHidden' );
				$panels->set_attribute( 'data-wp-context', '{ "panelPosition": ' . $panelCount . ' }' );
				$panelCount++;
			}
		}
	}

	return $panels->get_updated_html();
}
add_filter( 'render_block_chiilog-blocks/iapi-tabs', 'add_directives_to_inner_blocks', 10, 2 );

/**
 * WordPress dependencies
 */
import { getContext, store } from '@wordpress/interactivity';

const { state, actions } = store( 'iapiTabs', {
	state: {
		get panelExpanded() {
			const ctx = getContext();
			return ctx.panelPosition === state.currentItem;
		},
		get panelHidden() {
			const ctx = getContext();
			return ctx.panelPosition !== state.currentItem;
		},
	},
	actions: {
		selectTab: () => {
			console.log( 'click' );
		},
	},
	callbacks: {},
} );

<button
	role="tab"
	class="wp-block-chiilog-blocks-iapi-tabs__button"
	data-wp-on--click="actions.changeCurrentTab"
	data-wp-bind--aria-selected="state.tabSelected"
	id="tab-<?php echo esc_attr( $tabNumber ); ?>"
	aria-controls="panel-<?php echo esc_attr( $tabNumber ); ?>"
	tabindex="<?php echo esc_attr( $index === 0 ? '0' : '-1' ); ?>"
	data-wp-context='{ "position": <?php echo esc_attr( $index ); ?> }'
>
	<?php echo esc_html( $navItem['tabNavText'] ); ?>
</button>

$panels->set_attribute( 'data-wp-bind--aria-expanded', 'state.panelExpanded' );
$panels->set_attribute( 'data-wp-bind--aria-hidden', 'state.panelHidden' );
$panels->set_attribute( 'data-wp-context', '{ "position": ' . $panelCount . ' }' );
$panelCount++;

/**
 * WordPress dependencies
 */
import { getContext, store } from '@wordpress/interactivity';

const { state, actions } = store( 'iapiTabs', {
	state: {
		get panelExpanded() {
			const ctx = getContext();
			return ctx.position === state.currentTab;
		},
		get panelHidden() {
			const ctx = getContext();
			return ctx.position !== state.currentTab;
		},
		get tabSelected() {
			const ctx = getContext();
			return ctx.position === state.currentTab;
		},
	},
	actions: {
		changeCurrentTab: () => {
			const ctx = getContext();
			state.currentTab = ctx.position;
		},
	},
	callbacks: {},
} );