From 54d195b15fb3753ab2a057b7c869b911c9e4d1a1 Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <daniel.dudzic@automattic.com>
Date: Sat, 29 Jul 2023 05:39:36 +0200
Subject: [PATCH] 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      |  5 +++--
 .../block-settings/index.tsx                   | 18 +++++++++---------
 .../product-gallery-thumbnails/constants.tsx   |  8 ++++----
 .../product-gallery-thumbnails/edit.tsx        |  2 +-
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/assets/js/blocks/product-gallery/edit.tsx b/assets/js/blocks/product-gallery/edit.tsx
index 333ba96e9a8..9afadc3da2e 100644
--- a/assets/js/blocks/product-gallery/edit.tsx
+++ b/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 ] );
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
index 20ab03e0ac6..6cf7a5c4188 100644
--- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx
+++ b/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',
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/constants.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/constants.tsx
index a4e7d99a4b1..ad884d51d33 100644
--- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/constants.tsx
+++ b/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',
 }
diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
index 839ff39402e..0731adae1a9 100644
--- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx
+++ b/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(