@wordpress/block-library 9.43.0 → 9.44.0

package/src/tab/add-tab-toolbar-control.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import {
 	BlockControls,
@@ -22,61 +22,43 @@ import { useDispatch, useSelect } from '@wordpress/data';
 export default function AddTabToolbarControl( { tabsClientId } ) {
 	const { insertBlock } = useDispatch( blockEditorStore );
 
-	const { tabPanelClientId, tabsMenuClientId, tabCount, existingAnchors } =
-		useSelect(
-			( select ) => {
-				if ( ! tabsClientId ) {
-					return {
-						tabPanelClientId: null,
-						tabsMenuClientId: null,
-						existingAnchors: [],
-					};
-				}
-				const { getBlocks } = select( blockEditorStore );
-				const innerBlocks = getBlocks( tabsClientId );
-				const tabPanel = innerBlocks.find(
-					( block ) => block.name === 'core/tab-panel'
-				);
-				const tabsMenu = innerBlocks.find(
-					( block ) => block.name === 'core/tabs-menu'
-				);
+	const { tabPanelClientId, tabsMenuClientId } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
 				return {
-					tabPanelClientId: tabPanel?.clientId || null,
-					tabsMenuClientId: tabsMenu?.clientId || null,
-					tabCount: tabPanel?.innerBlocks?.length || 0,
-					existingAnchors: ( tabPanel?.innerBlocks || [] )
-						.map( ( block ) => block.attributes.anchor )
-						.filter( Boolean ),
+					tabPanelClientId: null,
+					tabsMenuClientId: null,
 				};
-			},
-			[ tabsClientId ]
-		);
+			}
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( tabsClientId );
+			const tabPanel = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panel'
+			);
+			const tabsMenu = innerBlocks.find(
+				( block ) => block.name === 'core/tabs-menu'
+			);
+			return {
+				tabPanelClientId: tabPanel?.clientId || null,
+				tabsMenuClientId: tabsMenu?.clientId || null,
+			};
+		},
+		[ tabsClientId ]
+	);
 
 	const addTab = () => {
 		if ( ! tabPanelClientId ) {
 			return;
 		}
 
-		// Start from count + 1 so the label stays sequential, then increment
-		// until the anchor slot is free.
-		const existingAnchorSet = new Set( existingAnchors );
-		let tabNumber = tabCount + 1;
-		while ( existingAnchorSet.has( `tab-${ tabNumber }` ) ) {
-			tabNumber++;
-		}
-
 		const newTabBlock = createBlock( 'core/tab', {
-			anchor: `tab-${ tabNumber }`,
-			/* translators: %d: tab number */
-			label: sprintf( __( 'Tab %d' ), tabNumber ),
+			label: __( 'Tab' ),
 		} );
 		insertBlock( newTabBlock, undefined, tabPanelClientId );
 
 		// Insert a corresponding menu item into the tabs-menu.
 		if ( tabsMenuClientId ) {
-			const newMenuItemBlock = createBlock( 'core/tabs-menu-item', {
-				anchor: `tab-${ tabNumber }-button`,
-			} );
+			const newMenuItemBlock = createBlock( 'core/tabs-menu-item', {} );
 			insertBlock( newMenuItemBlock, undefined, tabsMenuClientId );
 		}
 	};

package/src/tab/block.json

