Tabs: RichText handlers for adding/removing tabs

packages/block-library/src/tab-list/edit.js

@@ -21,7 +21,8 @@ import { useEffect, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import TabToolbarControls from '../tab-panel/tab-toolbar-controls';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
+import useTabActions from '../tabs/use-tab-actions';
 
 const EMPTY_ARRAY = [];
 
@@ -55,12 +56,12 @@ function Edit( {
 		},
 		[ clientId ]
 	);
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { insertTab, removeTab } = useTabActions( tabsClientId );
 
 	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
-
 	function selectTabPanel( tabIndex ) {
 		if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
 			__unstableMarkNextChangeAsNotPersistent();
@@ -154,6 +155,10 @@ function Edit( {
 								onChange={ ( newLabel ) =>
 									handleLabelChange( index, newLabel )
 								}
+								__unstableOnSplitAtEnd={ () =>
+									insertTab( index + 1 )
+								}
+								onRemove={ () => removeTab( index ) }
 							/>
 						</button>
 					);

packages/block-library/src/tab-panel/controls.js

@@ -16,7 +16,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import TabToolbarControls from './tab-toolbar-controls';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {

packages/block-library/src/tab-panels/edit.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import TabToolbarControls from '../tab-panel/tab-toolbar-controls';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
 
 /**
  * Initial template applied only when the block is first inserted (i.e. when

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

@@ -13,7 +13,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import TabToolbarControls from '../tab-panel/tab-toolbar-controls';
+import TabToolbarControls from './tab-toolbar-controls';
 import useTabListItemsSync from './use-tab-list-items-sync';
 
 const EMPTY_ARRAY = [];

packages/block-library/src/tabs/tab-toolbar-controls.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useTabActions from './use-tab-actions';
+
+/**
+ * "Add tab" and "Remove tab" buttons in the block toolbar for the tabs block.
+ * Inserts or removes a core/tab-panel. The tab-list items attribute is kept
+ * in sync automatically via useTabListItemsSync.
+ *
+ * @param {Object} props
+ * @param {string} props.tabsClientId The client ID of the parent tabs block.
+ * @return {React.JSX.Element} The toolbar control element.
+ */
+export default function TabToolbarControls( { tabsClientId } ) {
+	const { insertTab, removeTab } = useTabActions( tabsClientId );
+	const isRemoveDisabled = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return true;
+			}
+			const tabPanels = select( blockEditorStore )
+				.getBlocks( tabsClientId )
+				.find( ( block ) => block.name === 'core/tab-panels' );
+			return ( tabPanels?.innerBlocks.length ?? 0 ) <= 1;
+		},
+		[ tabsClientId ]
+	);
+
+	return (
+		<BlockControls group="other">
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control"
+					onClick={ () => insertTab() }
+					text={ __( 'Add tab' ) }
+				/>
+				<ToolbarButton
+					className="components-toolbar__control"
+					onClick={ () => removeTab() }
+					text={ __( 'Remove tab' ) }
+					disabled={ isRemoveDisabled }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

packages/block-library/src/tabs/use-tab-actions.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch, useRegistry } from '@wordpress/data';
+
+/**
+ * Provides callbacks to insert and remove tabs for a tabs block.
+ *
+ * The hook intentionally avoids subscribing to the store: all data is derived
+ * lazily inside the callbacks via `registry.select`, so consumers don't
+ * re-render when the tab structure changes.
+ *
+ * @param {string|null} tabsClientId The client ID of the parent tabs block.
+ * @return {{ insertTab: Function, removeTab: Function }} Tab action callbacks.
+ */
+export default function useTabActions( tabsClientId ) {
+	const registry = useRegistry();
+	const {
+		insertBlock,
+		removeBlock,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	// Derive the current tabs state at call time without subscribing.
+	const getTabsState = () => {
+		const { getBlocks, getBlockAttributes } =
+			registry.select( blockEditorStore );
+
+		const tabsAttributes = tabsClientId
+			? getBlockAttributes( tabsClientId )
+			: undefined;
+		const tabPanels = tabsClientId
+			? getBlocks( tabsClientId ).find(
+					( block ) => block.name === 'core/tab-panels'
+			  )
+			: undefined;
+
+		return {
+			tabPanelsClientId: tabPanels?.clientId ?? null,
+			tabPanelBlocks: tabPanels?.innerBlocks ?? [],
+			activeIndex:
+				tabsAttributes?.editorActiveTabIndex ??
+				tabsAttributes?.activeTabIndex ??
+				0,
+		};
+	};
+
+	// Insert a new tab and make it active. Defaults to appending at the end.
+	const insertTab = ( atIndex ) => {
+		const { tabPanelsClientId, tabPanelBlocks } = getTabsState();
+		if ( ! tabPanelsClientId ) {
+			return;
+		}
+
+		const newIndex = atIndex ?? tabPanelBlocks.length;
+		insertBlock(
+			createBlock( 'core/tab-panel', { label: __( 'Tab' ) } ),
+			newIndex,
+			tabPanelsClientId,
+			false
+		);
+
+		// Switch editor active tab to the new tab.
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newIndex,
+		} );
+	};
+
+	// Remove a tab and move the active tab to an adjacent one. Defaults to the
+	// currently active tab.
+	const removeTab = ( atIndex ) => {
+		const { tabPanelBlocks, activeIndex } = getTabsState();
+		const tabCount = tabPanelBlocks.length;
+		if ( tabCount <= 1 ) {
+			return;
+		}
+
+		const removeIndex = atIndex ?? activeIndex;
+		const target = tabPanelBlocks[ removeIndex ];
+		if ( ! target ) {
+			return;
+		}
+
+		// Calculate new active index after removal.
+		const newActiveIndex =
+			removeIndex >= tabCount - 1 ? tabCount - 2 : removeIndex;
+
+		// Switch editor to the adjacent tab and remove the current one.
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newActiveIndex,
+		} );
+		removeBlock( target.clientId, false );
+	};
+
+	return { insertTab, removeTab };
+}