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

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/utils/media-control.js

@@ -4,7 +4,7 @@
 import {
 	Button,
 	DropZone,
-	FlexItem,
+	FlexBlock,
 	Spinner,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
@@ -14,36 +14,62 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { reset as resetIcon } from '@wordpress/icons';
+import { getFilename } from '@wordpress/url';
+
+/**
+ * Focuses the toggle button.
+ *
+ * @param {Object} containerRef - ref object containing current element
+ */
+const focusToggleButton = ( containerRef ) => {
+	// Use requestAnimationFrame to ensure DOM updates are complete.
+	window.requestAnimationFrame( () => {
+		const [ toggleButton ] = focus.tabbable.find( containerRef?.current );
+		if ( ! toggleButton ) {
+			return;
+		}
+
+		toggleButton.focus();
+	} );
+};
 
 /**
  * MediaControlPreview - Preview component showing media thumbnail and filename
  *
  * @param {Object} props
  * @param {string} props.url            Media URL for thumbnail
- * @param {string} props.alt            Alt text for image
  * @param {string} props.filename       Filename to display
  * @param {Object} props.itemGroupProps Optional props to pass to ItemGroup
  * @param {string} props.className      Optional className for Truncate
+ * @param {string} props.label          Optional label for accessibility
  * @return {Element} Preview component
  */
 export function MediaControlPreview( {
 	url,
-	alt,
 	filename,
 	itemGroupProps,
 	className,
+	label,
 } ) {
 	return (
 		<ItemGroup { ...itemGroupProps } as="span">
-			<HStack justify="flex-start" as="span">
-				<img src={ url } alt={ alt } />
-				<FlexItem as="span">
+			<HStack justify="flex-start">
+				<span
+					className="block-library-utils__media-control__inspector-image-indicator"
+					style={ {
+						backgroundImage: url ? `url(${ url })` : undefined,
+					} }
+				/>
+				<FlexBlock>
 					<Truncate numberOfLines={ 1 } className={ className }>
-						{ filename }
+						{ filename ?? label }
 					</Truncate>
-				</FlexItem>
+				</FlexBlock>
 			</HStack>
 		</ItemGroup>
 	);
@@ -55,7 +81,6 @@ export function MediaControlPreview( {
  * @param {Object}   props
  * @param {number}   props.mediaId      Media attachment ID
  * @param {string}   props.mediaUrl     Media URL
- * @param {string}   props.alt          Alt text for preview
  * @param {string}   props.filename     Filename to display
  * @param {Array}    props.allowedTypes Allowed media types
  * @param {Function} props.onSelect     Callback when media selected
@@ -69,7 +94,6 @@ export function MediaControlPreview( {
 export function MediaControl( {
 	mediaId,
 	mediaUrl,
-	alt = '',
 	filename,
 	allowedTypes,
 	onSelect,
@@ -77,7 +101,7 @@ export function MediaControl( {
 	onError,
 	onReset,
 	isUploading = false,
-	emptyLabel = __( 'Add media' ),
+	emptyLabel = __( 'Media' ),
 } ) {
 	const { getSettings } = useSelect( blockEditorStore );
 	const onFilesDrop = ( filesList ) => {
@@ -95,10 +119,15 @@ export function MediaControl( {
 			multiple: false,
 		} );
 	};
+	const containerRef = useRef();
 
 	return (
-		<div className="block-library-utils__media-control">
+		<div
+			ref={ containerRef }
+			className="block-library-utils__media-control"
+		>
 			<MediaReplaceFlow
+				className="block-library-utils__media-control__replace-flow"
 				mediaId={ mediaId }
 				mediaURL={ mediaUrl }
 				allowedTypes={ allowedTypes }
@@ -106,15 +135,14 @@ export function MediaControl( {
 				onSelectURL={ onSelectURL }
 				onError={ onError }
 				name={
-					mediaUrl ? (
-						<MediaControlPreview
-							url={ mediaUrl }
-							alt={ alt }
-							filename={ filename }
-						/>
-					) : (
-						emptyLabel
-					)
+					<MediaControlPreview
+						url={ mediaUrl }
+						filename={ filename }
+						className="block-library-utils__media-control__inspector-media-replace-title"
+						label={
+							mediaUrl ? getFilename( filename ) : emptyLabel
+						}
+					/>
 				}
 				renderToggle={ ( props ) => (
 					<Button { ...props } __next40pxDefaultSize>
@@ -123,6 +151,18 @@ export function MediaControl( {
 				) }
 				onReset={ onReset }
 			/>
+			{ mediaUrl && onReset && (
+				<Button
+					label={ __( 'Reset' ) }
+					className="block-library-utils__media-control__reset"
+					size="small"
+					icon={ resetIcon }
+					onClick={ () => {
+						onReset();
+						focusToggleButton( containerRef );
+					} }
+				/>
+			) }
 			<DropZone onFilesDrop={ onFilesDrop } />
 		</div>
 	);