@wordpress/block-library 9.44.0 → 9.45.0

package/src/tab/edit.js

@@ -9,162 +9,133 @@ import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
-	useInnerBlocksProps,
 	store as blockEditorStore,
+	RichText,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useRef, useEffect } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Controls from './controls';
-import slugFromLabel from './slug-from-label';
 
-const TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			placeholder: __( 'Type / to choose a block' ),
-		},
-	],
-];
-
-const { cancelAnimationFrame } = window;
-
-export default function Edit( {
-	attributes,
-	clientId,
-	context,
-	isSelected,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
-	const focusRef = useRef();
+const EMPTY_ARRAY = [];
 
-	const { anchor, label } = attributes;
-
-	// Consume tab indices from context
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
+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 = editorActiveTabIndex ?? activeTabIndex;
 
-	// Clean up animation frames on unmount.
-	useEffect( () => {
-		return () => {
-			if ( focusRef.current ) {
-				cancelAnimationFrame( focusRef.current );
-			}
-		};
-	}, [] );
+	const effectiveActiveIndex = useMemo( () => {
+		return editorActiveTabIndex ?? activeTabIndex;
+	}, [ editorActiveTabIndex, activeTabIndex ] );
 
-	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
+	const { tabIndex, tabsClientId, selectedTabClientId } = useSelect(
 		( select ) => {
 			const {
+				getBlockOrder,
 				getBlockRootClientId,
-				getBlockIndex,
+				getSelectedBlockClientIds,
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 
-			// Get the tab-panel parent first
-			const tabPanelClientId = getBlockRootClientId( clientId );
-			// Then get the tabs parent
-			const _tabsClientId = getBlockRootClientId( tabPanelClientId );
-
-			// Get data about this instance of core/tab.
-			const _blockIndex = getBlockIndex( clientId );
-			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
-				clientId,
-				true
-			);
+			const _tabsListClientId = getBlockRootClientId( clientId );
+			const _tabsClientId = _tabsListClientId
+				? getBlockRootClientId( _tabsListClientId )
+				: null;
+
+			const siblings = getBlockOrder( _tabsListClientId );
+			const _tabIndex = 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 {
-				blockIndex: _blockIndex,
-				hasInnerBlocksSelected: _hasInnerBlocksSelected,
+				tabIndex: _tabIndex,
 				tabsClientId: _tabsClientId,
+				selectedTabClientId: _selectedTabClientId,
 			};
 		},
-		[ clientId ]
+		[ clientId, tabsList ]
 	);
 
-	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+	const tab = tabsList[ tabIndex ] || {};
+
+	// tabListIndex is the tab's position in tabsList, used for active-state
+	// checks and click handling.
+	const tabListIndex = tab.index ?? tabIndex;
+
+	const tabClientId = tab.clientId || '';
+	const label = tab.label || '';
+
+	const isActive = tabListIndex === effectiveActiveIndex;
+	const isSelected = tabClientId === selectedTabClientId;
+
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
 
-	// Sync editorActiveTabIndex when this tab is selected directly
-	useEffect( () => {
-		// Only update if this tab is selected and not already the active index
-		const isTabSelected = isSelected || hasInnerBlocksSelected;
-		if (
-			isTabSelected &&
-			tabsClientId &&
-			effectiveActiveIndex !== blockIndex
-		) {
-			// Mark as non-persistent so it doesn't add to undo history
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( tabsClientId, {
-				editorActiveTabIndex: blockIndex,
-			} );
-		}
-	}, [
-		isSelected,
-		hasInnerBlocksSelected,
-		tabsClientId,
-		effectiveActiveIndex,
-		blockIndex,
-		updateBlockAttributes,
-		__unstableMarkNextChangeAsNotPersistent,
-	] );
-
-	// Determine if this is the currently active tab (for editor visibility)
-	const isActiveTab = effectiveActiveIndex === blockIndex;
-
-	// Determine if this is the default tab (for the "Default Tab" toggle in controls)
-	const isDefaultTab = activeTabIndex === blockIndex;
-
-	/**
-	 * This hook determines if the current tab panel should be visible.
-	 * This is true if it is the editor active tab, or if it is selected directly.
-	 */
-	const isSelectedTab = useMemo( () => {
-		// Show if this tab is directly selected or has selected inner blocks
-		if ( isSelected || hasInnerBlocksSelected ) {
-			return true;
-		}
-		// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.
-		// This ensures the tab panel remains visible when editing labels in tabs-menu.
-		if ( isActiveTab ) {
-			return true;
-		}
-		return false;
-	}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );
-
-	// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.
-	const tabPanelId = useMemo(
-		() => anchor || slugFromLabel( label, blockIndex ),
-		[ anchor, label, blockIndex ]
+	const handleTabClick = useCallback(
+		( event ) => {
+			event.preventDefault();
+			if ( tabsClientId && tabListIndex !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: tabListIndex,
+				} );
+			}
+		},
+		[
+			tabsClientId,
+			tabListIndex,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
 	);
-	const tabLabelId = useMemo( () => `${ tabPanelId }--tab`, [ tabPanelId ] );
 
-	const blockProps = useBlockProps( {
-		hidden: ! isSelectedTab,
-		'aria-labelledby': tabLabelId,
-		id: tabPanelId,
-		role: 'tabpanel',
-		tabIndex: isSelectedTab ? 0 : -1,
-		className: clsx( 'wp-block-tab__editor-content', layoutClassNames ),
-	} );
+	const handleLabelChange = useCallback(
+		( newLabel ) => {
+			if ( tabClientId ) {
+				updateBlockAttributes( tabClientId, { label: newLabel } );
+			}
+		},
+		[ tabClientId, updateBlockAttributes ]
+	);
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			'is-active': isActive,
+			'is-selected': isSelected,
+		} ),
+		tabIndex: -1,
+		onClick: handleTabClick,
 	} );
 
 	return (
-		<section { ...innerBlocksProps }>
-			<Controls
-				tabsClientId={ tabsClientId }
-				blockIndex={ blockIndex }
-				isDefaultTab={ isDefaultTab }
-			/>
-			{ isSelectedTab && innerBlocksProps.children }
-		</section>
+		<>
+			<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 → tab}/editor.scss

