@wordpress/block-library 9.44.1-next.v.202604201441.0 → 9.45.0

package/src/tabs/use-tab-menu-sync.js

@@ -1,239 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Keep tabs and menu items in sync when the lists change due to direct
- * user actions (deletion, paste, duplicate, drag-and-drop).
- *
- * Deletion: when one side shrinks, remove the counterpart at the same index.
- * Insertion: when one side grows without the other, insert the missing
- * counterpart at the matching index.
- *
- * When both lists change simultaneously (e.g. the "Add Tab" toolbar button,
- * which inserts both at once), no action is needed and the effect exits early.
- *
- * @param {Object}      props
- * @param {Array}       props.tabs             Raw core/tab block objects.
- * @param {Array}       props.menuItems        Raw core/tabs-menu-item block objects.
- * @param {string|null} props.tabPanelClientId Client ID of the core/tab-panel block.
- * @param {string|null} props.tabsMenuClientId Client ID of the core/tabs-menu block.
- */
-export default function useTabMenuSync( {
-	tabs,
-	menuItems,
-	tabPanelClientId,
-	tabsMenuClientId,
-} ) {
-	const {
-		removeBlock,
-		insertBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
-
-	const prevSyncStateRef = useRef( null );
-	useEffect( () => {
-		if ( prevSyncStateRef.current === null ) {
-			prevSyncStateRef.current = {
-				tabs: [ ...tabs ],
-				menuItems: [ ...menuItems ],
-			};
-			return;
-		}
-
-		const { tabs: prevTabs, menuItems: prevMenuItems } =
-			prevSyncStateRef.current;
-
-		const tabCountChange = tabs.length - prevTabs.length;
-		const menuItemCountChange = menuItems.length - prevMenuItems.length;
-
-		const tabsInserted = tabCountChange > 0;
-		const menuItemsInserted = menuItemCountChange > 0;
-
-		// Both sides changed by the same amount.
-		// Covers: no-op re-renders, "Add Tab" toolbar, and toolbar-remove.
-		// Also handles drag-and-drop reordering of menu items.
-		if ( tabCountChange === menuItemCountChange ) {
-			// When lengths are equal but order changed, the user reordered menu
-			// items via drag-and-drop. Reorder the tab content blocks to match.
-			if (
-				tabCountChange === 0 &&
-				tabPanelClientId &&
-				menuItems.some(
-					( m, i ) => m.clientId !== prevMenuItems[ i ]?.clientId
-				)
-			) {
-				const reorderedTabs = menuItems
-					.map( ( menuItem ) => {
-						const oldIndex = prevMenuItems.findIndex(
-							( pm ) => pm.clientId === menuItem.clientId
-						);
-						return oldIndex !== -1 ? tabs[ oldIndex ] : null;
-					} )
-					.filter( Boolean );
-				if ( reorderedTabs.length === tabs.length ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					replaceInnerBlocks(
-						tabPanelClientId,
-						reorderedTabs,
-						false
-					);
-				}
-			}
-			prevSyncStateRef.current = {
-				tabs: [ ...tabs ],
-				menuItems: [ ...menuItems ],
-			};
-			return;
-		}
-
-		// Both sides changed in the same direction but by different amounts.
-		// Bail without making a partial fix.
-		if (
-			( tabCountChange > 0 && menuItemCountChange > 0 ) ||
-			( tabCountChange < 0 && menuItemCountChange < 0 )
-		) {
-			prevSyncStateRef.current = {
-				tabs: [ ...tabs ],
-				menuItems: [ ...menuItems ],
-			};
-			return;
-		}
-
-		// If the required container block isn't available yet, bail without
-		// updating the snapshot so the next render re-evaluates the same count change.
-		if ( tabsInserted && ! tabsMenuClientId ) {
-			return;
-		}
-		if ( menuItemsInserted && ! tabPanelClientId ) {
-			return;
-		}
-
-		// Update snapshot to the current state.
-		prevSyncStateRef.current = {
-			tabs: [ ...tabs ],
-			menuItems: [ ...menuItems ],
-		};
-
-		const currentTabIds = new Set( tabs.map( ( t ) => t.clientId ) );
-		const currentMenuItemIds = new Set(
-			menuItems.map( ( m ) => m.clientId )
-		);
-
-		if ( tabCountChange < 0 ) {
-			// Remove the menu item at the same position as each deleted tab.
-			const removedIndices = prevTabs
-				.map( ( t, i ) =>
-					! currentTabIds.has( t.clientId ) ? i : -1
-				)
-				.filter( ( i ) => i !== -1 );
-			const removedSet = new Set( removedIndices );
-			removedIndices.forEach( ( removedIndex ) => {
-				if ( menuItems[ removedIndex ] ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					removeBlock( menuItems[ removedIndex ].clientId, false );
-				}
-			} );
-			prevSyncStateRef.current.menuItems =
-				prevSyncStateRef.current.menuItems.filter(
-					( _, i ) => ! removedSet.has( i )
-				);
-		} else if ( menuItemCountChange < 0 ) {
-			// Remove the tab at the same position as each deleted menu item.
-			const removedIndices = prevMenuItems
-				.map( ( m, i ) =>
-					! currentMenuItemIds.has( m.clientId ) ? i : -1
-				)
-				.filter( ( i ) => i !== -1 );
-			const removedSet = new Set( removedIndices );
-			removedIndices.forEach( ( removedIndex ) => {
-				if ( tabs[ removedIndex ] ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					removeBlock( tabs[ removedIndex ].clientId, false );
-				}
-			} );
-			prevSyncStateRef.current.tabs =
-				prevSyncStateRef.current.tabs.filter(
-					( _, i ) => ! removedSet.has( i )
-				);
-		} else if ( tabsInserted ) {
-			// A tab was pasted or duplicated — insert matching menu items.
-			const prevTabIds = new Set( prevTabs.map( ( t ) => t.clientId ) );
-			const newMenuItems = tabs
-				.map( ( tab, tabIndex ) =>
-					! prevTabIds.has( tab.clientId )
-						? {
-								tabIndex,
-								block: createBlock( 'core/tabs-menu-item', {} ),
-						  }
-						: null
-				)
-				.filter( Boolean );
-
-			if ( newMenuItems.length > 0 ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				insertBlocks(
-					newMenuItems.map( ( { block } ) => block ),
-					newMenuItems[ 0 ].tabIndex,
-					tabsMenuClientId,
-					false
-				);
-				newMenuItems.forEach( ( { tabIndex, block } ) => {
-					prevSyncStateRef.current.menuItems.splice( tabIndex, 0, {
-						clientId: block.clientId,
-					} );
-				} );
-			}
-		} else if ( menuItemsInserted ) {
-			// A menu item was pasted or duplicated — insert matching tabs,
-			// copying the label from the adjacent tab.
-			const prevMenuItemIds = new Set(
-				prevMenuItems.map( ( m ) => m.clientId )
-			);
-			const newTabs = menuItems
-				.map( ( menuItem, menuItemIndex ) => {
-					if ( prevMenuItemIds.has( menuItem.clientId ) ) {
-						return null;
-					}
-					const label =
-						tabs[ menuItemIndex - 1 ]?.attributes?.label ??
-						tabs[ menuItemIndex ]?.attributes?.label ??
-						'';
-					return {
-						menuItemIndex,
-						block: createBlock( 'core/tab', { label } ),
-					};
-				} )
-				.filter( Boolean );
-
-			if ( newTabs.length > 0 ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				insertBlocks(
-					newTabs.map( ( { block } ) => block ),
-					newTabs[ 0 ].menuItemIndex,
-					tabPanelClientId,
-					false
-				);
-				newTabs.forEach( ( { menuItemIndex, block } ) => {
-					prevSyncStateRef.current.tabs.splice( menuItemIndex, 0, {
-						clientId: block.clientId,
-					} );
-				} );
-			}
-		}
-	}, [
-		tabs,
-		menuItems,
-		removeBlock,
-		insertBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-		tabsMenuClientId,
-		tabPanelClientId,
-	] );
-}

package/src/tabs-menu/index.php

@@ -1,80 +0,0 @@
-<?php
-/**
- * Tabs Menu Block
- *
- * @package WordPress
- */
-
-/**
- * Render callback for core/tabs-menu.
- *
- * Re-renders each tabs-menu-item inner block with per-item context (index, id,
- * label) injected from the tabs-list, so the tabs-menu-item render callback
- * can add the correct IAPI directives for each button.
- *
- * @since 7.0.0
- *
- * @param array     $attributes Block attributes.
- * @param string    $content    Block content (rendered inner blocks from save.js).
- * @param \WP_Block $block      WP_Block instance.
- *
- * @return string Updated HTML.
- */
-function block_core_tabs_menu_render_callback( array $attributes, string $content, \WP_Block $block ): string {
-	$tabs_list = $block->context['core/tabs-list'] ?? array();
-
-	if ( empty( $tabs_list ) ) {
-		return $content;
-	}
-
-	// Re-render each tabs-menu-item with per-item context (index, id, label).
-	// Match by position so items align with their corresponding tabs.
-	$buttons_html       = '';
-	$menu_item_position = 0;
-
-	foreach ( $block->parsed_block['innerBlocks'] ?? array() as $parsed_menu_item ) {
-		if ( 'core/tabs-menu-item' !== ( $parsed_menu_item['blockName'] ?? '' ) ) {
-			continue;
-		}
-
-		$tab       = $tabs_list[ $menu_item_position ] ?? null;
-		$tab_index = $menu_item_position;
-		++$menu_item_position;
-
-		// Skip menu items with no matching tab.
-		if ( null === $tab ) {
-			continue;
-		}
-
-		$item_context = array_merge(
-			$block->context,
-			array(
-				'core/tabs-menu-item-index' => $tab_index,
-				'core/tabs-menu-item-id'    => $tab['id'] ?? '',
-				'core/tabs-menu-item-label' => $tab['label'] ?? '',
-			)
-		);
-
-		$menu_item_block = new WP_Block( $parsed_menu_item, $item_context );
-		$buttons_html   .= $menu_item_block->render();
-	}
-
-	// Rebuild the wrapper using get_block_wrapper_attributes().
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'role' => 'tablist' ) );
-	return sprintf( '<div %s>%s</div>', $wrapper_attributes, $buttons_html );
-}
-
-/**
- * Registers the `core/tabs-menu` block on the server.
- *
- * @since 7.0.0
- */
-function register_block_core_tabs_menu() {
-	register_block_type_from_metadata(
-		__DIR__ . '/tabs-menu',
-		array(
-			'render_callback' => 'block_core_tabs_menu_render_callback',
-		)
-	);
-}
-add_action( 'init', 'register_block_core_tabs_menu' );