@@ -17,7 +17,8 @@
 	"parent": [ "core/tab-panel" ],
 	"usesContext": [
 		"core/tabs-activeTabIndex",
-		"core/tabs-editorActiveTabIndex"
+		"core/tabs-editorActiveTabIndex",
+		"core/tabs-id"
 	],
 	"supports": {
 		"anchor": true,

package/src/tab/index.php

@@ -11,17 +11,34 @@
  * @since 7.0.0
  *
  * @param array     $attributes Block attributes.
- * @param string    $content    Block content.
+* @param array     $attributes Block attributes.
+* @param string    $content    Block content.
+* @param \WP_Block $block      Block instance.
  *
  * @return string Updated HTML.
  */
-function block_core_tab_render( array $attributes, string $content ): string {
+function block_core_tab_render( array $attributes, string $content, \WP_Block $block ): string {
+	$tabs_id = $block->context['core/tabs-id'] ?? '';
+
+	static $tab_counters = array();
+
+	if ( ! isset( $tab_counters[ $tabs_id ] ) ) {
+		$tab_counters[ $tabs_id ] = 0;
+	}
+
+	$tab_index = $tab_counters[ $tabs_id ];
+	++$tab_counters[ $tabs_id ];
+
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
+
+	// Use the user's custom anchor if present, otherwise fall back to
+	// the generated position-based ID.
 	$tab_id = (string) $tag_processor->get_attribute( 'id' );
-	// If no id, generate a unique one
 	if ( empty( $tab_id ) ) {
-		$tab_id = sanitize_title( $attributes['label'] );
+		$tab_id = ! empty( $tabs_id )
+			? $tabs_id . '-tab-' . $tab_index
+			: 'tab-' . $tab_index;
 		$tag_processor->set_attribute( 'id', $tab_id );
 	}
 

package/src/tab/remove-tab-toolbar-control.js

@@ -58,15 +58,7 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 			const tabs = tabPanel?.innerBlocks || [];
 			const menuItems = tabsMenu?.innerBlocks || [];
 			const activeTab = tabs[ activeIndex ];
-			// Match menu item by anchor (e.g. "tab-1" → "tab-1-button").
-			const expectedMenuAnchor = activeTab?.attributes?.anchor
-				? `${ activeTab.attributes.anchor }-button`
-				: null;
-			const activeMenuItem = expectedMenuAnchor
-				? menuItems.find(
-						( m ) => m.attributes?.anchor === expectedMenuAnchor
-				  )
-				: menuItems[ activeIndex ];
+			const activeMenuItem = menuItems[ activeIndex ];
 			return {
 				activeTabClientId: activeTab?.clientId || null,
 				activeMenuItemClientId: activeMenuItem?.clientId || null,

package/src/tabs/edit.js

@@ -9,12 +9,15 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Controls from './controls';
 
+const EMPTY_ARRAY = [];
+
 const TABS_TEMPLATE = [
 	[
 		'core/tabs-menu',
@@ -24,8 +27,8 @@ const TABS_TEMPLATE = [
 			},
 		},
 		[
-			[ 'core/tabs-menu-item', { anchor: 'tab-1-button' } ],
-			[ 'core/tabs-menu-item', { anchor: 'tab-2-button' } ],
+			[ 'core/tabs-menu-item', {} ],
+			[ 'core/tabs-menu-item', {} ],
 		],
 	],
 	[
@@ -39,16 +42,14 @@ const TABS_TEMPLATE = [
 			[
 				'core/tab',
 				{
-					anchor: 'tab-1',
-					label: 'Tab 1',
+					label: __( 'Tab' ),
 				},
 				[ [ 'core/paragraph' ] ],
 			],
 			[
 				'core/tab',
 				{
-					anchor: 'tab-2',
-					label: 'Tab 2',
+					label: __( 'Tab' ),
 				},
 				[ [ 'core/paragraph' ] ],
 			],
@@ -74,41 +75,24 @@ function Edit( {
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
-	const { removeBlock } = useDispatch( blockEditorStore );
+	const { removeBlock, replaceInnerBlocks } = 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, menuItems } = useSelect(
+	const { tabs, tabPanelClientId, menuItems } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
 
-			// Find tab-panel block and extract tab data.
 			const tabPanel = innerBlocks.find(
 				( block ) => block.name === 'core/tab-panel'
 			);
-
-			// 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 ?? '',
-							} ) )
-					: [],
+				tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
+				tabPanelClientId: tabPanel?.clientId ?? null,
+				menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,
 			};
 		},
 		[ clientId ]
@@ -130,7 +114,6 @@ function Edit( {
 	useEffect( () => {
 		const currentTabs = tabs.map( ( tab ) => ( {
 			clientId: tab.clientId,
-			anchor: tab.attributes.anchor ?? '',
 		} ) );
 
 		if ( prevSyncStateRef.current === null ) {
@@ -146,6 +129,13 @@ function Edit( {
 
 		const tabsRemoved = currentTabs.length < prevTabs.length;
 		const menuItemsRemoved = menuItems.length < prevMenuItems.length;
+		const menuItemsReordered =
+			! tabsRemoved &&
+			! menuItemsRemoved &&
+			menuItems.length === prevMenuItems.length &&
+			menuItems.some(
+				( m, i ) => m.clientId !== prevMenuItems[ i ]?.clientId
+			);
 
 		// Update snapshot to the current state.
 		// Snapshot is updated eagerly; post-removal mutations keep it consistent
@@ -155,6 +145,23 @@ function Edit( {
 			menuItems: [ ...menuItems ],
 		};
 
+		// When menu items are reordered, move the corresponding tab content
+		// blocks to match the new order.
+		if ( menuItemsReordered && tabPanelClientId ) {
+			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 ) {
+				replaceInnerBlocks( tabPanelClientId, reorderedTabs, false );
+			}
+			return;
+		}
+
 		// Lists are in sync, nothing changed, or toolbar already removed both.
 		if (
 			( ! tabsRemoved && ! menuItemsRemoved ) ||
@@ -169,45 +176,31 @@ function Edit( {
 		);
 
 		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
-						);
-				}
-			} );
+			// Remove the menu item at the same position.
+			const removedIndex = prevTabs.findIndex(
+				( t ) => ! currentTabIds.has( t.clientId )
+			);
+			if ( removedIndex >= 0 && menuItems[ removedIndex ] ) {
+				removeBlock( menuItems[ removedIndex ].clientId, false );
+				prevSyncStateRef.current.menuItems =
+					prevSyncStateRef.current.menuItems.filter(
+						( _, i ) => i !== removedIndex
+					);
+			}
 		} 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
-						);
-				}
-			} );
+			// Remove the tab at the same position.
+			const removedIndex = prevMenuItems.findIndex(
+				( m ) => ! currentMenuItemIds.has( m.clientId )
+			);
+			if ( removedIndex >= 0 && tabs[ removedIndex ] ) {
+				removeBlock( tabs[ removedIndex ].clientId, false );
+				prevSyncStateRef.current.tabs =
+					prevSyncStateRef.current.tabs.filter(
+						( _, i ) => i !== removedIndex
+					);
+			}
 		}
-	}, [ tabs, menuItems, removeBlock ] );
+	}, [ tabs, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks ] );
 
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.