@@ -1,14 +1,14 @@
-.wp-block-tabs-menu-item {
+.wp-block-tab {
 	&.is-selected {
 		outline-offset: 2px;
 	}
 }
 
-.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) {
+.block-editor-block-preview__live-content:has(.wp-block-tab) {
 	flex-basis: inherit !important;
 	flex-grow: inherit !important;
 
-	.wp-block-tabs-menu-item {
+	.wp-block-tab {
 		flex-basis: 100% !important;
 	}
 }

package/src/tab/index.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Tabs Block
+ * Tab Block
  *
  * @package WordPress
  */
@@ -8,81 +8,62 @@
 /**
  * Render callback for core/tab.
  *
+ * Injects the tab label and IAPI directives into the saved button HTML.
+ * Per-item context (index, id, label) is provided by the parent tab-list
+ * render callback before this is called.
+ *
  * @since 7.0.0
  *
  * @param array     $attributes Block attributes.
-* @param array     $attributes Block attributes.
-* @param string    $content    Block content.
-* @param \WP_Block $block      Block instance.
+ * @param string    $content    Block content (styled button from save.js).
+ * @param \WP_Block $block      WP_Block instance.
  *
  * @return string Updated HTML.
  */
-function block_core_tab_render( array $attributes, string $content, \WP_Block $block ): string {
-	$tabs_id = $block->context['core/tabs-id'] ?? '';
-
-	static $tab_counters = array();
+function block_core_tab_render_callback( array $attributes, string $content, \WP_Block $block ): string {
+	$tab_index = $block->context['core/tab-index'] ?? 0;
+	$tab_id    = $block->context['core/tab-id'] ?? '';
+	$tab_label = $block->context['core/tab-label'] ?? '';
 
-	if ( ! isset( $tab_counters[ $tabs_id ] ) ) {
-		$tab_counters[ $tabs_id ] = 0;
+	if ( empty( $tab_id ) ) {
+		$tab_id = 'tab-' . $tab_index;
 	}
 
-	$tab_index = $tab_counters[ $tabs_id ];
-	++$tab_counters[ $tabs_id ];
-
+	// Add Interactivity API directives and tab-specific attributes to the button.
 	$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 ( empty( $tab_id ) ) {
-		$tab_id = ! empty( $tabs_id )
-			? $tabs_id . '-tab-' . $tab_index
-			: 'tab-' . $tab_index;
-		$tag_processor->set_attribute( 'id', $tab_id );
+	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 ) )
+		);
 	}
 
-	/**
-	 * Add interactivity to the tab element.
-	 */
-	$tag_processor->set_attribute(
-		'data-wp-interactive',
-		'core/tabs/private'
+	// 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
 	);
-	$tag_processor->set_attribute(
-		'data-wp-context',
-		wp_json_encode(
-			array(
-				'tab' => array(
-					'id' => $tab_id,
-				),
-			)
-		)
-	);
-
-	/**
-	 * Process accessibility and interactivity attributes.
-	 */
-	$tag_processor->set_attribute( 'role', 'tabpanel' );
-	$tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id );
-	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
-	$tag_processor->set_attribute( 'tabindex', 0 );
-
-	return (string) $tag_processor->get_updated_html();
 }
 
 /**
  * Registers the `core/tab` block on the server.
  *
- * @hook init
- *
  * @since 7.0.0
  */
 function register_block_core_tab() {
 	register_block_type_from_metadata(
 		__DIR__ . '/tab',
 		array(
-			'render_callback' => 'block_core_tab_render',
+			'render_callback' => 'block_core_tab_render_callback',
 		)
 	);
 }