package/src/tabs-menu-item/block.json

@@ -1,56 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"__experimental": true,
-	"apiVersion": 3,
-	"name": "core/tabs-menu-item",
-	"title": "Tab Menu Item",
-	"description": "A single tab button in the tabs menu.",
-	"category": "design",
-	"textdomain": "default",
-	"parent": [ "core/tabs-menu" ],
-	"usesContext": [
-		"core/tabs-list",
-		"core/tabs-activeTabIndex",
-		"core/tabs-editorActiveTabIndex",
-		"core/tabs-menu-item-index",
-		"core/tabs-menu-item-id",
-		"core/tabs-menu-item-label"
-	],
-	"supports": {
-		"html": false,
-		"reusable": false,
-		"visibility": false,
-		"lock": false,
-		"color": {
-			"background": true,
-			"text": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
-		"typography": {
-			"fontSize": true,
-			"__experimentalFontFamily": true,
-			"textAlign": true,
-			"__experimentalDefaultControls": {
-				"fontSize": true
-			}
-		},
-		"spacing": {
-			"padding": true,
-			"__experimentalDefaultControls": {
-				"padding": true
-			}
-		},
-		"__experimentalBorder": {
-			"radius": true,
-			"color": true,
-			"width": true,
-			"style": true
-		}
-	},
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor.css",
-	"style": "file:./style-index.css"
-}

