@wordpress/block-library 9.41.0 → 9.41.1-next.v.202603161435.0

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",

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

@@ -1,24 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { __, isRTL } from '@wordpress/i18n';
-import {
-	BlockControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
-import {
-	chevronLeft,
-	chevronRight,
-	chevronUp,
-	chevronDown,
-} from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { BlockControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -26,157 +9,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
 
-function TabBlockMover( {
-	tabClientId,
-	tabIndex,
-	tabsCount,
-	tabsMenuClientId,
-	tabsClientId,
-} ) {
-	const {
-		moveBlocksUp,
-		moveBlocksDown,
-		updateBlockAttributes,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
-
-	const { tabPanelClientId, orientation } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId, getBlockAttributes } =
-				select( blockEditorStore );
-			// Get orientation directly from the tabs-menu block's layout attribute.
-			// This is more reliable than getBlockListSettings which is set asynchronously.
-			const tabsMenuAttributes = tabsMenuClientId
-				? getBlockAttributes( tabsMenuClientId )
-				: null;
-			return {
-				tabPanelClientId: getBlockRootClientId( tabClientId ),
-				orientation:
-					tabsMenuAttributes?.layout?.orientation || 'horizontal',
-			};
-		},
-		[ tabClientId, tabsMenuClientId ]
-	);
-
-	const isFirst = tabIndex === 0;
-	const isLast = tabIndex === tabsCount - 1;
-	const isHorizontal = orientation === 'horizontal';
-
-	// Icons and labels based on orientation (respects RTL for horizontal)
-	let upIcon, downIcon, upLabel, downLabel;
-	if ( isHorizontal ) {
-		if ( isRTL() ) {
-			upIcon = chevronRight;
-			downIcon = chevronLeft;
-			upLabel = __( 'Move tab right' );
-			downLabel = __( 'Move tab left' );
-		} else {
-			upIcon = chevronLeft;
-			downIcon = chevronRight;
-			upLabel = __( 'Move tab left' );
-			downLabel = __( 'Move tab right' );
-		}
-	} else {
-		upIcon = chevronUp;
-		downIcon = chevronDown;
-		upLabel = __( 'Move tab up' );
-		downLabel = __( 'Move tab down' );
-	}
-
-	// Handle moving tab and updating active index to follow the moved tab
-	const handleMoveUp = () => {
-		moveBlocksUp( [ tabClientId ], tabPanelClientId );
-		// Update editorActiveTabIndex to follow the moved tab
-		if ( tabsClientId ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( tabsClientId, {
-				editorActiveTabIndex: tabIndex - 1,
-			} );
-		}
-	};
-
-	const handleMoveDown = () => {
-		moveBlocksDown( [ tabClientId ], tabPanelClientId );
-		// Update editorActiveTabIndex to follow the moved tab
-		if ( tabsClientId ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( tabsClientId, {
-				editorActiveTabIndex: tabIndex + 1,
-			} );
-		}
-	};
-
-	// Don't render if only one tab
-	if ( tabsCount <= 1 ) {
-		return null;
-	}
-
-	return (
-		<BlockControls group="parent">
-			<ToolbarGroup
-				className={ clsx( 'block-editor-block-mover', {
-					'is-horizontal': isHorizontal,
-				} ) }
-			>
-				<div className="block-editor-block-mover__move-button-container">
-					<ToolbarItem>
-						{ ( itemProps ) => (
-							<Button
-								className={ clsx(
-									'block-editor-block-mover-button',
-									'is-up-button'
-								) }
-								icon={ upIcon }
-								label={ upLabel }
-								disabled={ isFirst }
-								accessibleWhenDisabled
-								onClick={ handleMoveUp }
-								__next40pxDefaultSize
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-					<ToolbarItem>
-						{ ( itemProps ) => (
-							<Button
-								className={ clsx(
-									'block-editor-block-mover-button',
-									'is-down-button'
-								) }
-								icon={ downIcon }
-								label={ downLabel }
-								disabled={ isLast }
-								accessibleWhenDisabled
-								onClick={ handleMoveDown }
-								__next40pxDefaultSize
-								{ ...itemProps }
-							/>
-						) }
-					</ToolbarItem>
-				</div>
-			</ToolbarGroup>
-		</BlockControls>
-	);
-}
-
-export default function Controls( {
-	tabsClientId,
-	tabClientId,
-	tabIndex,
-	tabsCount,
-	tabsMenuClientId,
-} ) {
+export default function Controls( { tabsClientId } ) {
 	return (
-		<>
-			<TabBlockMover
-				tabClientId={ tabClientId }
-				tabIndex={ tabIndex }
-				tabsCount={ tabsCount }
-				tabsMenuClientId={ tabsMenuClientId }
-				tabsClientId={ tabsClientId }
-			/>
+		<BlockControls>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-		</>
+		</BlockControls>
 	);
 }

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

@@ -13,132 +13,127 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import slugFromLabel from '../tab/slug-from-label';
 import Controls from './controls';
 
-export default function Edit( {
+const EMPTY_ARRAY = [];
+
+function Edit( {
+	attributes,
 	context,
 	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
-	// Context from tabs-menu (per-item context via BlockContextProvider)
-	const tabIndex = context[ 'core/tabs-menu-item-index' ] ?? 0;
-	const tabId = context[ 'core/tabs-menu-item-id' ] ?? '';
-	const tabLabel = context[ 'core/tabs-menu-item-label' ] ?? '';
-	const tabClientId = context[ 'core/tabs-menu-item-clientId' ] ?? '';
-
-	// Context from parent tabs block, memoized to prevent unnecessary re-renders.
-	const contextTabsList = context[ 'core/tabs-list' ];
-	const tabsList = useMemo(
-		() => contextTabsList || [],
-		[ contextTabsList ]
-	);
+	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 isActiveTab = tabIndex === effectiveActiveIndex;
-
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-
-	// Get parent tabs clientId for updating editorActiveTabIndex
-	const { tabsClientId, tabsMenuClientId, selectedTabClientId } = useSelect(
+	const { menuItemIndex, tabsClientId, selectedTabClientId } = useSelect(
 		( select ) => {
 			const {
+				getBlockOrder,
 				getBlockRootClientId,
 				getSelectedBlockClientIds,
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
-			// tabs-menu-item -> tabs-menu -> tabs
+
 			const _tabsMenuClientId = getBlockRootClientId( clientId );
 			const _tabsClientId = _tabsMenuClientId
 				? getBlockRootClientId( _tabsMenuClientId )
 				: null;
 
-			const selectedIds = getSelectedBlockClientIds();
+			const siblings = getBlockOrder( _tabsMenuClientId );
+			const _menuItemIndex = siblings.indexOf( clientId );
 
-			// Find if any tab is selected
-			let selectedTab = null;
+			// 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 )
 				) {
-					selectedTab = tab.clientId;
+					_selectedTabClientId = tab.clientId;
 					break;
 				}
 			}
 
 			return {
+				menuItemIndex: _menuItemIndex,
 				tabsClientId: _tabsClientId,
-				tabsMenuClientId: _tabsMenuClientId,
-				selectedTabClientId: selectedTab,
+				selectedTabClientId: _selectedTabClientId,
 			};
 		},
 		[ clientId, tabsList ]
 	);
 
-	const isSelectedTab = tabClientId === selectedTabClientId;
+	// 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 ] ||
+		{};
 
-	// Update tab label in the tab block
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	// tabListIndex is the tab's position in tabsList, used for active-state
+	// checks and click handling.
+	const tabListIndex = tab.index ?? menuItemIndex;
 
-	const handleLabelChange = useCallback(
-		( newLabel ) => {
-			if ( tabClientId ) {
-				updateBlockAttributes( tabClientId, {
-					label: newLabel,
-					anchor: slugFromLabel( newLabel, tabIndex ),
-				} );
-			}
-		},
-		[ updateBlockAttributes, tabClientId, tabIndex ]
-	);
+	const tabId = tab.id || `tab-${ menuItemIndex }`;
+	const tabClientId = tab.clientId || '';
+	const label = tab.label || '';
+
+	const isActive = tabListIndex === effectiveActiveIndex;
+	const isSelected = tabClientId === selectedTabClientId;
+
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
 
-	// Update editor active tab index on parent tabs block when tab is clicked
 	const handleTabClick = useCallback(
 		( event ) => {
 			event.preventDefault();
-
-			// Update the parent tabs block's editorActiveTabIndex (ephemeral, not persisted)
-			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+			if ( tabsClientId && tabListIndex !== effectiveActiveIndex ) {
 				__unstableMarkNextChangeAsNotPersistent();
 				updateBlockAttributes( tabsClientId, {
-					editorActiveTabIndex: tabIndex,
+					editorActiveTabIndex: tabListIndex,
 				} );
 			}
 		},
 		[
 			tabsClientId,
-			tabIndex,
+			tabListIndex,
 			effectiveActiveIndex,
 			updateBlockAttributes,
 			__unstableMarkNextChangeAsNotPersistent,
 		]
 	);
 
-	const tabPanelId = tabId || `tab-${ tabIndex }`;
-	const tabLabelId = `${ tabPanelId }--tab`;
+	const handleLabelChange = useCallback(
+		( newLabel ) => {
+			if ( tabClientId ) {
+				updateBlockAttributes( tabClientId, { label: newLabel } );
+			}
+		},
+		[ tabClientId, updateBlockAttributes ]
+	);
 
-	// Use blockProps for core style engine support
 	const blockProps = useBlockProps( {
 		className: clsx( layoutClassNames, {
-			'is-active': isActiveTab,
-			'is-selected': isSelectedTab,
+			'is-active': isActive,
+			'is-selected': isSelected,
 		} ),
-		'aria-controls': tabPanelId,
-		'aria-selected': isActiveTab,
-		id: tabLabelId,
+		'aria-controls': tabId,
+		'aria-selected': isActive,
+		id: `${ tabId }--tab`,
 		role: 'tab',
 		tabIndex: -1,
 		onClick: handleTabClick,
@@ -146,26 +141,22 @@ export default function Edit( {
 
 	return (
 		<>
-			<Controls
-				tabsClientId={ tabsClientId }
-				tabClientId={ tabClientId }
-				tabIndex={ tabIndex }
-				tabsCount={ tabsList.length }
-				tabsMenuClientId={ tabsMenuClientId }
-			/>
-			<div { ...blockProps }>
+			<Controls tabsClientId={ tabsClientId } />
+			<button { ...blockProps } type="button">
 				<RichText
 					tagName="span"
 					withoutInteractiveFormatting
 					placeholder={ sprintf(
 						/* translators: %d is the tab index + 1 */
 						__( 'Tab title %d' ),
-						tabIndex + 1
+						menuItemIndex + 1
 					) }
-					value={ tabLabel || '' }
+					value={ label }
 					onChange={ handleLabelChange }
 				/>
-			</div>
+			</button>
 		</>
 	);
 }
+
+export default Edit;

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

@@ -8,18 +8,19 @@
 /**
  * Render callback for core/tabs-menu-item.
  *
- * Applies IAPI directives and tab-specific attributes to the saved content.
+ * 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.
+ * @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 {
-	// Get tab-specific context
 	$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'] ?? '';
@@ -28,42 +29,29 @@ function block_core_tabs_menu_item_render_callback( array $attributes, string $c
 		$tab_id = 'tab-' . $tab_index;
 	}
 
-	// Process the content to add IAPI directives
+	// Add Interactivity API directives and tab-specific attributes to the button.
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 
 	if ( $tag_processor->next_tag() ) {
-		// Remove hidden attribute and template class (from save.js)
-		$tag_processor->remove_attribute( 'hidden' );
-
-		// Set tab-specific attributes
 		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
 		$tag_processor->set_attribute( 'aria-controls', $tab_id );
-
-		// Add IAPI directives
 		$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' );
-
-		// Add context for this specific tab item
 		$tag_processor->set_attribute(
 			'data-wp-context',
 			wp_json_encode( array( 'tabIndex' => $tab_index ) )
 		);
 	}
 
-	// Get updated HTML and inject the label
-	$output = $tag_processor->get_updated_html();
-
-	// The save.js outputs <button><span class="screen-reader-text">...</span></button>
-	// Replace the button content with the actual tab label
-	$output = preg_replace(
-		'/(<button[^>]*>).*?(<\/button>)/s',
-		'$1' . '<span>' . wp_kses_post( $tab_label ) . '</span>' . '$2',
-		$output
+	// 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
 	);
-
-	return $output;
 }
 
 /**

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

@@ -5,7 +5,6 @@ import { useBlockProps } from '@wordpress/block-editor';
 
 export default function save() {
 	const blockProps = useBlockProps.save( {
-		className: 'wp-block-tabs-menu-item__template',
 		type: 'button',
 		role: 'tab',
 	} );

package/src/template-part/edit/index.js

@@ -128,11 +128,13 @@ export default function TemplatePartEdit( {
 		onNavigateToEntityRecord,
 		title,
 		canUserEdit,
+		canUserEditBlock,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { getBlockCount, getSettings } = select( blockEditorStore );
+			const { getBlockCount, getSettings, canEditBlock } =
+				select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -170,6 +172,7 @@ export default function TemplatePartEdit( {
 					getSettings().onNavigateToEntityRecord,
 				title: entityRecord?.title,
 				canUserEdit: !! _canUserEdit,
+				canUserEditBlock: canEditBlock( clientId ),
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
@@ -284,6 +287,7 @@ export default function TemplatePartEdit( {
 						// Only enable for single selection that matches the current block.
 						// Ensures menu item doesn't render multiple times.
 						if (
+							! canUserEditBlock ||
 							! (
 								selectedClientIds.length === 1 &&
 								clientId === selectedClientIds[ 0 ]