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
2023-10-10 09:04:54 -03:00 · 2023-10-10 09:04:54 -03:00 · a6ddae9dc3
parent 27ae9acafc
commit a6ddae9dc3
10 changed files with 182 additions and 173 deletions
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/block-settings/index.tsx
+++ b/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' ) }
 			>
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/edit.tsx
+++ b/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>
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/edit.tsx
+++ b/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(
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/settings.tsx
+++ b/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,41 +53,38 @@ 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
+		<ToggleGroupControl
+			label={ __( 'Next/Prev Buttons', 'woo-gutenberg-products-block' ) }
 			className="wc-block-editor-product-gallery-large-image-next-previous-settings"
-			title={ __( 'Next/Prev Buttons', 'woo-gutenberg-products-block' ) }
+			style={ {
+				width: '100%',
+			} }
+			onChange={ ( value: NextPreviousButtonSettingValues ) =>
+				updateBlockAttributes( productGalleryClientId, {
+					nextPreviousButtonsPosition: value,
+				} )
+			}
+			help={ getHelpText( nextPreviousButtonsPosition ) }
+			value={ nextPreviousButtonsPosition }
 		>
-			<ToggleGroupControl
-				style={ {
-					width: '100%',
-				} }
-				onChange={ ( value: NextPreviousButtonSettingValues ) =>
-					updateBlockAttributes( productGalleryClientId, {
-						nextPreviousButtonsPosition: value,
-					} )
-				}
-				help={ getHelpText( nextPreviousButtonsPosition ) }
-				value={ nextPreviousButtonsPosition }
-			>
-				<ToggleGroupControlOption
-					value={ NextPreviousButtonSettingValues.off }
-					label={ __( 'Off', 'woo-gutenberg-products-block' ) }
-				/>
-				<ToggleGroupControlOption
-					value={ NextPreviousButtonSettingValues.insideTheImage }
-					label={ NextPreviousButtonIcons.insideTheImage }
-				/>
-				<ToggleGroupControlOption
-					value={ NextPreviousButtonSettingValues.outsideTheImage }
-					label={ NextPreviousButtonIcons.outsideTheImage }
-				/>
-			</ToggleGroupControl>
-		</PanelBody>
+			<ToggleGroupControlOption
+				value={ NextPreviousButtonSettingValues.off }
+				label={ __( 'Off', 'woo-gutenberg-products-block' ) }
+			/>
+			<ToggleGroupControlOption
+				value={ NextPreviousButtonSettingValues.insideTheImage }
+				label={ NextPreviousButtonIcons.insideTheImage }
+			/>
+			<ToggleGroupControlOption
+				value={ NextPreviousButtonSettingValues.outsideTheImage }
+				label={ NextPreviousButtonIcons.outsideTheImage }
+			/>
+		</ToggleGroupControl>
 	);
 };
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/edit.tsx
+++ b/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>
-				<ProductGalleryPagerBlockSettings context={ context } />
+				<PanelBody>
+					<ProductGalleryPagerBlockSettings context={ context } />
+				</PanelBody>
 			</InspectorControls>

 			<Pager pagerDisplayMode={ context.pagerDisplayMode } />
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-pager/settings.tsx
+++ b/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,35 +57,31 @@ 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%',
+			} }
+			onChange={ ( value: PagerDisplayModes ) => {
+				updateBlockAttributes( productGalleryClientId, {
+					pagerDisplayMode: value,
+				} );
+			} }
+			help={ getHelpText( pagerDisplayMode ) }
+			value={ pagerDisplayMode }
 		>
-			<ToggleGroupControl
-				style={ {
-					width: '100%',
-				} }
-				onChange={ ( value: PagerDisplayModes ) => {
-					updateBlockAttributes( productGalleryClientId, {
-						pagerDisplayMode: value,
-					} );
-				} }
-				help={ getHelpText( pagerDisplayMode ) }
-				value={ pagerDisplayMode }
-			>
-				<ToggleGroupControlOption
-					value={ PagerDisplayModes.OFF }
-					label={ __( 'Off', 'woo-gutenberg-products-block' ) }
-				/>
-				<ToggleGroupControlOption
-					value={ PagerDisplayModes.DOTS }
-					label={ <PagerSettingsDotIcon /> }
-				/>
-				<ToggleGroupControlOption
-					value={ PagerDisplayModes.DIGITS }
-					label={ <PagerSettingsDigitsIcon /> }
-				/>
-			</ToggleGroupControl>
-		</PanelBody>
+			<ToggleGroupControlOption
+				value={ PagerDisplayModes.OFF }
+				label={ __( 'Off', 'woo-gutenberg-products-block' ) }
+			/>
+			<ToggleGroupControlOption
+				value={ PagerDisplayModes.DOTS }
+				label={ <PagerSettingsDotIcon /> }
+			/>
+			<ToggleGroupControlOption
+				value={ PagerDisplayModes.DIGITS }
+				label={ <PagerSettingsDigitsIcon /> }
+			/>
+		</ToggleGroupControl>
 	);
 };
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
@ -1,10 +1,7 @@
 /**
 * External dependencies
 */
