@wordpress/block-library 9.44.1-next.v.202604201441.0 → 9.45.0

package/src/tab-panel/edit.js

@@ -1,42 +1,145 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
+import Controls from './controls';
 
-const TAB_PANELS_TEMPLATE = [ [ 'core/tab', {} ] ];
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __( 'Type / to choose a block' ),
+		},
+	],
+];
 
-export default function Edit( { clientId } ) {
-	const blockProps = useBlockProps();
+const { cancelAnimationFrame } = window;
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TAB_PANELS_TEMPLATE,
-		templateLock: false,
-		renderAppender: false, // Appender handled by individual tab blocks
-	} );
+export default function Edit( { clientId, context, isSelected } ) {
+	const focusRef = useRef();
+
+	// Consume tab indices from context
+	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 { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockIndex,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
 
-	// Get the parent tabs block clientId
-	const tabsClientId = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockRootClientId( clientId ),
+			// Get the tab-panel parent first
+			const tabPanelsClientId = getBlockRootClientId( clientId );
+			// Then get the tabs parent
+			const _tabsClientId = getBlockRootClientId( tabPanelsClientId );
+
+			// Get data about this instance of core/tab.
+			const _blockIndex = getBlockIndex( clientId );
+			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+
+			return {
+				blockIndex: _blockIndex,
+				hasInnerBlocksSelected: _hasInnerBlocksSelected,
+				tabsClientId: _tabsClientId,
+			};
+		},
 		[ clientId ]
 	);
 
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		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 tab-list.
+		if ( isActiveTab ) {
+			return true;
+		}
+		return false;
+	}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );
+
+	const blockProps = useBlockProps( {
+		hidden: ! isSelectedTab,
+		tabIndex: isSelectedTab ? 0 : -1,
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+
 	return (
-		<>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<div { ...innerBlocksProps } />
-		</>
+		<section { ...innerBlocksProps }>
+			<Controls
+				tabsClientId={ tabsClientId }
+				blockIndex={ blockIndex }
+				isDefaultTab={ isDefaultTab }
+			/>
+			{ isSelectedTab && innerBlocksProps.children }
+		</section>
 	);
 }

package/src/tab-panel/index.js

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

package/src/tab-panel/index.php

@@ -0,0 +1,88 @@
+<?php
+/**
+ * Tab Panel Block
+ *
+ * @package WordPress
+ */
+
+/**
+ * Render callback for core/tab-panel.
+ *
+ * @since 7.0.0
+ *
+ * @param array     $attributes Block attributes.
+ * @param string    $content    Block content.
+ * @param \WP_Block $block      Block instance.
+ *
+ * @return string Updated HTML.
+ */
+function block_core_tab_panel_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-panel' ) );
+
+	// 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 );
+	}
+
+	/**
+	 * Add interactivity to the tab element.
+	 */
+	$tag_processor->set_attribute(
+		'data-wp-interactive',
+		'core/tabs/private'
+	);
+	$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-panel` block on the server.
+ *
+ * @hook init
+ *
+ * @since 7.0.0
+ */
+function register_block_core_tab_panel() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tab-panel',
+		array(
+			'render_callback' => 'block_core_tab_panel_render',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tab_panel' );

package/src/{tab → tab-panel}/remove-tab-toolbar-control.js

@@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
- * "Remove Tab" button in the block toolbar for the tab block.
- * Removes the currently active core/tab and its corresponding
- * core/tabs-menu-item, keeping both in sync.
+ * "Remove Tab" button in the block toolbar for the tabs block.
+ * Removes the currently active core/tab-panel and its corresponding
+ * core/tab, keeping both in sync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
@@ -27,16 +27,16 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 	} = useDispatch( blockEditorStore );
 
 	const {
+		activeTabPanelClientId,
 		activeTabClientId,
-		activeMenuItemClientId,
 		tabCount,
 		editorActiveTabIndex,
 	} = useSelect(
 		( select ) => {
 			if ( ! tabsClientId ) {
 				return {
+					activeTabPanelClientId: null,
 					activeTabClientId: null,
-					activeMenuItemClientId: null,
 					tabCount: 0,
 					editorActiveTabIndex: 0,
 				};
@@ -49,19 +49,20 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 				tabsAttributes?.activeTabIndex ??
 				0;
 			const innerBlocks = getBlocks( tabsClientId );
-			const tabPanel = innerBlocks.find(
-				( block ) => block.name === 'core/tab-panel'
+			const tabPanels = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
 			);
-			const tabsMenu = innerBlocks.find(
-				( block ) => block.name === 'core/tabs-menu'
+			const tabList = innerBlocks.find(
+				( block ) => block.name === 'core/tab-list'
 			);
-			const tabs = tabPanel?.innerBlocks || [];
-			const menuItems = tabsMenu?.innerBlocks || [];
+			const tabPanelBlocks = tabPanels?.innerBlocks || [];
+			const tabs = tabList?.innerBlocks || [];
+			const activeTabPanel = tabPanelBlocks[ activeIndex ];
 			const activeTab = tabs[ activeIndex ];
-			const activeMenuItem = menuItems[ activeIndex ];
+
 			return {
+				activeTabPanelClientId: activeTabPanel?.clientId || null,
 				activeTabClientId: activeTab?.clientId || null,
-				activeMenuItemClientId: activeMenuItem?.clientId || null,
 				tabCount: tabs.length,
 				editorActiveTabIndex: activeIndex,
 			};
@@ -70,7 +71,7 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 	);
 
 	const removeTab = () => {
-		if ( ! activeTabClientId || tabCount <= 1 ) {
+		if ( ! activeTabPanelClientId || tabCount <= 1 ) {
 			return;
 		}
 
@@ -85,10 +86,10 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 			editorActiveTabIndex: newActiveIndex,
 		} );
 
-		// Remove the tab content block and the corresponding menu item.
-		removeBlock( activeTabClientId, false );
-		if ( activeMenuItemClientId ) {
-			removeBlock( activeMenuItemClientId, false );
+		// Remove the tab panel and corresponding tab
+		removeBlock( activeTabPanelClientId, false );
+		if ( activeTabClientId ) {
+			removeBlock( activeTabClientId, false );
 		}
 
 		if ( tabsClientId ) {
@@ -96,7 +97,7 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 		}
 	};
 
-	const isDisabled = tabCount <= 1 || ! activeTabClientId;
+	const isDisabled = tabCount <= 1 || ! activeTabPanelClientId;
 
 	return (
 		<BlockControls group="other">

package/src/tab-panel/save.js

@@ -4,8 +4,10 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save() {
-	const blockProps = useBlockProps.save();
+	const blockProps = useBlockProps.save( {
+		role: 'tabpanel',
+	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return <div { ...innerBlocksProps } />;
+	return <section { ...innerBlocksProps } />;
 }

package/src/tab-panel/style.scss

@@ -1,4 +1,23 @@
 .wp-block-tab-panel {
+	max-width: 100%;
+	flex-basis: 100%;
 	flex-grow: 1;
-	min-width: 0;
+	box-sizing: border-box;
+
+	& > *:first-child {
+		margin-top: 0;
+	}
+	& > *:last-child {
+		margin-bottom: 0;
+	}
+
+	&[hidden],
+	&:empty {
+		display: none !important;
+	}
+}
+
+.wp-block-tab-panel.wp-block.has-background,
+.wp-block-tab-panel:not(.wp-block).has-background {
+	padding: var(--wp--preset--spacing--30);
 }

package/src/tab-panels/block.json

@@ -0,0 +1,66 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tab-panels",
+	"title": "Tab Panels",
+	"description": "Container for tab panel content in a tabbed interface.",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [ "core/tabs" ],
+	"allowedBlocks": [ "core/tab-panel" ],
+	"attributes": {},
+	"supports": {
+		"anchor": false,
+		"html": false,
+		"reusable": false,
+		"visibility": false,
+		"lock": false,
+		"dimensions": {
+			"aspectRatio": false,
+			"height": false,
+			"minHeight": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"text": true,
+			"heading": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"blockGap": false,
+			"padding": true,
+			"margin": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap",
+				"justifyContent": "stretch",
+				"orientation": "vertical"
+			},
+			"allowSwitching": false,
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowJustification": true,
+			"allowSizingOnChildren": false
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

package/src/tab-panels/edit.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
+
+const TAB_PANELS_TEMPLATE = [ [ 'core/tab-panel', {} ] ];
+
+export default function Edit( { clientId } ) {
+	const blockProps = useBlockProps();
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TAB_PANELS_TEMPLATE,
+		templateLock: false,
+		renderAppender: false, // Appender handled by individual tab blocks
+	} );
+
+	// Get the parent tabs block clientId
+	const tabsClientId = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockRootClientId( clientId ),
+		[ clientId ]
+	);
+
+	return (
+		<>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

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

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

package/src/tab-panels/save.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save() {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
+}

package/src/tab-panels/style.scss

@@ -0,0 +1,4 @@
+.wp-block-tab-panels {
+	flex-grow: 1;
+	min-width: 0;
+}

package/src/tabs/block.json

@@ -7,7 +7,7 @@
 	"description": "Display content in a tabbed interface to help users navigate detailed content with ease.",
 	"category": "design",
 	"textdomain": "default",
-	"allowedBlocks": [ "core/tabs-menu", "core/tab-panel" ],
+	"allowedBlocks": [ "core/tab-list", "core/tab-panels" ],
 	"attributes": {
 		"activeTabIndex": {
 			"type": "number",

package/src/tabs/controls.js

@@ -1,8 +1,8 @@
 /**
  * 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';
 
 export default function Controls( { clientId } ) {
 	return (

package/src/tabs/edit.js

@@ -15,32 +15,32 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Controls from './controls';
-import useTabMenuSync from './use-tab-menu-sync';
+import useTabListSync from './use-tab-list-sync';
 
 const EMPTY_ARRAY = [];
 
 const TABS_TEMPLATE = [
 	[
-		'core/tabs-menu',
+		'core/tab-list',
 		{},
 		[
-			[ 'core/tabs-menu-item', {} ],
-			[ 'core/tabs-menu-item', {} ],
+			[ 'core/tab', {} ],
+			[ 'core/tab', {} ],
 		],
 	],
 	[
-		'core/tab-panel',
+		'core/tab-panels',
 		{},
 		[
 			[
-				'core/tab',
+				'core/tab-panel',
 				{
 					label: __( 'Tab' ),
 				},
 				[ [ 'core/paragraph' ] ],
 			],
 			[
-				'core/tab',
+				'core/tab-panel',
 				{
 					label: __( 'Tab' ),
 				},
@@ -63,29 +63,34 @@ function Edit( { clientId, attributes, setAttributes } ) {
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
-	const { tabs, tabPanelClientId, menuItems, tabsMenuClientId } = useSelect(
+	const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
 
-			const tabPanel = innerBlocks.find(
-				( block ) => block.name === 'core/tab-panel'
+			const tabPanelBlocks = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
 			);
-			const tabsMenu = innerBlocks.find(
-				( block ) => block.name === 'core/tabs-menu'
+			const tabList = innerBlocks.find(
+				( block ) => block.name === 'core/tab-list'
 			);
 
 			return {
-				tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
-				tabPanelClientId: tabPanel?.clientId ?? null,
-				menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,
-				tabsMenuClientId: tabsMenu?.clientId ?? null,
+				tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
+				tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
+				tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+				tabListClientId: tabList?.clientId ?? null,
 			};
 		},
 		[ clientId ]
 	);
 
-	useTabMenuSync( { tabs, menuItems, tabPanelClientId, tabsMenuClientId } );
+	useTabListSync( {
+		tabPanels,
+		tabs,
+		tabPanelsClientId,
+		tabListClientId,
+	} );
 
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.
@@ -94,9 +99,9 @@ function Edit( { clientId, attributes, setAttributes } ) {
 		/**
 		 * Compute tabs list from innerblocks to provide via context.
 		 * This traverses the tab-panel block to find all tab blocks
-		 * and extracts their label and anchor for the tabs-menu to consume.
+		 * and extracts their label and anchor for the tab-list to consume.
 		 */
-		const tabList = tabs.map( ( tab, index ) => ( {
+		const tabList = tabPanels.map( ( tab, index ) => ( {
 			id: tab.attributes.anchor || `tab-${ index }`,
 			label: tab.attributes.label || '',
 			clientId: tab.clientId,
@@ -109,7 +114,7 @@ function Edit( { clientId, attributes, setAttributes } ) {
 			'core/tabs-activeTabIndex': activeTabIndex,
 			'core/tabs-editorActiveTabIndex': editorActiveTabIndex,
 		};
-	}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );
+	}, [ tabPanels, anchor, activeTabIndex, editorActiveTabIndex ] );
 
 	const blockProps = useBlockProps();