package/src/tabs-menu-item/controls.js

@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BlockControls } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
-
-export default function Controls( { tabsClientId } ) {
-	return (
-		<BlockControls>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-		</BlockControls>
-	);
-}

package/src/tabs-menu-item/edit.js

@@ -1,141 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	useBlockProps,
-	store as blockEditorStore,
-	RichText,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Controls from './controls';
-
-const EMPTY_ARRAY = [];
-
-function Edit( { context, clientId } ) {
-	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
-	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
-
-	const effectiveActiveIndex = useMemo( () => {
-		return editorActiveTabIndex ?? activeTabIndex;
-	}, [ editorActiveTabIndex, activeTabIndex ] );
-
-	const { menuItemIndex, tabsClientId, selectedTabClientId } = useSelect(
-		( select ) => {
-			const {
-				getBlockOrder,
-				getBlockRootClientId,
-				getSelectedBlockClientIds,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-
-			const _tabsMenuClientId = getBlockRootClientId( clientId );
-			const _tabsClientId = _tabsMenuClientId
-				? getBlockRootClientId( _tabsMenuClientId )
-				: null;
-
-			const siblings = getBlockOrder( _tabsMenuClientId );
-			const _menuItemIndex = siblings.indexOf( clientId );
-
-			// Find which tab panel block is currently selected.
-			const selectedIds = getSelectedBlockClientIds();
-			let _selectedTabClientId = null;
-			for ( const tab of tabsList ) {
-				if (
-					selectedIds.includes( tab.clientId ) ||
-					hasSelectedInnerBlock( tab.clientId, true )
-				) {
-					_selectedTabClientId = tab.clientId;
-					break;
-				}
-			}
-
-			return {
-				menuItemIndex: _menuItemIndex,
-				tabsClientId: _tabsClientId,
-				selectedTabClientId: _selectedTabClientId,
-			};
-		},
-		[ clientId, tabsList ]
-	);
-
-	const tab = tabsList[ menuItemIndex ] || {};
-
-	// tabListIndex is the tab's position in tabsList, used for active-state
-	// checks and click handling.
-	const tabListIndex = tab.index ?? menuItemIndex;
-
-	const tabClientId = tab.clientId || '';
-	const label = tab.label || '';
-
-	const isActive = tabListIndex === effectiveActiveIndex;
-	const isSelected = tabClientId === selectedTabClientId;
-
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
-
-	const handleTabClick = useCallback(
-		( event ) => {
-			event.preventDefault();
-			if ( tabsClientId && tabListIndex !== effectiveActiveIndex ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				updateBlockAttributes( tabsClientId, {
-					editorActiveTabIndex: tabListIndex,
-				} );
-			}
-		},
-		[
-			tabsClientId,
-			tabListIndex,
-			effectiveActiveIndex,
-			updateBlockAttributes,
-			__unstableMarkNextChangeAsNotPersistent,
-		]
-	);
-
-	const handleLabelChange = useCallback(
-		( newLabel ) => {
-			if ( tabClientId ) {
-				updateBlockAttributes( tabClientId, { label: newLabel } );
-			}
-		},
-		[ tabClientId, updateBlockAttributes ]
-	);
-
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			'is-active': isActive,
-			'is-selected': isSelected,
-		} ),
-		tabIndex: -1,
-		onClick: handleTabClick,
-	} );
-
-	return (
-		<>
-			<Controls tabsClientId={ tabsClientId } />
-			<button { ...blockProps } type="button">
-				<RichText
-					tagName="span"
-					withoutInteractiveFormatting
-					placeholder={ __( 'Tab title' ) }
-					value={ label }
-					onChange={ handleLabelChange }
-				/>
-			</button>
-		</>
-	);
-}
-
-export default Edit;

