Product Gallery block: Move inner block settings around to match the order from the design (https://github.com/woocommerce/woocommerce-blocks/pull/11170)

* Rearrange block settings to correct position

* Remove unnecessary comments

* Remove unused imports

* Fix e2e tests

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/block-settings/index.tsx

@@ -9,14 +9,48 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import type { ProductGallerySettingsProps } from '../types';
+import { ProductGalleryThumbnailsBlockSettings } from '../inner-blocks/product-gallery-thumbnails/block-settings';
+import { ProductGalleryPagerBlockSettings } from '../inner-blocks/product-gallery-pager/settings';
+import { ProductGalleryNextPreviousBlockSettings } from '../inner-blocks/product-gallery-large-image-next-previous/settings';
 
 export const ProductGalleryBlockSettings = ( {
 	attributes,
 	setAttributes,
+	context,
 }: ProductGallerySettingsProps ) => {
 	const { cropImages, hoverZoom, fullScreenOnClick } = attributes;
+	const {
+		productGalleryClientId,
+		pagerDisplayMode,
+		nextPreviousButtonsPosition,
+		thumbnailsNumberOfThumbnails,
+		thumbnailsPosition,
+	} = context;
 	return (
 		<InspectorControls>
+			<PanelBody
+				title={ __(
+					'Gallery Navigation',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				<ProductGalleryPagerBlockSettings
+					context={ { productGalleryClientId, pagerDisplayMode } }
+				/>
+				<ProductGalleryNextPreviousBlockSettings
+					context={ {
+						productGalleryClientId,
+						nextPreviousButtonsPosition,
+					} }
+				/>
+				<ProductGalleryThumbnailsBlockSettings
+					context={ {
+						productGalleryClientId,
+						thumbnailsNumberOfThumbnails,
+						thumbnailsPosition,
+					} }
+				/>
+			</PanelBody>
 			<PanelBody
 				title={ __( 'Media Settings', 'woo-gutenberg-products-block' ) }
 			>

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/edit.tsx

@@ -19,11 +19,8 @@ import {
 	getInnerBlocksLockAttributes,
 	getClassNameByNextPreviousButtonsPosition,
 } from './utils';
-import { ProductGalleryThumbnailsBlockSettings } from './inner-blocks/product-gallery-thumbnails/block-settings';
-import { ProductGalleryPagerBlockSettings } from './inner-blocks/product-gallery-pager/settings';
 import { ProductGalleryBlockSettings } from './block-settings/index';
 import type { ProductGalleryAttributes } from './types';
-import { ProductGalleryNextPreviousBlockSettings } from './inner-blocks/product-gallery-large-image-next-previous/settings';
 
 const TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -137,35 +134,18 @@ export const Edit = ( {
 
 	return (
 		<div { ...blockProps }>
-			<InspectorControls>
-				<ProductGalleryPagerBlockSettings
-					context={ {
-						productGalleryClientId: clientId,
-						pagerDisplayMode: attributes.pagerDisplayMode,
-					} }
-				/>
-				<ProductGalleryThumbnailsBlockSettings
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					context={ {
-						productGalleryClientId: clientId,
-						thumbnailsPosition: attributes.thumbnailsPosition,
-						thumbnailsNumberOfThumbnails:
-							attributes.thumbnailsNumberOfThumbnails,
-					} }
-				/>
-			</InspectorControls>
 			<InspectorControls>
 				<ProductGalleryBlockSettings
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-				/>
-			</InspectorControls>
-			<InspectorControls>
-				<ProductGalleryNextPreviousBlockSettings
 					context={ {
-						...attributes,
 						productGalleryClientId: clientId,
+						pagerDisplayMode: attributes.pagerDisplayMode,
+						thumbnailsPosition: attributes.thumbnailsPosition,
+						thumbnailsNumberOfThumbnails:
+							attributes.thumbnailsNumberOfThumbnails,
+						nextPreviousButtonsPosition:
+							attributes.nextPreviousButtonsPosition,
 					} }
 				/>
 			</InspectorControls>

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx

@@ -4,6 +4,7 @@
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { BlockAttributes } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
 import classNames from 'classnames';
 
 /**
@@ -57,7 +58,11 @@ export const Edit = ( {
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
-				<ProductGalleryNextPreviousBlockSettings context={ context } />
+				<PanelBody>
+					<ProductGalleryNextPreviousBlockSettings
+						context={ context }
+					/>
+				</PanelBody>
 			</InspectorControls>
 			<div
 				className={ classNames(

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/settings.tsx

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	// @ts-expect-error `__experimentalToggleGroupControl` is not yet in the type definitions.
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -19,7 +18,7 @@ import {
  */
 import { NextPreviousButtonSettingValues } from './types';
 import { InsideTheImage, OutsideTheImage } from './icons';
-import { Context } from '../../types';
+import { ProductGalleryLargeImageNextPreviousContext } from '../../types';
 
 const NextPreviousButtonIcons = {
 	[ NextPreviousButtonSettingValues.insideTheImage ]: <InsideTheImage />,
@@ -54,17 +53,15 @@ const getHelpText = ( buttonPosition: NextPreviousButtonSettingValues ) => {
 export const ProductGalleryNextPreviousBlockSettings = ( {
 	context,
 }: {
-	context: Context;
+	context: ProductGalleryLargeImageNextPreviousContext;
 } ) => {
 	const { productGalleryClientId, nextPreviousButtonsPosition } = context;
 	// @ts-expect-error @wordpress/block-editor/store types not provided
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	return (
-		<PanelBody
-			className="wc-block-editor-product-gallery-large-image-next-previous-settings"
-			title={ __( 'Next/Prev Buttons', 'woo-gutenberg-products-block' ) }
-		>
 		<ToggleGroupControl
+			label={ __( 'Next/Prev Buttons', 'woo-gutenberg-products-block' ) }
+			className="wc-block-editor-product-gallery-large-image-next-previous-settings"
 			style={ {
 				width: '100%',
 			} }
@@ -89,6 +86,5 @@ export const ProductGalleryNextPreviousBlockSettings = ( {
 				label={ NextPreviousButtonIcons.outsideTheImage }
 			/>
 		</ToggleGroupControl>
-		</PanelBody>
 	);
 };

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx

@@ -3,6 +3,7 @@
  */
 import { Icon } from '@wordpress/icons';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
 import classNames from 'classnames';
 
 /**
@@ -97,7 +98,9 @@ export const Edit = ( props: EditProps ): JSX.Element => {
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
+				<PanelBody>
 					<ProductGalleryPagerBlockSettings context={ context } />
+				</PanelBody>
 			</InspectorControls>
 
 			<Pager pagerDisplayMode={ context.pagerDisplayMode } />

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/settings.tsx

@@ -5,7 +5,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
-	PanelBody,
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -58,11 +57,8 @@ export const ProductGalleryPagerBlockSettings = ( {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	return (
-		<PanelBody
-			className="wc-block-editor-product-gallery-pager-settings"
-			title={ __( 'Pager', 'woo-gutenberg-products-block' ) }
-		>
 		<ToggleGroupControl
+			label={ __( 'Pager', 'woo-gutenberg-products-block' ) }
 			style={ {
 				width: '100%',
 			} }
@@ -87,6 +83,5 @@ export const ProductGalleryPagerBlockSettings = ( {
 				label={ <PagerSettingsDigitsIcon /> }
 			/>
 		</ToggleGroupControl>
-		</PanelBody>
 	);
 };

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx

@@ -1,10 +1,7 @@
 /**
  * External dependencies
  */
-import {
+import { store as blockEditorStore } from '@wordpress/block-editor';
-	InspectorControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import {
@@ -14,7 +11,6 @@ import {
 } from '@woocommerce/icons';
 import { useDispatch } from '@wordpress/data';
 import {
-	PanelBody,
 	RangeControl,
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore - Ignoring because `__experimentalToggleGroupControlOption` is not yet in the type definitions.
@@ -61,10 +57,7 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	return (
-		<InspectorControls>
+		<>
-			<PanelBody
-				title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
-			>
 			<ToggleGroupControl
 				className="wc-block-editor-product-gallery-thumbnails__position-toggle"
 				isBlock={ true }
@@ -94,19 +87,13 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
 				<ToggleGroupControlOption
 					value={ ThumbnailsPosition.BOTTOM }
 					label={
-							<Icon
+						<Icon size={ 32 } icon={ thumbnailsPositionBottom } />
-								size={ 32 }
-								icon={ thumbnailsPositionBottom }
-							/>
 					}
 				/>
 				<ToggleGroupControlOption
 					value={ ThumbnailsPosition.RIGHT }
 					label={
-							<Icon
+						<Icon size={ 32 } icon={ thumbnailsPositionRight } />
-								size={ 32 }
-								icon={ thumbnailsPositionRight }
-							/>
 					}
 				/>
 			</ToggleGroupControl>
@@ -130,7 +117,6 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
 					min={ minNumberOfThumbnails }
 				/>
 			) }
-			</PanelBody>
+		</>
-		</InspectorControls>
 	);
 };

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { Disabled } from '@wordpress/components';
+import { Disabled, PanelBody } from '@wordpress/components';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
 import classNames from 'classnames';
@@ -55,11 +55,13 @@ export const Edit = ( { attributes, setAttributes, context }: EditProps ) => {
 		<>
 			<div { ...blockProps }>
 				<InspectorControls>
+					<PanelBody>
 						<ProductGalleryThumbnailsBlockSettings
 							attributes={ attributes }
 							setAttributes={ setAttributes }
 							context={ context }
 						/>
+					</PanelBody>
 				</InspectorControls>
 				<Disabled>
 					<Placeholder />

plugins/woocommerce-blocks/assets/js/blocks/product-gallery/types.ts

@@ -33,14 +33,11 @@ export interface ProductGalleryBlockEditProps {
 export interface ProductGallerySettingsProps {
 	attributes: ProductGalleryBlockAttributes;
 	setAttributes: ( attributes: ProductGalleryBlockAttributes ) => void;
+	context: ProductGalleryContext;
 }
 
 export interface ProductGalleryThumbnailsSettingsProps {
-	attributes: ProductGalleryThumbnailsBlockAttributes;
+	context: ProductGalleryThumbnailsContext;
-	setAttributes: (
-		attributes: ProductGalleryThumbnailsBlockAttributes
-	) => void;
-	context: ProductGalleryThumbnailsBlockAttributes;
 }
 
 export type ProductGalleryContext = {
@@ -55,6 +52,18 @@ export type ProductGalleryPagerContext = Pick<
 	'productGalleryClientId' | 'pagerDisplayMode'
 >;
 
+export type ProductGalleryLargeImageNextPreviousContext = Pick<
+	ProductGalleryContext,
+	'productGalleryClientId' | 'nextPreviousButtonsPosition'
+>;
+
+export type ProductGalleryThumbnailsContext = Pick<
+	ProductGalleryContext,
+	| 'productGalleryClientId'
+	| 'thumbnailsPosition'
+	| 'thumbnailsNumberOfThumbnails'
+>;
+
 export type ProductGalleryAttributes = ProductGalleryThumbnailsBlockAttributes &
 	ProductGalleryBlockAttributes &
 	ProductGalleryPagerBlockAttributes &

plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts

@@ -20,8 +20,7 @@ const blockData = {
 		},
 		editor: {
 			settings: {
-				pagerSettingsContainer:
+				pagerSettingsContainer: 'div[aria-label="Pager"]',
-					'.wc-block-editor-product-gallery-pager-settings',
 				displayModeOffOption: 'button[data-value=off]',
 				displayModeDotsOption: 'button[data-value=dots]',
 				displayModeDigitsOption: 'button[data-value=digits]',