Tab List: Add toolbar buttons to reorder tabs

packages/block-library/src/editor.scss

@@ -48,6 +48,7 @@
 @use "./social-link/editor.scss" as *;
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
+@use "./tab-list/editor.scss" as *;
 @use "./table/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;

packages/block-library/src/tab-list/block.json

@@ -77,5 +77,6 @@
 			"padding": ".wp-block-tab-list button"
 		}
 	},
-	"style": "wp-block-tab-list"
+	"style": "wp-block-tab-list",
+	"editorStyle": "wp-block-tab-list-editor"
 }

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

@@ -28,6 +28,7 @@ import { useEffect, useMemo, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import TabToolbarControls from '../tabs/tab-toolbar-controls';
+import TabMovers from './tab-movers';
 import useTabActions from '../tabs/use-tab-actions';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
@@ -199,6 +200,7 @@ function Edit( {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<TabMovers tabsClientId={ tabsClientId } />
 			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<div { ...blockProps }>
 				{ tabsList.map( ( tab, index ) => {

packages/block-library/src/tab-list/editor.scss

@@ -0,0 +1,9 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.wp-block-tab-list__mover-button {
+	@include break-small() {
+		width: $button-size-small;
+		min-width: 0 !important;
+	}
+}

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

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useTabActions from '../tabs/use-tab-actions';
+
+/**
+ * Block toolbar buttons that reorder the active tab one position left or right.
+ * Reordering acts on the underlying core/tab-panel blocks; the tab-list labels
+ * follow their panel automatically via useTabListItemsSync. The buttons are
+ * disabled at the first/last position.
+ *
+ * @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 TabMovers( { tabsClientId } ) {
+	const { moveTab } = useTabActions( tabsClientId );
+	const { tabCount, activeIndex } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return { tabCount: 0, activeIndex: 0 };
+			}
+			const { getBlocks, getBlockAttributes } =
+				select( blockEditorStore );
+			const tabsAttributes = getBlockAttributes( tabsClientId );
+			const tabPanels = getBlocks( tabsClientId ).find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			return {
+				tabCount: tabPanels?.innerBlocks.length ?? 0,
+				activeIndex:
+					tabsAttributes?.editorActiveTabIndex ??
+					tabsAttributes?.activeTabIndex ??
+					0,
+			};
+		},
+		[ tabsClientId ]
+	);
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarButton
+				className="wp-block-tab-list__mover-button"
+				icon={ isRTL() ? chevronRight : chevronLeft }
+				label={ __( 'Move tab left' ) }
+				onClick={ () => moveTab( -1 ) }
+				disabled={ activeIndex <= 0 }
+				accessibleWhenDisabled
+			/>
+			<ToolbarButton
+				className="wp-block-tab-list__mover-button"
+				icon={ isRTL() ? chevronLeft : chevronRight }
+				label={ __( 'Move tab right' ) }
+				onClick={ () => moveTab( 1 ) }
+				disabled={ activeIndex >= tabCount - 1 }
+				accessibleWhenDisabled
+			/>
+		</BlockControls>
+	);
+}

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

@@ -7,20 +7,21 @@ 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.
+ * Provides callbacks to insert, remove and move 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.
+ * @return {{ insertTab: Function, removeTab: Function, moveTab: Function }} Tab action callbacks.
  */
 export default function useTabActions( tabsClientId ) {
 	const registry = useRegistry();
 	const {
 		insertBlock,
 		removeBlock,
+		moveBlocksToPosition,
 		updateBlockAttributes,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
@@ -98,5 +99,33 @@ export default function useTabActions( tabsClientId ) {
 		removeBlock( target.clientId, false );
 	};
 
-	return { insertTab, removeTab };
+	// Move the active tab one position left or right by reordering the
+	// underlying tab-panel. The tab-list labels follow their panel
+	// automatically via useTabListItemsSync.
+	const moveTab = ( direction ) => {
+		const { tabPanelsClientId, tabPanelBlocks, activeIndex } =
+			getTabsState();
+		if ( ! tabPanelsClientId ) {
+			return;
+		}
+
+		const toIndex = activeIndex + direction;
+		const target = tabPanelBlocks[ activeIndex ];
+		if ( ! target || toIndex < 0 || toIndex >= tabPanelBlocks.length ) {
+			return;
+		}
+
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: toIndex,
+		} );
+		moveBlocksToPosition(
+			[ target.clientId ],
+			tabPanelsClientId,
+			tabPanelsClientId,
+			toIndex
+		);
+	};
+
+	return { insertTab, removeTab, moveTab };
 }

test/e2e/specs/editor/blocks/tabs.spec.js

@@ -203,6 +203,75 @@ test.describe( 'Tabs', () => {
 			await pageUtils.pressKeys( 'primary+z' );
 			await expect( tabs ).toHaveCount( 2 );
 		} );
+
+		test( 'moves the active tab to the previous position with the toolbar mover', async ( {
+			editor,
+			pageUtils,
+		} ) => {
+			const tab2 = editor.canvas.getByRole( 'tab', { name: 'Tab 2' } );
+			await tab2.click();
+
+			await editor.clickBlockToolbarButton( 'Move tab left' );
+
+			// The tab and its panel are reordered together.
+			await expect
+				.poll( async () =>
+					(
+						await editor.getBlocks()
+					)[ 0 ].innerBlocks[ 1 ].innerBlocks.map(
+						( panel ) => panel.attributes.label
+					)
+				)
+				.toEqual( [ 'Tab 2', 'Tab 1' ] );
+			await expect( editor.canvas.getByRole( 'tab' ) ).toHaveText( [
+				'Tab 2',
+				'Tab 1',
+			] );
+
+			// The moved tab stays active.
+			await expect( tab2 ).toHaveAttribute( 'aria-selected', 'true' );
+
+			// Undo restores the original order.
+			await pageUtils.pressKeys( 'primary+z' );
+			await expect( editor.canvas.getByRole( 'tab' ) ).toHaveText( [
+				'Tab 1',
+				'Tab 2',
+			] );
+		} );
+
+		test( 'moves the active tab to the next position with the toolbar mover', async ( {
+			editor,
+			pageUtils,
+		} ) => {
+			const tab1 = editor.canvas.getByRole( 'tab', { name: 'Tab 1' } );
+			await tab1.click();
+
+			await editor.clickBlockToolbarButton( 'Move tab right' );
+
+			await expect
+				.poll( async () =>
+					(
+						await editor.getBlocks()
+					)[ 0 ].innerBlocks[ 1 ].innerBlocks.map(
+						( panel ) => panel.attributes.label
+					)
+				)
+				.toEqual( [ 'Tab 2', 'Tab 1' ] );
+			await expect( editor.canvas.getByRole( 'tab' ) ).toHaveText( [
+				'Tab 2',
+				'Tab 1',
+			] );
+
+			// The moved tab stays active.
+			await expect( tab1 ).toHaveAttribute( 'aria-selected', 'true' );
+
+			// Undo restores the original order.
+			await pageUtils.pressKeys( 'primary+z' );
+			await expect( editor.canvas.getByRole( 'tab' ) ).toHaveText( [
+				'Tab 1',
+				'Tab 2',
+			] );
+		} );
 	} );
 
 	// TODO: Add a `Frontend functionality` describe block for front-end