Add section styles switch button in block toolbar in zoom out mode

packages/block-editor/src/components/block-toolbar/index.js

@@ -36,6 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
 import ChangeDesign from './change-design';
+import SwitchSectionStyle from './switch-section-style';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -72,6 +73,7 @@ export function PrivateBlockToolbar( {
 		showSlots,
 		showGroupButtons,
 		showLockButtons,
+		showSwitchSectionStyleButton,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -141,6 +143,7 @@ export function PrivateBlockToolbar( {
 			showSlots: ! isZoomOut(),
 			showGroupButtons: ! isZoomOut(),
 			showLockButtons: ! isZoomOut(),
+			showSwitchSectionStyleButton: isZoomOut(),
 		};
 	}, [] );
 
@@ -222,6 +225,9 @@ export function PrivateBlockToolbar( {
 				{ showShuffleButton && (
 					<ChangeDesign clientId={ blockClientIds[ 0 ] } />
 				) }
+				{ showSwitchSectionStyleButton && (
+					<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
+				) }
 				{ shouldShowVisualToolbar && showSlots && (
 					<>
 						<BlockControls.Slot

packages/block-editor/src/components/block-toolbar/switch-section-style.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Icon,
+	Path,
+	SVG,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useStylesForBlocks from '../block-styles/use-styles-for-block';
+import { replaceActiveStyle } from '../block-styles/utils';
+import { store as blockEditorStore } from '../../store';
+import { GlobalStylesContext } from '../global-styles';
+import { globalStylesDataKey } from '../../store/private-keys';
+import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+
+const styleIcon = (
+	<SVG
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z" />
+		<Path
+			stroke="currentColor"
+			strokeWidth="1.5"
+			d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
+		/>
+	</SVG>
+);
+
+function SwitchSectionStyle( { clientId } ) {
+	const { stylesToRender, activeStyle, className } = useStylesForBlocks( {
+		clientId,
+	} );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Get global styles data
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles, blockName } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				globalSettings: settings.__experimentalFeatures,
+				globalStyles: settings[ globalStylesDataKey ],
+				blockName: select( blockEditorStore ).getBlockName( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Get the background color for the active style
+	const activeStyleBackground = activeStyle?.name
+		? getVariationStylesWithRefValues(
+				{
+					settings: mergedConfig?.settings ?? globalSettings,
+					styles: mergedConfig?.styles ?? globalStyles,
+				},
+				blockName,
+				activeStyle.name
+		  )?.color?.background
+		: undefined;
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
+
+	const handleStyleSwitch = () => {
+		const currentIndex = stylesToRender.findIndex(
+			( style ) => style.name === activeStyle.name
+		);
+
+		const nextIndex = ( currentIndex + 1 ) % stylesToRender.length;
+		const nextStyle = stylesToRender[ nextIndex ];
+
+		const styleClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			nextStyle
+		);
+
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+	};
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ handleStyleSwitch }
+				label={ __( 'Shuffle styles' ) }
+			>
+				<Icon
+					icon={ styleIcon }
+					style={ {
+						fill: activeStyleBackground || 'transparent',
+					} }
+				/>
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}
+
+export default SwitchSectionStyle;