Tabs: Handle duplicating tabs

packages/block-library/src/tabs/edit.js

@@ -7,14 +7,15 @@ 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 = [];
 
@@ -67,9 +68,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 );
@@ -85,114 +84,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.