package/src/tabs/index.php

@@ -10,11 +10,12 @@
  *
  * @since 7.0.0
  *
- * @param array $innerblocks Parsed inner blocks of tabs block.
+ * @param array  $innerblocks Parsed inner blocks of tabs block.
+ * @param string $tabs_id     Unique ID for the tabs instance, used to generate tab IDs.
  *
  * @return array List of tabs with id, label, index.
  */
-function block_core_tabs_generate_tabs_list( array $innerblocks = array() ): array {
+function block_core_tabs_generate_tabs_list( array $innerblocks = array(), string $tabs_id = '' ): array {
 	$tabs_list = array();
 
 	// Find tab-panel block
@@ -26,17 +27,11 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array() ): arr
 					$attrs     = $tab_block['attrs'] ?? array();
 					$tab_label = $attrs['label'] ?? '';
 
-					// Try to get the ID from the rendered content
-					$tab_id = $attrs['anchor'] ?? '';
-					if ( empty( $tab_id ) && ! empty( $tab_block['innerHTML'] ) ) {
-						$tag_processor = new WP_HTML_Tag_Processor( $tab_block['innerHTML'] );
-						if ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) ) ) {
-							$tab_id = $tag_processor->get_attribute( 'id' ) ?? '';
-						}
-					}
-					if ( empty( $tab_id ) ) {
-						$tab_id = 'tab-' . $tab_index;
-					}
+					$tab_id = ! empty( $attrs['anchor'] )
+						? $attrs['anchor']
+						: ( ! empty( $tabs_id )
+							? $tabs_id . '-tab-' . $tab_index
+							: 'tab-' . $tab_index );
 
 					$tabs_list[] = array(
 						'id'    => esc_attr( $tab_id ),
@@ -67,9 +62,13 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array() ): arr
  */
 function block_core_tabs_provide_context( array $context, array $parsed_block ): array {
 	if ( 'core/tabs' === $parsed_block['blockName'] ) {
-		$tabs_list                 = block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array() );
+		// Generate a unique ID for the tabs instance first, so it can be used
+		// to derive stable tab IDs. Used for 3rd party extensibility to identify
+		// the tabs instance.
+		$tabs_id                   = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' );
+		$tabs_list                 = block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array(), $tabs_id );
 		$context['core/tabs-list'] = $tabs_list;
