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

package/src/tab/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -19,7 +14,6 @@ import { useMemo, useRef, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import Controls from './controls';
-import slugFromLabel from './slug-from-label';
 
 const TEMPLATE = [
 	[
@@ -32,19 +26,11 @@ const TEMPLATE = [
 
 const { cancelAnimationFrame } = window;
 
-export default function Edit( {
-	attributes,
-	clientId,
-	context,
-	isSelected,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
+export default function Edit( { clientId, context, isSelected } ) {
 	const focusRef = useRef();
 
-	const { anchor, label } = attributes;
-
 	// Consume tab indices from context
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
+	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
 	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
 	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
@@ -137,20 +123,9 @@ export default function Edit( {
 		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 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 innerBlocksProps = useInnerBlocksProps( blockProps, {

package/src/tab-panel/block.json

@@ -5,7 +5,6 @@
 	"name": "core/tab-panel",
 	"title": "Tab Panel",
 	"description": "Container for tab panel content in a tabbed interface.",
-	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
@@ -15,6 +14,7 @@
 		"anchor": false,
 		"html": false,
 		"reusable": false,
+		"visibility": false,
 		"lock": false,
 		"dimensions": {
 			"aspectRatio": false,

package/src/tab-panel/edit.js

@@ -27,10 +27,8 @@ export default function Edit( { clientId } ) {
 
 	// Get the parent tabs block clientId
 	const tabsClientId = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-			return getBlockRootClientId( clientId );
-		},
+		( select ) =>
+			select( blockEditorStore ).getBlockRootClientId( clientId ),
 		[ clientId ]
 	);
 

package/src/tabs/block.json

@@ -5,7 +5,6 @@
 	"name": "core/tabs",
 	"title": "Tabs",
 	"description": "Display content in a tabbed interface to help users navigate detailed content with ease.",
-	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
 	"allowedBlocks": [ "core/tabs-menu", "core/tab-panel" ],

package/src/tabs/edit.js

@@ -7,25 +7,22 @@ import {
 	BlockContextProvider,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Controls from './controls';
+import useTabMenuSync from './use-tab-menu-sync';
 
 const EMPTY_ARRAY = [];
 
 const TABS_TEMPLATE = [
 	[
 		'core/tabs-menu',
-		{
-			lock: {
-				remove: true,
-			},
-		},
+		{},
 		[
 			[ 'core/tabs-menu-item', {} ],
 			[ 'core/tabs-menu-item', {} ],
@@ -33,11 +30,7 @@ const TABS_TEMPLATE = [
 	],
 	[
 		'core/tab-panel',
-		{
-			lock: {
-				remove: true,
-			},
-		},
+		{},
 		[
 			[
 				'core/tab',
@@ -57,12 +50,7 @@ const TABS_TEMPLATE = [
 	],
 ];
 
-function Edit( {
-	clientId,
-	attributes,
-	setAttributes,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
+function Edit( { clientId, attributes, setAttributes } ) {
 	const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
 
 	/**
@@ -75,9 +63,7 @@ function Edit( {
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
-	const { removeBlock, replaceInnerBlocks } = useDispatch( blockEditorStore );
-
-	const { tabs, tabPanelClientId, menuItems } = useSelect(
+	const { tabs, tabPanelClientId, menuItems, tabsMenuClientId } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
@@ -93,114 +79,13 @@ function Edit( {
 				tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
 				tabPanelClientId: tabPanel?.clientId ?? null,
 				menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,
+				tabsMenuClientId: tabsMenu?.clientId ?? null,
 			};
 		},
 		[ clientId ]
 	);
 
-	/**
-	 * Keep tabs and menu items in sync when either is deleted directly (e.g.
-	 * via the Backspace key or List View).
-	 *
-	 * TODO: This effect only handles deletions. The two lists can get out of
-	 * sync in other cases: if a user pastes a core/tab block into the tab-panel
-	 * (or duplicates one), no corresponding tabs-menu-item is created; if a
-	 * user drags and drops a tabs-menu-item, the tab panel is not copied with
-	 * it. We should extend this effect to handle insertions, detecting when
-	 * tabs.length > menuItems.length and inserting the missing menu
-	 * item(s) at the correct index.
-	 */
-	const prevSyncStateRef = useRef( null );
-	useEffect( () => {
-		const currentTabs = tabs.map( ( tab ) => ( {
-			clientId: tab.clientId,
-		} ) );
-
-		if ( prevSyncStateRef.current === null ) {
-			prevSyncStateRef.current = {
-				tabs: currentTabs,
-				menuItems: [ ...menuItems ],
-			};
-			return;
-		}
-
-		const { tabs: prevTabs, menuItems: prevMenuItems } =
-			prevSyncStateRef.current;
-
-		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
-		// so the next effect invocation sees a stable baseline.
-		prevSyncStateRef.current = {
-			tabs: currentTabs,
-			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 ) ||
-			( tabsRemoved && menuItemsRemoved )
-		) {
-			return;
-		}
-
-		const currentTabIds = new Set( currentTabs.map( ( t ) => t.clientId ) );
-		const currentMenuItemIds = new Set(
-			menuItems.map( ( m ) => m.clientId )
-		);
-
-		if ( tabsRemoved ) {
-			// 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 {
-			// 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, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks ] );
+	useTabMenuSync( { tabs, menuItems, tabPanelClientId, tabsMenuClientId } );
 
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.
@@ -226,20 +111,12 @@ function Edit( {
 		};
 	}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );
 
-	/**
-	 * Block props for the tabs container.
-	 */
-	const blockProps = useBlockProps( {
-		className: layoutClassNames,
-	} );
+	const blockProps = useBlockProps();
 
-	/**
-	 * Innerblocks props for the tabs container.
-	 */
 	const innerBlockProps = useInnerBlocksProps( blockProps, {
 		__experimentalCaptureToolbars: true,
 		template: TABS_TEMPLATE,
-		templateLock: false,
+		templateLock: 'all',
 		renderAppender: false,
 	} );
 

package/src/tabs/style.scss

@@ -1,6 +1,3 @@
 .wp-block-tabs {
 	box-sizing: border-box;
-	.wp-block-tabs__title {
-		display: none;
-	}
 }

package/src/tabs/use-tab-menu-sync.js

@@ -0,0 +1,239 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Keep tabs and menu items in sync when the lists change due to direct
+ * user actions (deletion, paste, duplicate, drag-and-drop).
+ *
+ * Deletion: when one side shrinks, remove the counterpart at the same index.
+ * Insertion: when one side grows without the other, insert the missing
+ * counterpart at the matching index.
+ *
+ * When both lists change simultaneously (e.g. the "Add Tab" toolbar button,
+ * which inserts both at once), no action is needed and the effect exits early.
+ *
+ * @param {Object}      props
+ * @param {Array}       props.tabs             Raw core/tab block objects.
+ * @param {Array}       props.menuItems        Raw core/tabs-menu-item block objects.
+ * @param {string|null} props.tabPanelClientId Client ID of the core/tab-panel block.
+ * @param {string|null} props.tabsMenuClientId Client ID of the core/tabs-menu block.
+ */
+export default function useTabMenuSync( {
+	tabs,
+	menuItems,
+	tabPanelClientId,
+	tabsMenuClientId,
+} ) {
+	const {
+		removeBlock,
+		insertBlocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const prevSyncStateRef = useRef( null );
+	useEffect( () => {
+		if ( prevSyncStateRef.current === null ) {
+			prevSyncStateRef.current = {
+				tabs: [ ...tabs ],
+				menuItems: [ ...menuItems ],
+			};
+			return;
+		}
+
+		const { tabs: prevTabs, menuItems: prevMenuItems } =
+			prevSyncStateRef.current;
+
+		const tabCountChange = tabs.length - prevTabs.length;
+		const menuItemCountChange = menuItems.length - prevMenuItems.length;
+
+		const tabsInserted = tabCountChange > 0;
+		const menuItemsInserted = menuItemCountChange > 0;
+
+		// Both sides changed by the same amount.
+		// Covers: no-op re-renders, "Add Tab" toolbar, and toolbar-remove.
+		// Also handles drag-and-drop reordering of menu items.
+		if ( tabCountChange === menuItemCountChange ) {
+			// When lengths are equal but order changed, the user reordered menu
+			// items via drag-and-drop. Reorder the tab content blocks to match.
+			if (
+				tabCountChange === 0 &&
+				tabPanelClientId &&
+				menuItems.some(
+					( m, i ) => m.clientId !== prevMenuItems[ i ]?.clientId
+				)
+			) {
+				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 ) {
+					__unstableMarkNextChangeAsNotPersistent();
+					replaceInnerBlocks(
+						tabPanelClientId,
+						reorderedTabs,
+						false
+					);
+				}
+			}
+			prevSyncStateRef.current = {
+				tabs: [ ...tabs ],
+				menuItems: [ ...menuItems ],
+			};
+			return;
+		}
+
+		// Both sides changed in the same direction but by different amounts.
+		// Bail without making a partial fix.
+		if (
+			( tabCountChange > 0 && menuItemCountChange > 0 ) ||
+			( tabCountChange < 0 && menuItemCountChange < 0 )
+		) {
+			prevSyncStateRef.current = {
+				tabs: [ ...tabs ],
+				menuItems: [ ...menuItems ],
+			};
+			return;
+		}
+
+		// If the required container block isn't available yet, bail without
+		// updating the snapshot so the next render re-evaluates the same count change.
+		if ( tabsInserted && ! tabsMenuClientId ) {
+			return;
+		}
+		if ( menuItemsInserted && ! tabPanelClientId ) {
+			return;
+		}
+
+		// Update snapshot to the current state.
+		prevSyncStateRef.current = {
+			tabs: [ ...tabs ],
+			menuItems: [ ...menuItems ],
+		};
+
+		const currentTabIds = new Set( tabs.map( ( t ) => t.clientId ) );
+		const currentMenuItemIds = new Set(
+			menuItems.map( ( m ) => m.clientId )
+		);
+
+		if ( tabCountChange < 0 ) {
+			// Remove the menu item at the same position as each deleted tab.
+			const removedIndices = prevTabs
+				.map( ( t, i ) =>
+					! currentTabIds.has( t.clientId ) ? i : -1
+				)
+				.filter( ( i ) => i !== -1 );
+			const removedSet = new Set( removedIndices );
+			removedIndices.forEach( ( removedIndex ) => {
+				if ( menuItems[ removedIndex ] ) {
+					__unstableMarkNextChangeAsNotPersistent();
+					removeBlock( menuItems[ removedIndex ].clientId, false );
+				}
+			} );
+			prevSyncStateRef.current.menuItems =
+				prevSyncStateRef.current.menuItems.filter(
+					( _, i ) => ! removedSet.has( i )
+				);
+		} else if ( menuItemCountChange < 0 ) {
+			// Remove the tab at the same position as each deleted menu item.
+			const removedIndices = prevMenuItems
+				.map( ( m, i ) =>
+					! currentMenuItemIds.has( m.clientId ) ? i : -1
+				)
+				.filter( ( i ) => i !== -1 );
+			const removedSet = new Set( removedIndices );
+			removedIndices.forEach( ( removedIndex ) => {
+				if ( tabs[ removedIndex ] ) {
+					__unstableMarkNextChangeAsNotPersistent();
+					removeBlock( tabs[ removedIndex ].clientId, false );
+				}
+			} );
+			prevSyncStateRef.current.tabs =
+				prevSyncStateRef.current.tabs.filter(
+					( _, i ) => ! removedSet.has( i )
+				);
+		} else if ( tabsInserted ) {
+			// A tab was pasted or duplicated — insert matching menu items.
+			const prevTabIds = new Set( prevTabs.map( ( t ) => t.clientId ) );
+			const newMenuItems = tabs
+				.map( ( tab, tabIndex ) =>
+					! prevTabIds.has( tab.clientId )
+						? {
+								tabIndex,
+								block: createBlock( 'core/tabs-menu-item', {} ),
+						  }
+						: null
+				)
+				.filter( Boolean );
+
+			if ( newMenuItems.length > 0 ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				insertBlocks(
+					newMenuItems.map( ( { block } ) => block ),
+					newMenuItems[ 0 ].tabIndex,
+					tabsMenuClientId,
+					false
+				);
+				newMenuItems.forEach( ( { tabIndex, block } ) => {
+					prevSyncStateRef.current.menuItems.splice( tabIndex, 0, {
+						clientId: block.clientId,
+					} );
+				} );
+			}
+		} else if ( menuItemsInserted ) {
+			// A menu item was pasted or duplicated — insert matching tabs,
+			// copying the label from the adjacent tab.
+			const prevMenuItemIds = new Set(
+				prevMenuItems.map( ( m ) => m.clientId )
+			);
+			const newTabs = menuItems
+				.map( ( menuItem, menuItemIndex ) => {
+					if ( prevMenuItemIds.has( menuItem.clientId ) ) {
+						return null;
+					}
+					const label =
+						tabs[ menuItemIndex - 1 ]?.attributes?.label ??
+						tabs[ menuItemIndex ]?.attributes?.label ??
+						'';
+					return {
+						menuItemIndex,
+						block: createBlock( 'core/tab', { label } ),
+					};
+				} )
+				.filter( Boolean );
+
+			if ( newTabs.length > 0 ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				insertBlocks(
+					newTabs.map( ( { block } ) => block ),
+					newTabs[ 0 ].menuItemIndex,
+					tabPanelClientId,
+					false
+				);
+				newTabs.forEach( ( { menuItemIndex, block } ) => {
+					prevSyncStateRef.current.tabs.splice( menuItemIndex, 0, {
+						clientId: block.clientId,
+					} );
+				} );
+			}
+		}
+	}, [
+		tabs,
+		menuItems,
+		removeBlock,
+		insertBlocks,
+		replaceInnerBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+		tabsMenuClientId,
+		tabPanelClientId,
+	] );
+}

package/src/tabs-menu/block.json

@@ -5,7 +5,6 @@
 	"name": "core/tabs-menu",
 	"title": "Tabs Menu",
 	"description": "Display the tab buttons for a tabbed interface.",
-	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
@@ -15,6 +14,7 @@
 	"supports": {
 		"html": false,
 		"reusable": false,
+		"visibility": false,
 		"lock": false,
 		"dimensions": {
 			"aspectRatio": false,

package/src/tabs-menu/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -19,23 +14,19 @@ import { useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab/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' ],
 		orientation: 'horizontal',
+		templateLock: false,
 		renderAppender: false,
 	} );
 

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

@@ -5,7 +5,6 @@
 	"name": "core/tabs-menu-item",
 	"title": "Tab Menu Item",
 	"description": "A single tab button in the tabs menu.",
-	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs-menu" ],
@@ -20,6 +19,7 @@
 	"supports": {
 		"html": false,
 		"reusable": false,
+		"visibility": false,
 		"lock": false,
 		"color": {
 			"background": true,
@@ -48,9 +48,6 @@
 			"color": true,
 			"width": true,
 			"style": true
-		},
-		"layout": {
-			"allowEditing": false
 		}
 	},
 	"editorScript": "file:./index.js",

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

@@ -22,13 +22,9 @@ import Controls from './controls';
 
 const EMPTY_ARRAY = [];
 
-function Edit( {
-	context,
-	clientId,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
+function Edit( { context, clientId } ) {
 	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
+	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
 	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
 
 	const effectiveActiveIndex = useMemo( () => {
@@ -80,7 +76,6 @@ function Edit( {
 	// checks and click handling.
 	const tabListIndex = tab.index ?? menuItemIndex;
 
-	const tabId = tab.id || `tab-${ menuItemIndex }`;
 	const tabClientId = tab.clientId || '';
 	const label = tab.label || '';
 
@@ -119,14 +114,10 @@ function Edit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: clsx( layoutClassNames, {
+		className: clsx( {
 			'is-active': isActive,
 			'is-selected': isSelected,
 		} ),
-		'aria-controls': tabId,
-		'aria-selected': isActive,
-		id: `${ tabId }--tab`,
-		role: 'tab',
 		tabIndex: -1,
 		onClick: handleTabClick,
 	} );