package/src/tabs-menu-item/index.php

@@ -1,70 +0,0 @@
-<?php
-/**
- * Tabs Menu Item Block
- *
- * @package WordPress
- */
-
-/**
- * Render callback for core/tabs-menu-item.
- *
- * Injects the tab label and IAPI directives into the saved button HTML.
- * Per-item context (index, id, label) is provided by the parent tabs-menu
- * render callback before this is called.
- *
- * @since 7.0.0
- *
- * @param array     $attributes Block attributes.
- * @param string    $content    Block content (styled button from save.js).
- * @param \WP_Block $block      WP_Block instance.
- *
- * @return string Updated HTML.
- */
-function block_core_tabs_menu_item_render_callback( array $attributes, string $content, \WP_Block $block ): string {
-	$tab_index = $block->context['core/tabs-menu-item-index'] ?? 0;
-	$tab_id    = $block->context['core/tabs-menu-item-id'] ?? '';
-	$tab_label = $block->context['core/tabs-menu-item-label'] ?? '';
-
-	if ( empty( $tab_id ) ) {
-		$tab_id = 'tab-' . $tab_index;
-	}
-
-	// Add Interactivity API directives and tab-specific attributes to the button.
-	$tag_processor = new WP_HTML_Tag_Processor( $content );
-
-	if ( $tag_processor->next_tag() ) {
-		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
-		$tag_processor->set_attribute( 'aria-controls', $tab_id );
-		$tag_processor->set_attribute( 'data-wp-on--click', 'actions.handleTabClick' );
-		$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
-		$tag_processor->set_attribute( 'data-wp-bind--aria-selected', 'state.isActiveTab' );
-		$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
-		$tag_processor->set_attribute(
-			'data-wp-context',
-			wp_json_encode( array( 'tabIndex' => $tab_index ) )
-		);
-	}
-
-	// Inject the tab label into the button.
-	return preg_replace(
-		'/(<button\b[^>]*>).*?(<\/button>)/s',
-		'$1<span>' . wp_kses_post( $tab_label ) . '</span>$2',
-		$tag_processor->get_updated_html(),
-		1
-	);
-}
-
-/**
- * Registers the `core/tabs-menu-item` block on the server.
- *
- * @since 7.0.0
- */
-function register_block_core_tabs_menu_item() {
-	register_block_type_from_metadata(
-		__DIR__ . '/tabs-menu-item',
-		array(
-			'render_callback' => 'block_core_tabs_menu_item_render_callback',
-		)
-	);
-}
-add_action( 'init', 'register_block_core_tabs_menu_item' );

