Product Gallery Thumbnails: Uppercase the enum and fix the thumbnails…

… position bug when initially adding the Product Gallery block

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

@@ -44,13 +44,14 @@ export const Edit = ( {
 }: BlockEditProps< BlockAttributes > ) => {
 	const blockProps = useBlockProps();
 
+	// Update the Group block type when the thumbnailsPosition attribute changes.
+	updateGroupBlockType( attributes, clientId );
+
 	useEffect( () => {
 		setAttributes( {
 			...attributes,
 			productGalleryClientId: clientId,
 		} );
-		// Update the Group block type when the thumbnailsPosition attribute changes.
-		updateGroupBlockType( attributes, clientId );
 		// Move the Thumbnails block to the correct above or below the Large Image based on the thumbnailsPosition attribute.
 		moveInnerBlocksToPosition( attributes, clientId );
 	}, [ setAttributes, attributes, clientId ] );

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

@@ -33,19 +33,19 @@ import { ThumbnailsPosition } from '../constants';
 import type { ThumbnailsSettingProps } from '../../../types';
 
 const positionHelp: Record< ThumbnailsPosition, string > = {
-	[ ThumbnailsPosition.Off ]: __(
+	[ ThumbnailsPosition.OFF ]: __(
 		'No thumbnails will be displayed.',
 		'woo-gutenberg-products-block'
 	),
-	[ ThumbnailsPosition.Left ]: __(
+	[ ThumbnailsPosition.LEFT ]: __(
 		'A strip of small images will appear to the left of the main gallery image.',
 		'woo-gutenberg-products-block'
 	),
-	[ ThumbnailsPosition.Bottom ]: __(
+	[ ThumbnailsPosition.BOTTOM ]: __(
 		'A strip of small images will appear below the main gallery image.',
 		'woo-gutenberg-products-block'
 	),
-	[ ThumbnailsPosition.Right ]: __(
+	[ ThumbnailsPosition.RIGHT ]: __(
 		'A strip of small images will appear to the right of the main gallery image.',
 		'woo-gutenberg-products-block'
 	),
@@ -81,17 +81,17 @@ export const BlockSettings = ( { context }: ThumbnailsSettingProps ) => {
 					}
 				>
 					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.Off }
+						value={ ThumbnailsPosition.OFF }
 						label={ __( 'Off', 'woo-gutenberg-products-block' ) }
 					/>
 					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.Left }
+						value={ ThumbnailsPosition.LEFT }
 						label={
 							<Icon size={ 32 } icon={ thumbnailsPositionLeft } />
 						}
 					/>
 					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.Bottom }
+						value={ ThumbnailsPosition.BOTTOM }
 						label={
 							<Icon
 								size={ 32 }
@@ -100,7 +100,7 @@ export const BlockSettings = ( { context }: ThumbnailsSettingProps ) => {
 						}
 					/>
 					<ToggleGroupControlOption
-						value={ ThumbnailsPosition.Right }
+						value={ ThumbnailsPosition.RIGHT }
 						label={
 							<Icon
 								size={ 32 }
@@ -109,7 +109,7 @@ export const BlockSettings = ( { context }: ThumbnailsSettingProps ) => {
 						}
 					/>
 				</ToggleGroupControl>
-				{ context.thumbnailsPosition !== ThumbnailsPosition.Off && (
+				{ context.thumbnailsPosition !== ThumbnailsPosition.OFF && (
 					<RangeControl
 						label={ __(
 							'Number of Thumbnails',

assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/constants.tsx

@@ -1,6 +1,6 @@
 export enum ThumbnailsPosition {
-	'Off' = 'off',
-	'Left' = 'left',
-	'Bottom' = 'bottom',
-	'Right' = 'right',
+	OFF = 'off',
+	LEFT = 'left',
+	BOTTOM = 'bottom',
+	RIGHT = 'right',
 }

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

@@ -24,7 +24,7 @@ export const Edit = ( {
 	const Placeholder = () => {
 		return (
 			<>
-				{ context.thumbnailsPosition !== ThumbnailsPosition.Off && (
+				{ context.thumbnailsPosition !== ThumbnailsPosition.OFF && (
 					<div className="wc-block-editor-product-gallery-thumbnails">
 						{ [
 							...Array(