@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/src/tabs/edit.js

@@ -7,8 +7,8 @@ import {
 	BlockContextProvider,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +23,10 @@ const TABS_TEMPLATE = [
 				remove: true,
 			},
 		},
+		[
+			[ 'core/tabs-menu-item', { anchor: 'tab-1-button' } ],
+			[ 'core/tabs-menu-item', { anchor: 'tab-2-button' } ],
+		],
 	],
 	[
 		'core/tab-panel',
@@ -40,6 +44,14 @@ const TABS_TEMPLATE = [
 				},
 				[ [ 'core/paragraph' ] ],
 			],
+			[
+				'core/tab',
+				{
+					anchor: 'tab-2',
+					label: 'Tab 2',
+				},
+				[ [ 'core/paragraph' ] ],
+			],
 		],
 	],
 ];
@@ -62,30 +74,141 @@ function Edit( {
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
+	const { removeBlock } = useDispatch( blockEditorStore );
+
 	/**
 	 * Construct a list of core/tab blocks, used to create tabs-list context.
+	 * Also select menu items with their anchors for anchor-based deletion sync.
 	 */
-	const tabs = useSelect(
+	const { tabs, menuItems } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
 
-			// Find tab-panel block and extract tab data
+			// Find tab-panel block and extract tab data.
 			const tabPanel = innerBlocks.find(
 				( block ) => block.name === 'core/tab-panel'
 			);
 
-			if ( ! tabPanel ) {
-				return [];
-			}
-
-			return tabPanel.innerBlocks.filter(
-				( block ) => block.name === 'core/tab'
+			// Find tabs-menu block and get its children with their anchors.
+			const tabsMenu = innerBlocks.find(
+				( block ) => block.name === 'core/tabs-menu'
 			);
+
+			return {
+				tabs: tabPanel
+					? tabPanel.innerBlocks.filter(
+							( block ) => block.name === 'core/tab'
+					  )
+					: [],
+				menuItems: tabsMenu
+					? getBlocks( tabsMenu.clientId )
+							.filter( ( b ) => b.name === 'core/tabs-menu-item' )
+							.map( ( b ) => ( {
+								clientId: b.clientId,
+								anchor: b.attributes.anchor ?? '',
+							} ) )
+					: [],
+			};
 		},
 		[ clientId ]
 	);
 
+	/**
+	 * Keep tabs and menu items in sync when either is deleted directly (e.g.
+	 * via the Backspace key or List View).
+	 *
+	 * TODO: This effect only handles deletions. The two lists can get out of
+	 * sync in other cases: if a user pastes a core/tab block into the tab-panel
+	 * (or duplicates one), no corresponding tabs-menu-item is created; if a
+	 * user drags and drops a tabs-menu-item, the tab panel is not copied with
+	 * it. We should extend this effect to handle insertions, detecting when
+	 * tabs.length > menuItems.length and inserting the missing menu
+	 * item(s) at the correct index.
+	 */
+	const prevSyncStateRef = useRef( null );
+	useEffect( () => {
+		const currentTabs = tabs.map( ( tab ) => ( {
+			clientId: tab.clientId,
+			anchor: tab.attributes.anchor ?? '',
+		} ) );
+
+		if ( prevSyncStateRef.current === null ) {
+			prevSyncStateRef.current = {
+				tabs: currentTabs,
+				menuItems: [ ...menuItems ],
+			};
+			return;
+		}
+
+		const { tabs: prevTabs, menuItems: prevMenuItems } =
+			prevSyncStateRef.current;
+
+		const tabsRemoved = currentTabs.length < prevTabs.length;
+		const menuItemsRemoved = menuItems.length < prevMenuItems.length;
+
+		// Update snapshot to the current state.
+		// Snapshot is updated eagerly; post-removal mutations keep it consistent
+		// so the next effect invocation sees a stable baseline.
+		prevSyncStateRef.current = {
+			tabs: currentTabs,
+			menuItems: [ ...menuItems ],
+		};
+
+		// Lists are in sync, nothing changed, or toolbar already removed both.
+		if (
+			( ! tabsRemoved && ! menuItemsRemoved ) ||
+			( tabsRemoved && menuItemsRemoved )
+		) {
+			return;
+		}
+
+		const currentTabIds = new Set( currentTabs.map( ( t ) => t.clientId ) );
+		const currentMenuItemIds = new Set(
+			menuItems.map( ( m ) => m.clientId )
+		);
+
+		if ( tabsRemoved ) {
+			prevTabs.forEach( ( prevTab ) => {
+				if ( currentTabIds.has( prevTab.clientId ) ) {
+					return;
+				}
+				const expectedMenuAnchor = prevTab.anchor
+					? `${ prevTab.anchor }-button`
+					: null;
+				const menuItemToRemove = expectedMenuAnchor
+					? menuItems.find( ( m ) => m.anchor === expectedMenuAnchor )
+					: null;
+				if ( menuItemToRemove ) {
+					removeBlock( menuItemToRemove.clientId, false );
+					prevSyncStateRef.current.menuItems =
+						prevSyncStateRef.current.menuItems.filter(
+							( m ) => m.clientId !== menuItemToRemove.clientId
+						);
+				}
+			} );
+		} else {
+			prevMenuItems.forEach( ( prevItem ) => {
+				if ( currentMenuItemIds.has( prevItem.clientId ) ) {
+					return;
+				}
+				const expectedTabAnchor =
+					prevItem.anchor?.replace( /-button$/, '' ) ?? '';
+				const tabToRemove = tabs.find(
+					( tab ) =>
+						( tab.attributes.anchor ?? '' ) === expectedTabAnchor
+				);
+				if ( tabToRemove ) {
+					removeBlock( tabToRemove.clientId, false );
+					prevSyncStateRef.current.tabs =
+						prevSyncStateRef.current.tabs.filter(
+							( t ) => t.clientId !== tabToRemove.clientId
+						);
+				}
+			} );
+		}
+	}, [ tabs, menuItems, removeBlock ] );
+
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.
 	 */

package/src/tabs/index.js

@@ -22,13 +22,23 @@ export const settings = {
 		innerBlocks: [
 			{
 				name: 'core/tabs-menu',
-				innerBlocks: [ { name: 'core/tabs-menu-item' } ],
+				innerBlocks: [
+					{
+						name: 'core/tabs-menu-item',
+						attributes: { anchor: 'tab-1-button' },
+					},
+					{
+						name: 'core/tabs-menu-item',
+						attributes: { anchor: 'tab-2-button' },
+					},
+				],
 			},
 			{
 				name: 'core/tab-panel',
-				innerBlocks: [ 1, 2, 3 ].map( ( index ) => ( {
+				innerBlocks: [ 1, 2 ].map( ( index ) => ( {
 					name: 'core/tab',
 					attributes: {
+						anchor: `tab-${ index }`,
 						label: sprintf(
 							/** translators: %s: tab index number */
 							__( 'Tab %s' ),

package/src/tabs-menu/block.json

@@ -10,12 +10,7 @@
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
 	"allowedBlocks": [ "core/tabs-menu-item" ],
-	"usesContext": [
-		"core/tabs-list",
-		"core/tabs-id",
-		"core/tabs-activeTabIndex",
-		"core/tabs-editorActiveTabIndex"
-	],
+	"usesContext": [ "core/tabs-list" ],
 	"attributes": {},
 	"supports": {
 		"html": false,

package/src/tabs-menu/edit.js

@@ -6,23 +6,12 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	BlockContextProvider,
-	__experimentalUseBlockPreview as useBlockPreview,
 	store as blockEditorStore,
-	useBlockEditContext,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	memo,
-	useMemo,
-	useState,
-	useEffect,
-	useCallback,
-} from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,221 +19,31 @@ import {
 import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
 
-const TABS_MENU_ITEM_TEMPLATE = [ [ 'core/tabs-menu-item', {} ] ];
-const EMPTY_ARRAY = [];
-
-/**
- * Preview component for non-active tab menu items.
- * Uses useBlockPreview to cache the rendering.
- *
- * @param {Object}   props                         Component props.
- * @param {Array}    props.blocks                  The blocks to preview.
- * @param {string}   props.blockContextId          The context ID for this block.
- * @param {boolean}  props.isHidden                Whether the preview is hidden.
- * @param {Function} props.setActiveBlockContextId Callback to set the active context ID.
- */
-function TabsMenuItemPreview( {
-	blocks,
-	blockContextId,
-	isHidden,
-	setActiveBlockContextId,
-} ) {
-	const blockPreviewProps = useBlockPreview( { blocks } );
-
-	const handleOnClick = () => {
-		setActiveBlockContextId( blockContextId );
-	};
-
-	const style = {
-		display: isHidden ? 'none' : 'flex',
-	};
-
-	return (
-		<div
-			{ ...blockPreviewProps }
-			tabIndex={ 0 }
-			role="button"
-			onClick={ handleOnClick }
-			onKeyDown={ handleOnClick }
-			style={ style }
-		/>
-	);
-}
-
-const MemoizedTabsMenuItemPreview = memo( TabsMenuItemPreview );
-
-/**
- * The actual editable inner blocks for the active tab item.
- *
- * @param {Object} props              Component props.
- * @param {Object} props.wrapperProps Props to pass to the wrapper element.
- * @param {Object} props.layout       The layout object to pass to inner blocks.
- */
-function TabsMenuItemTemplateBlocks( { wrapperProps = {}, layout } ) {
-	const innerBlocksProps = useInnerBlocksProps( wrapperProps, {
-		template: TABS_MENU_ITEM_TEMPLATE,
-		templateLock: 'all',
-		renderAppender: false,
-		layout,
-	} );
-	return innerBlocksProps.children;
-}
-
-function Edit( {
-	context,
-	clientId,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
-	// Get the layout from block edit context to pass to inner blocks.
-	// This ensures the correct orientation is used from the start.
-	const { layout } = useBlockEditContext();
-
-	const tabsId = context[ 'core/tabs-id' ] || null;
-	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
-	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
-
-	// Memoize effectiveActiveIndex to ensure it updates when context changes
-	const effectiveActiveIndex = useMemo( () => {
-		return editorActiveTabIndex ?? activeTabIndex;
-	}, [ editorActiveTabIndex, activeTabIndex ] );
-
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	// Track which tab context is "active" for editing (shows real inner blocks)
-	const [ activeBlockContextId, setActiveBlockContextId ] = useState( null );
-
-	// Get the inner blocks (the single tabs-menu-item template)
-	const { blocks, tabsClientId } = useSelect(
-		( select ) => {
-			const { getBlocks, getBlockRootClientId } =
-				select( blockEditorStore );
-			return {
-				blocks: getBlocks( clientId ),
-				tabsClientId: getBlockRootClientId( clientId ),
-			};
-		},
+function Edit( { clientId, __unstableLayoutClassNames: layoutClassNames } ) {
+	const { tabsClientId } = useSelect(
+		( select ) => ( {
+			tabsClientId:
+				select( blockEditorStore ).getBlockRootClientId( clientId ),
+		} ),
 		[ clientId ]
 	);
 
-	// Build block contexts for each tab
-	const blockContexts = useMemo( () => {
-		return tabsList.map( ( tab, index ) => ( {
-			'core/tabs-menu-item-index': index,
-			'core/tabs-menu-item-id': tab.id || `tab-${ index }`,
-			'core/tabs-menu-item-label': tab.label || '',
-			'core/tabs-menu-item-clientId': tab.clientId,
-			// Pass through parent context
-			'core/tabs-id': tabsId,
-			'core/tabs-list': tabsList,
-			'core/tabs-activeTabIndex': activeTabIndex,
-			'core/tabs-editorActiveTabIndex': editorActiveTabIndex,
-		} ) );
-	}, [ tabsList, tabsId, activeTabIndex, editorActiveTabIndex ] );
-
-	// Generate a unique ID for each block context
-	const getContextId = useCallback( ( blockContext ) => {
-		return `tab-context-${ blockContext[ 'core/tabs-menu-item-index' ] }`;
-	}, [] );
-
-	// Set the first tab as active by default
-	useEffect( () => {
-		if ( blockContexts.length > 0 && activeBlockContextId === null ) {
-			setActiveBlockContextId( getContextId( blockContexts[ 0 ] ) );
-		}
-	}, [ blockContexts, activeBlockContextId, getContextId ] );
-
-	// Update active context when editorActiveTabIndex changes
-	useEffect( () => {
-		if (
-			blockContexts.length > 0 &&
-			effectiveActiveIndex < blockContexts.length
-		) {
-			const newContextId = getContextId(
-				blockContexts[ effectiveActiveIndex ]
-			);
-			setActiveBlockContextId( ( prevId ) =>
-				prevId !== newContextId ? newContextId : prevId
-			);
-		}
-	}, [ effectiveActiveIndex, blockContexts, getContextId ] );
-
-	// Handle tab click to update parent tabs block's editorActiveTabIndex
-	const handleTabContextClick = useCallback(
-		( index ) => {
-			if ( tabsClientId && index !== effectiveActiveIndex ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				updateBlockAttributes( tabsClientId, {
-					editorActiveTabIndex: index,
-				} );
-			}
-		},
-		[
-			tabsClientId,
-			effectiveActiveIndex,
-			updateBlockAttributes,
-			__unstableMarkNextChangeAsNotPersistent,
-		]
-	);
-
 	const blockProps = useBlockProps( {
 		className: clsx( layoutClassNames ),
 		role: 'tablist',
 	} );
 
-	// If no tabs exist yet, show placeholder
-	if ( tabsList.length === 0 ) {
-		return (
-			<>
-				<AddTabToolbarControl tabsClientId={ tabsClientId } />
-				<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-				<div { ...blockProps }>
-					<span className="tabs__tab-label tabs__tab-label--placeholder">
-						{ __( 'Add tabs to display menu' ) }
-					</span>
-				</div>
-			</>
-		);
-	}
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/tabs-menu-item' ],
+		orientation: 'horizontal',
+		renderAppender: false,
+	} );
 
 	return (
 		<>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<div { ...blockProps }>
-				{ blockContexts.map( ( blockContext, index ) => {
-					const contextId = getContextId( blockContext );
-					const isVisible = contextId === activeBlockContextId;
-
-					return (
-						<BlockContextProvider
-							key={ contextId }
-							value={ blockContext }
-						>
-							{ isVisible ? (
-								<TabsMenuItemTemplateBlocks
-									wrapperProps={ {
-										onClick: () =>
-											handleTabContextClick( index ),
-									} }
-									layout={ layout }
-								/>
-							) : null }
-							<MemoizedTabsMenuItemPreview
-								blocks={ blocks }
-								blockContextId={ contextId }
-								setActiveBlockContextId={ ( id ) => {
-									setActiveBlockContextId( id );
-									handleTabContextClick( index );
-								} }
-								isHidden={ isVisible }
-							/>
-						</BlockContextProvider>
-					);
-				} ) }
-			</div>
+			<div { ...innerBlocksProps } />
 		</>
 	);
 }

package/src/tabs-menu/editor.scss

@@ -1,6 +1,10 @@
 .wp-block-tabs-menu {
-	.tabs__tab-label--placeholder {
-		opacity: 0.5;
-		font-style: italic;
+	// Allow the inner block list to be displayed in the flex layout, so the tab buttons appear as direct flex children in the editor.
+	> .block-editor-block-list__layout {
+		display: contents;
+	}
+
+	.block-editor-block-list__block:has(> .wp-block-tabs-menu-item) {
+		display: contents;
 	}
 }

package/src/tabs-menu/index.php

@@ -8,10 +8,14 @@
 /**
  * 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 (contains the tabs-menu-item template).
+ * @param string    $content    Block content (rendered inner blocks from save.js).
  * @param \WP_Block $block      WP_Block instance.
  *
  * @return string Updated HTML.
@@ -20,44 +24,55 @@ function block_core_tabs_menu_render_callback( array $attributes, string $conten
 	$tabs_list = $block->context['core/tabs-list'] ?? array();
 
 	if ( empty( $tabs_list ) ) {
-		return '';
+		return $content;
 	}
 
-	// Get the first inner block as template (tabs-menu-item)
-	$inner_blocks = $block->parsed_block['innerBlocks'] ?? array();
-	if ( empty( $inner_blocks ) ) {
-		return '';
-	}
-	$template_block = $inner_blocks[0];
+	// Re-render each tabs-menu-item with per-item context (index, id, label).
+	// Match by anchor so the correct tab is found even when the two lists
+	// are in different orders.
+	$buttons_html = '';
+
+	foreach ( $block->parsed_block['innerBlocks'] ?? array() as $parsed_menu_item ) {
+		if ( 'core/tabs-menu-item' !== ( $parsed_menu_item['blockName'] ?? '' ) ) {
+			continue;
+		}
+
+		// Find the tab anchor from the menu item anchor (e.g. "tab-1-button" → "tab-1").
+		$menu_item_anchor = $parsed_menu_item['attrs']['anchor'] ?? '';
+		$tab_anchor       = preg_replace( '/-button$/', '', $menu_item_anchor );
+
+		// Find the matching tab in $tabs_list by id.
+		$tab       = null;
+		$tab_index = 0;
+		foreach ( $tabs_list as $index => $candidate ) {
+			if ( ( $candidate['id'] ?? '' ) === $tab_anchor ) {
+				$tab       = $candidate;
+				$tab_index = $index;
+				break;
+			}
+		}
 
-	// Build rendered tab items
-	$tabs_markup = '';
-	foreach ( $tabs_list as $index => $tab ) {
-		// Create context for this specific tab
-		$tab_context = array_merge(
+		// Skip menu items with no matching tab.
+		if ( null === $tab ) {
+			continue;
+		}
+
+		$item_context = array_merge(
 			$block->context,
 			array(
-				'core/tabs-menu-item-index' => $index,
+				'core/tabs-menu-item-index' => $tab_index,
 				'core/tabs-menu-item-id'    => $tab['id'] ?? '',
 				'core/tabs-menu-item-label' => $tab['label'] ?? '',
 			)
 		);
 
-		// Create new WP_Block instance with template and context
-		$tab_block = new WP_Block( $template_block, $tab_context );
-
-		// Render the block
-		$tabs_markup .= $tab_block->render();
+		$menu_item_block = new WP_Block( $parsed_menu_item, $item_context );
+		$buttons_html   .= $menu_item_block->render();
 	}
 
-	// Find the template block and replace it in $content with $tabs_markup
-	$content = preg_replace(
-		'/<button\b[^>]*\bwp-block-tabs-menu-item__template\b[^>]*>.*?<\/button>/si',
-		$tabs_markup,
-		$content
-	);
-
-	return $content;
+	// 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 );
 }
 
 /**

package/src/tabs-menu/save.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */

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

@@ -4,21 +4,25 @@
 	"apiVersion": 3,
 	"name": "core/tabs-menu-item",
 	"title": "Tab Menu Item",
-	"description": "A single tab button in the tabs menu. Used as a template for styling all tab buttons.",
+	"description": "A single tab button in the tabs menu.",
 	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs-menu" ],
 	"usesContext": [
-		"core/tabs-menu-item-index",
-		"core/tabs-menu-item-id",
-		"core/tabs-menu-item-label",
-		"core/tabs-menu-item-clientId",
 		"core/tabs-list",
 		"core/tabs-activeTabIndex",
-		"core/tabs-editorActiveTabIndex"
+		"core/tabs-editorActiveTabIndex",
+		"core/tabs-menu-item-index",
+		"core/tabs-menu-item-id",
+		"core/tabs-menu-item-label"
 	],
-	"attributes": {},
+	"attributes": {
+		"anchor": {
+			"type": "string",
+			"default": ""
+		}
+	},
 	"supports": {
 		"html": false,
 		"reusable": false,
@@ -31,7 +35,6 @@
 				"text": true
 			}
 		},
-		"shadow": true,
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
@@ -40,9 +43,6 @@
 				"fontSize": true
 			}
 		},
-		"layout": {
-			"allowEditing": false
-		},
 		"spacing": {
 			"padding": true,
 			"__experimentalDefaultControls": {
@@ -54,6 +54,9 @@
 			"color": true,
 			"width": true,
 			"style": true
+		},
+		"layout": {
+			"allowEditing": false
 		}
 	},
 	"editorScript": "file:./index.js",