Product Gallery Thumbnails: Revert thumbnails styling from #11665

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

@@ -25,13 +25,7 @@ import type { ProductGalleryAttributes } from './types';
 const TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/group',
-		{
-			layout: {
-				type: 'flex',
-				flexWrap: 'nowrap',
-				verticalAlignment: 'top',
-			},
-		},
+		{ layout: { type: 'flex', flexWrap: 'nowrap' } },
 		[
 			[
 				'woocommerce/product-gallery-thumbnails',

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

@@ -40,15 +40,11 @@ export const Edit = ( { attributes, setAttributes, context }: EditProps ) => {
 					...Array( context.thumbnailsNumberOfThumbnails ).keys(),
 				].map( ( index ) => {
 					return (
-						<div
-							className="wc-block-product-gallery-thumbnails__thumbnail"
+						<img
 							key={ index }
-						>
-							<img
-								src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
-								alt="Placeholder"
-							/>
-						</div>
+							src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+							alt="Placeholder"
+						/>
 					);
 				} ) }
 			</div>

assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss

@@ -1,19 +1,17 @@
-$thumbnails: ".wc-block-editor-product-gallery-thumbnails";
-
-#{$thumbnails} {
-	display: flex;
+.wc-block-product-gallery-thumbnails {
+	width: fit-content;
+	.wc-block-editor-product-gallery-thumbnails {
+		display: flex;
+		flex-flow: column nowrap;
 
-	&.wc-block-editor-product-gallery-thumbnails--bottom {
-		flex-direction: row;
-		gap: 0 15px;
-	}
+		&.wc-block-editor-product-gallery-thumbnails--bottom {
+			flex-flow: row nowrap;
+		}
 
-	&:not(.wc-block-editor-product-gallery-thumbnails--bottom) {
-		flex-direction: column;
-		gap: 15px 0;
+		img {
+			width: 100px;
+			height: 100px;
+			margin: 5px;
+		}
 	}
 }
-
-.wc-block-product-gallery-thumbnails {
-	flex-basis: 30%;
-}

assets/js/blocks/product-gallery/style.scss

@@ -10,7 +10,6 @@ $gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-button
 
 $outside-image-offset: 30px;
 $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
-$thumbnails-gap: 15px;
 
 // Product Gallery
 #{$gallery} {
@@ -233,44 +232,21 @@ $thumbnails-gap: 15px;
 
 // Thumbnails
 #{$thumbnails} {
-	display: flex;
-
 	img {
 		cursor: pointer;
-		height: auto;
-		width: auto;
-		max-width: 100%;
 	}
 
-	#{$gallery}[data-thumbnails-position='bottom'] & {
+	.is-vertical & {
+		display: flex;
 		flex-direction: row;
-		gap: 0 15px;
-	}
-
-	#{$gallery}:not([data-thumbnails-position='bottom']) & {
-		flex-direction: column;
-		gap: 15px 0;
-		min-width: clamp(50px, 20%, 100%);
 	}
 
 	.wc-block-product-gallery-thumbnails__thumbnail {
-		border: 1px solid rgba($color: #000, $alpha: 0.1);
-		max-width: 100%;
-		height: auto;
-		width: auto;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		aspect-ratio: 1 / 1;
+		width: 100px;
+		height: 100px;
+		margin: 5px;
 		position: relative;
-		flex-basis: 0;
-		flex-grow: 1;
 
-		&::before {
-			content: "";
-			display: block;
-			padding-top: 100%;
-		}
 	}
 
 	.wc-block-product-gallery-thumbnails__thumbnail__overlay {