-import {
-	InspectorControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { 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,76 +57,66 @@ 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 }
+				label={ __( 'Thumbnails', 'woo-gutenberg-products-block' ) }
+				value={ context.thumbnailsPosition }
+				help={
+					positionHelp[
+						context.thumbnailsPosition as ThumbnailsPosition
+					]
+				}
+				onChange={ ( value: string ) =>
+					updateBlockAttributes( productGalleryClientId, {
+						thumbnailsPosition: value,
+					} )
+				}
 			>
-				<ToggleGroupControl
-					className="wc-block-editor-product-gallery-thumbnails__position-toggle"
-					isBlock={ true }
-					label={ __( 'Thumbnails', 'woo-gutenberg-products-block' ) }
-					value={ context.thumbnailsPosition }
-					help={
-						positionHelp[
-							context.thumbnailsPosition as ThumbnailsPosition
-						]
+				<ToggleGroupControlOption
+					value={ ThumbnailsPosition.OFF }
+					label={ __( 'Off', 'woo-gutenberg-products-block' ) }
+				/>
+				<ToggleGroupControlOption
+					value={ ThumbnailsPosition.LEFT }
+					label={
+						<Icon size={ 32 } icon={ thumbnailsPositionLeft } />
 					}
-					onChange={ ( value: string ) =>
+				/>
+				<ToggleGroupControlOption
+					value={ ThumbnailsPosition.BOTTOM }
+					label={
+						<Icon size={ 32 } icon={ thumbnailsPositionBottom } />
+					}
+				/>
+				<ToggleGroupControlOption
+					value={ ThumbnailsPosition.RIGHT }
+					label={
+						<Icon size={ 32 } icon={ thumbnailsPositionRight } />
+					}
+				/>
+			</ToggleGroupControl>
+			{ context.thumbnailsPosition !== ThumbnailsPosition.OFF && (
+				<RangeControl
+					label={ __(
+						'Number of Thumbnails',
+						'woo-gutenberg-products-block'
+					) }
+					value={ context.thumbnailsNumberOfThumbnails }
+					onChange={ ( value: number ) =>
 						updateBlockAttributes( productGalleryClientId, {
-							thumbnailsPosition: value,
+							thumbnailsNumberOfThumbnails: value,
 						} )
 					}
-				>
-					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.OFF }
-						label={ __( 'Off', 'woo-gutenberg-products-block' ) }
-					/>
-					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.LEFT }
-						label={
-							<Icon size={ 32 } icon={ thumbnailsPositionLeft } />
-						}
-					/>
-					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.BOTTOM }
-						label={
-							<Icon
-								size={ 32 }
-								icon={ thumbnailsPositionBottom }
-							/>
-						}
-					/>
-					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.RIGHT }
-						label={
-							<Icon
-								size={ 32 }
-								icon={ thumbnailsPositionRight }
-							/>
-						}
-					/>
-				</ToggleGroupControl>
-				{ context.thumbnailsPosition !== ThumbnailsPosition.OFF && (
-					<RangeControl
-						label={ __(
-							'Number of Thumbnails',
-							'woo-gutenberg-products-block'
-						) }
-						value={ context.thumbnailsNumberOfThumbnails }
-						onChange={ ( value: number ) =>
-							updateBlockAttributes( productGalleryClientId, {
-								thumbnailsNumberOfThumbnails: value,
-							} )
-						}
-						help={ __(
-							'Choose how many thumbnails (2-8) will display. If more images exist, a “View all” button will display.',
-							'woo-gutenberg-products-block'
-						) }
-						max={ maxNumberOfThumbnails }
-						min={ minNumberOfThumbnails }
-					/>
-				) }
-			</PanelBody>
-		</InspectorControls>
+					help={ __(
+						'Choose how many thumbnails (2-8) will display. If more images exist, a “View all” button will display.',
+						'woo-gutenberg-products-block'
+					) }
+					max={ maxNumberOfThumbnails }
+					min={ minNumberOfThumbnails }
+				/>
+			) }
+		</>
 	);
 };
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
+++ b/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>
-					<ProductGalleryThumbnailsBlockSettings
-						attributes={ attributes }
-						setAttributes={ setAttributes }
-						context={ context }
-					/>
+					<PanelBody>
+						<ProductGalleryThumbnailsBlockSettings
+							attributes={ attributes }
+							setAttributes={ setAttributes }
+							context={ context }
+						/>
+					</PanelBody>
 				</InspectorControls>
 				<Disabled>
 					<Placeholder />
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/types.ts
+++ b/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;
-	setAttributes: (
-		attributes: ProductGalleryThumbnailsBlockAttributes
-	) => void;
-	context: ProductGalleryThumbnailsBlockAttributes;
+	context: ProductGalleryThumbnailsContext;
 }

 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 &
--- a/plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-pager/product-gallery-pager.block_theme.side_effects.spec.ts
+++ b/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:
-					'.wc-block-editor-product-gallery-pager-settings',
+				pagerSettingsContainer: 'div[aria-label="Pager"]',
 				displayModeOffOption: 'button[data-value=off]',
 				displayModeDotsOption: 'button[data-value=dots]',
 				displayModeDigitsOption: 'button[data-value=digits]',