-		$context['core/tabs-id']   = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' ); // Generate a unique ID for each tabs instance. Used for 3rd party extensibility to identify the tabs instance.
+		$context['core/tabs-id']   = $tabs_id;
 	}
 
 	return $context;

package/src/tabs-menu/block.json

@@ -63,6 +63,5 @@
 		}
 	},
 	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor.css",
-	"style": "file:./style-index.css"
+	"editorStyle": "file:./editor.css"
 }

package/src/tabs-menu/index.php

@@ -28,29 +28,18 @@ function block_core_tabs_menu_render_callback( array $attributes, string $conten
 	}
 
 	// 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 = '';
+	// 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;
 		}
 
-		// 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;
-			}
-		}
+		$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 ) {

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

@@ -17,12 +17,6 @@
 		"core/tabs-menu-item-id",
 		"core/tabs-menu-item-label"
 	],
-	"attributes": {
-		"anchor": {
-			"type": "string",
-			"default": ""
-		}
-	},
 	"supports": {
 		"html": false,
 		"reusable": false,

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	store as blockEditorStore,
@@ -23,7 +23,6 @@ import Controls from './controls';
 const EMPTY_ARRAY = [];
 
 function Edit( {
-	attributes,
 	context,
 	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
@@ -75,14 +74,7 @@ function Edit( {
 		[ clientId, tabsList ]
 	);
 
-	// Find the corresponding tab's anchor from this menu item's anchor
-	// attribute (e.g., "tab-1-button" → "tab-1"), then look it up in tabsList.
-	// Falls back to positional lookup when no anchor is set.
-	const tabAnchor = attributes.anchor?.replace( /-button$/, '' ) ?? '';
-	const tab =
-		( tabAnchor && tabsList.find( ( t ) => t.id === tabAnchor ) ) ||
-		tabsList[ menuItemIndex ] ||
-		{};
+	const tab = tabsList[ menuItemIndex ] || {};
 
 	// tabListIndex is the tab's position in tabsList, used for active-state
 	// checks and click handling.
@@ -146,11 +138,7 @@ function Edit( {
 				<RichText
 					tagName="span"
 					withoutInteractiveFormatting
-					placeholder={ sprintf(
-						/* translators: %d is the tab index + 1 */
-						__( 'Tab title %d' ),
-						menuItemIndex + 1
-					) }
+					placeholder={ __( 'Tab title' ) }
 					value={ label }
 					onChange={ handleLabelChange }
 				/>

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

@@ -7,6 +7,7 @@
 	cursor: pointer;
 	flex-basis: inherit !important;
 	flex-grow: inherit !important;
+	position: relative;
 
 	// Button reset
 	border: none;
@@ -26,13 +27,14 @@
 	text-transform: inherit;
 	text-align: inherit;
 
-	&:focus-visible {
-		outline-offset: 2px;
-	}
-
-	&[aria-selected="true"],
-	&.is-active {
-		background-color: #000;
-		color: #fff;
+	&[aria-selected="true"]::before,
+	&.is-active::before {
+		content: "";
+		position: absolute;
+		border-bottom: 2px solid currentColor;
+		pointer-events: none;
+		left: 0;
+		width: 100%;
+		bottom: 0;
 	}
 }

package/build-style/tabs-menu/style-rtl.css

@@ -1,8 +0,0 @@
-.wp-block-tabs-menu {
-  display: flex;
-  align-items: flex-end;
-  min-width: fit-content;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: #000;
-}

package/build-style/tabs-menu/style.css

@@ -1,8 +0,0 @@
-.wp-block-tabs-menu {
-  display: flex;
-  align-items: flex-end;
-  min-width: fit-content;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: #000;
-}

package/src/tabs-menu/style.scss

@@ -1,8 +0,0 @@
-.wp-block-tabs-menu {
-	display: flex;
-	align-items: flex-end;
-	min-width: fit-content;
-	border-bottom-width: 1px; // A default border divider between the tabs-menu and the tab-panel
-	border-bottom-style: solid;
-	border-bottom-color: #000;
-}