package/src/tab/save.js

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

package/src/tab/style.scss

@@ -1,23 +1,40 @@
 .wp-block-tab {
-	max-width: 100%;
-	flex-basis: 100%;
-	flex-grow: 1;
 	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;
 
-	& > *:first-child {
-		margin-top: 0;
-	}
-	& > *:last-child {
-		margin-bottom: 0;
-	}
+	// Button reset
+	border: none;
+	background: none;
+	appearance: none;
+	-webkit-appearance: none;
 
-	&[hidden],
-	&:empty {
-		display: none !important;
-	}
-}
+	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;
 
-.wp-block-tab.wp-block.has-background,
-.wp-block-tab:not(.wp-block).has-background {
-	padding: var(--wp--preset--spacing--30);
+	&[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/tabs-menu → src/tab-list}/block.json

@@ -2,19 +2,19 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"__experimental": true,
 	"apiVersion": 3,
-	"name": "core/tabs-menu",
-	"title": "Tabs Menu",
+	"name": "core/tab-list",
+	"title": "Tab List",
 	"description": "Display the tab buttons for a tabbed interface.",
-	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
-	"allowedBlocks": [ "core/tabs-menu-item" ],
+	"allowedBlocks": [ "core/tab" ],
 	"usesContext": [ "core/tabs-list" ],
 	"attributes": {},
 	"supports": {
 		"html": false,
 		"reusable": false,
+		"visibility": false,
 		"lock": false,
 		"dimensions": {
 			"aspectRatio": false,

package/src/{tabs-menu → tab-list}/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -16,26 +11,22 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
+import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
-function Edit( { clientId, __unstableLayoutClassNames: layoutClassNames } ) {
-	const { tabsClientId } = useSelect(
-		( select ) => ( {
-			tabsClientId:
-				select( blockEditorStore ).getBlockRootClientId( clientId ),
-		} ),
+function Edit( { clientId } ) {
+	const tabsClientId = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockRootClientId( clientId ),
 		[ clientId ]
 	);
 
-	const blockProps = useBlockProps( {
-		className: clsx( layoutClassNames ),
-		role: 'tablist',
-	} );
+	const blockProps = useBlockProps();
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/tabs-menu-item' ],
+		allowedBlocks: [ 'core/tab' ],
 		orientation: 'horizontal',
+		templateLock: false,
 		renderAppender: false,
 	} );
 

package/src/{tabs-menu → tab-list}/editor.scss

@@ -1,10 +1,10 @@
-.wp-block-tabs-menu {
+.wp-block-tab-list {
 	// 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) {
+	.block-editor-block-list__block:has(> .wp-block-tab) {
 		display: contents;
 	}
 }

package/src/{tabs-menu → tab-list}/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { tabsMenu as icon } from '@wordpress/icons';
+import { tabList as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/tab-list/index.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Tab List Block
+ *
+ * @package WordPress
+ */
+
+/**
+ * Render callback for core/tab-list.
+ *
+ * Re-renders each tab inner block with per-item context (index, id,
+ * label) injected from the tabs-list, so the tab 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_tab_list_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 tab with per-item context (index, id, label).
+	// Match by position so items align with their corresponding tabs.
+	$buttons_html = '';
+	$tab_position = 0;
+
+	foreach ( $block->parsed_block['innerBlocks'] ?? array() as $parsed_tab ) {
+		if ( 'core/tab' !== ( $parsed_tab['blockName'] ?? '' ) ) {
+			continue;
+		}
+
+		$tab       = $tabs_list[ $tab_position ] ?? null;
+		$tab_index = $tab_position;
+		++$tab_position;
+
+		// Skip tabs with no matching tab panel.
+		if ( null === $tab ) {
+			continue;
+		}
+
+		$item_context = array_merge(
+			$block->context,
+			array(
+				'core/tab-index' => $tab_index,
+				'core/tab-id'    => $tab['id'] ?? '',
+				'core/tab-label' => $tab['label'] ?? '',
+			)
+		);
+
+		$tab_block     = new WP_Block( $parsed_tab, $item_context );
+		$buttons_html .= $tab_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/tab-list` block on the server.
+ *
+ * @since 7.0.0
+ */
+function register_block_core_tab_list() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tab-list',
+		array(
+			'render_callback' => 'block_core_tab_list_render_callback',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tab_list' );