package/src/tabs-menu-item/save.js

@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps } from '@wordpress/block-editor';
-
-export default function save() {
-	const blockProps = useBlockProps.save( {
-		type: 'button',
-		role: 'tab',
-	} );
-
-	return <button { ...blockProps } />;
-}

package/src/tabs-menu-item/style.scss

@@ -1,40 +0,0 @@
-.wp-block-tabs-menu-item {
-	box-sizing: border-box;
-	color: inherit;
-	display: block;
-	width: max-content;
-	text-decoration: none;
-	cursor: pointer;
-	flex-basis: inherit !important;
-	flex-grow: inherit !important;
-	position: relative;
-
-	// Button reset
-	border: none;
-	background: none;
-	appearance: none;
-	-webkit-appearance: none;
-
-	margin: 0;
-	padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
-
-	// Inherit typography from parent
-	font-size: inherit;
-	font-family: inherit;
-	font-weight: inherit;
-	line-height: inherit;
-	letter-spacing: inherit;
-	text-transform: inherit;
-	text-align: inherit;
-
-	&[aria-selected="true"]::before,
-	&.is-active::before {
-		content: "";
-		position: absolute;
-		border-bottom: 2px solid currentColor;
-		pointer-events: none;
-		left: 0;
-		width: 100%;
-		bottom: 0;
-	}
-}