Merge branch 'trunk' into fix/html-entities-in-product-name

assets/js/blocks/collection-filters/inner-blocks/stock-filter/frontend.ts

@@ -1,10 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	store as interactivityStore,
-	navigate,
-} from '@woocommerce/interactivity';
+import { store, navigate, getContext } from '@woocommerce/interactivity';
 import { DropdownContext } from '@woocommerce/interactivity-components/dropdown';
 import { HTMLElementEvent } from '@woocommerce/types';
 
@@ -21,59 +18,40 @@ const getUrl = ( activeFilters: string ) => {
 	return url.href;
 };
 
-type StockFilterState = {
-	filters: {
-		stockStatus: string;
-		activeFilters: string;
-		showDropdown: boolean;
-	};
-};
-
-type ActionProps = {
-	state: StockFilterState;
-	event: HTMLElementEvent< HTMLInputElement >;
-};
+store( 'woocommerce/collection-stock-filter', {
+	actions: {
+		// "on select" handler passed to the dropdown component.
+		navigate: () => {
+			const context = getContext< DropdownContext >(
+				'woocommerce/interactivity-dropdown'
+			);
 
-interactivityStore( {
-	state: {
-		filters: {
-			stockStatus: '',
+			navigate( getUrl( context.selectedItem.value || '' ) );
 		},
-	},
-	actions: {
-		filters: {
-			navigate: ( { context }: { context: DropdownContext } ) => {
-				if ( context.woocommerceDropdown.selectedItem.value ) {
-					navigate(
-						getUrl( context.woocommerceDropdown.selectedItem.value )
-					);
+		updateProducts: ( event: HTMLElementEvent< HTMLInputElement > ) => {
+			// get the active filters from the url:
+			const url = new URL( window.location.href );
+			const currentFilters =
+				url.searchParams.get( 'filter_stock_status' ) || '';
+
+			// split out the active filters into an array.
+			const filtersArr =
+				currentFilters === '' ? [] : currentFilters.split( ',' );
+
+			// if checked and not already in activeFilters, add to activeFilters
+			// if not checked and in activeFilters, remove from activeFilters.
+			if ( event.target.checked ) {
+				if ( ! currentFilters.includes( event.target.value ) ) {
+					filtersArr.push( event.target.value );
 				}
-			},
-			updateProducts: ( { event }: ActionProps ) => {
-				// get the active filters from the url:
-				const url = new URL( window.location.href );
-				const currentFilters =
-					url.searchParams.get( 'filter_stock_status' ) || '';
-
-				// split out the active filters into an array.
-				const filtersArr =
-					currentFilters === '' ? [] : currentFilters.split( ',' );
-
-				// if checked and not already in activeFilters, add to activeFilters
-				// if not checked and in activeFilters, remove from activeFilters.
-				if ( event.target.checked ) {
-					if ( ! currentFilters.includes( event.target.value ) ) {
-						filtersArr.push( event.target.value );
-					}
-				} else {
-					const index = filtersArr.indexOf( event.target.value );
-					if ( index > -1 ) {
-						filtersArr.splice( index, 1 );
-					}
+			} else {
+				const index = filtersArr.indexOf( event.target.value );
+				if ( index > -1 ) {
+					filtersArr.splice( index, 1 );
 				}
+			}
 
-				navigate( getUrl( filtersArr.join( ',' ) ) );
-			},
+			navigate( getUrl( filtersArr.join( ',' ) ) );
 		},
 	},
 } );

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

@@ -25,7 +25,13 @@ import type { ProductGalleryAttributes } from './types';
 const TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/group',
-		{ layout: { type: 'flex', flexWrap: 'nowrap' } },
+		{
+			layout: {
+				type: 'flex',
+				flexWrap: 'nowrap',
+				verticalAlignment: 'top',
+			},
+		},
 		[
 			[
 				'woocommerce/product-gallery-thumbnails',
@@ -38,6 +44,10 @@ const TEMPLATE: InnerBlockTemplate[] = [
 						type: 'flex',
 						orientation: 'vertical',
 						justifyContent: 'center',
+						verticalAlignment: 'top',
+					},
+					style: {
+						layout: { selfStretch: 'fixed', flexSize: '100%' },
 					},
 					...getInnerBlocksLockAttributes( 'lock' ),
 				},

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/editor.scss

@@ -1,4 +1,6 @@
 .wc-block-editor-product-gallery-large-image {
+	width: 100%;
+
 	img {
 		max-width: 100%;
 		margin: 0 auto;

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

@@ -51,7 +51,7 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
 	context,
 }: ProductGalleryThumbnailsSettingsProps ) => {
 	const maxNumberOfThumbnails = 8;
-	const minNumberOfThumbnails = 2;
+	const minNumberOfThumbnails = 3;
 	const { productGalleryClientId } = context;
 	// @ts-expect-error @wordpress/block-editor/store types not provided
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -110,7 +110,7 @@ export const ProductGalleryThumbnailsBlockSettings = ( {
 						} )
 					}
 					help={ __(
-						'Choose how many thumbnails (2-8) will display. If more images exist, a “View all” button will display.',
+						'Choose how many thumbnails (3-8) will display. If more images exist, a “View all” button will display.',
 						'woo-gutenberg-products-block'
 					) }
 					max={ maxNumberOfThumbnails }

assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json

@@ -7,7 +7,7 @@
     "description": "Display the Thumbnails of a product.",
     "category": "woocommerce",
     "keywords": [ "WooCommerce" ],
-	"usesContext": [ "postId", "thumbnailsPosition", "thumbnailsNumberOfThumbnails", "productGalleryClientId", "mode" ],
+	"usesContext": [ "postId", "thumbnailsPosition", "thumbnailsNumberOfThumbnails", "productGalleryClientId", "mode", "cropImages" ],
     "textdomain": "woo-gutenberg-products-block",
 	"ancestor": [ "woocommerce/product-gallery" ],
 	"supports": {

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

@@ -25,26 +25,29 @@ interface EditProps
 
 export const Edit = ( { attributes, setAttributes, context }: EditProps ) => {
 	const blockProps = useBlockProps( {
-		className: 'wc-block-product-gallery-thumbnails',
+		className: classNames(
+			'wc-block-product-gallery-thumbnails',
+			`wc-block-product-gallery-thumbnails--number-of-thumbnails-${ context.thumbnailsNumberOfThumbnails }`,
+			`wc-block-product-gallery-thumbnails--position-${ context.thumbnailsPosition }`
+		),
 	} );
 
 	const Placeholder = () => {
 		return context.thumbnailsPosition !== ThumbnailsPosition.OFF ? (
-			<div
-				className={ classNames(
-					'wc-block-editor-product-gallery-thumbnails',
-					`wc-block-editor-product-gallery-thumbnails--${ context.thumbnailsPosition }`
-				) }
-			>
+			<div className="wc-block-editor-product-gallery-thumbnails">
 				{ [
 					...Array( context.thumbnailsNumberOfThumbnails ).keys(),
 				].map( ( index ) => {
 					return (
-						<img
+						<div
+							className="wc-block-product-gallery-thumbnails__thumbnail"
 							key={ index }
-							src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
-							alt="Placeholder"
-						/>
+						>
+							<img
+								src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+								alt="Placeholder"
+							/>
+						</div>
 					);
 				} ) }
 			</div>

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

@@ -1,17 +1,30 @@
-.wc-block-product-gallery-thumbnails {
-	width: fit-content;
-	.wc-block-editor-product-gallery-thumbnails {
-		display: flex;
-		flex-flow: column nowrap;
+$thumbnails: ".wc-block-editor-product-gallery-thumbnails";
+$thumbnails-gap: 15px;
 
-		&.wc-block-editor-product-gallery-thumbnails--bottom {
-			flex-flow: row nowrap;
-		}
+#{$thumbnails} {
+	display: flex;
 
-		img {
-			width: 100px;
-			height: 100px;
-			margin: 5px;
-		}
+	.wc-block-product-gallery-thumbnails--position-bottom & {
+		flex-direction: row;
+		gap: 0 15px;
+	}
+
+	.wc-block-product-gallery-thumbnails:not(.wc-block-product-gallery-thumbnails--position-bottom) & {
+		flex-direction: column;
+		gap: 15px 0;
+	}
+}
+
+@for $i from 3 through 8 {
+	// Calculate the total width occupied by the gaps between thumbnails.
+	$gap-width: $thumbnails-gap * ($i - 1);
+
+	// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
+	$border-width: ($i * 1px * 2);
+
+	$additional-space: $i * 1px;
+
+	.wc-block-product-gallery-thumbnails--number-of-thumbnails-#{$i}:not(.wc-block-product-gallery-thumbnails--position-bottom) {
+		flex-basis: calc((100% - #{$gap-width} - #{$border-width} - #{$additional-space}) / #{$i});
 	}
 }

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

@@ -10,6 +10,8 @@ $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;
+$default-number-of-thumbnails: 3;
 
 // Product Gallery
 #{$gallery} {
@@ -55,6 +57,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 	height: fit-content;
 	position: relative;
 	overflow: hidden;
+	flex-grow: 1;
 
 	// Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
 	#{$gallery-next-previous-outside-image} & .wc-block-product-gallery-large-image__image-element {
@@ -64,10 +67,13 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 	}
 
 	.wc-block-product-gallery-large-image__wrapper {
+		aspect-ratio: 1 / 1;
 		flex-shrink: 0;
 		max-width: 100%;
 		overflow: hidden;
 		width: 100%;
+		display: flex;
+		align-items: center;
 	}
 
 	.wc-block-product-gallery-large-image__container {
@@ -93,7 +99,8 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 		margin: 0 auto;
 		z-index: 1;
 		transition: all 0.1s linear;
-		width: auto;
+		aspect-ratio: 1 / 1;
+		object-fit: contain;
 
 		// Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied.
 		&.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click {
@@ -234,20 +241,82 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 
 // Thumbnails
 #{$thumbnails} {
+	display: flex;
+
 	img {
 		cursor: pointer;
+		height: auto;
+		width: auto;
+		max-width: 100%;
 	}
 
-	.is-vertical & {
-		display: flex;
+	#{$gallery}[data-thumbnails-position='bottom'] & {
 		flex-direction: row;
+		gap: 0 15px;
+	}
+
+	#{$gallery}:not([data-thumbnails-position='bottom']) & {
+		flex-direction: column;
+		gap: 15px 0;
+
+		// Calculate the total width occupied by the gaps between thumbnails.
+		$gap-width: $thumbnails-gap * ($default-number-of-thumbnails - 1);
+
+		// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
+		$border-width: #{$default-number-of-thumbnails * 1px * 2};
+
+		// Calculate the width of each thumbnail by accounting for the gap, border, and additional space.
+		flex-basis: calc((100% - #{$gap-width} - #{$border-width} - 4px) / #{$default-number-of-thumbnails});
+	}
+
+	@for $i from 3 through 8 {
+		#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}']:not([data-thumbnails-position='bottom']) & {
+			// Calculate the total width occupied by the gaps between thumbnails.
+			$gap-width: $thumbnails-gap * ($i - 1);
+
+			// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
+			$border-width: $i * 1px * 2;
+
+			flex-basis: calc((100% - #{$gap-width} - #{$border-width}) / $i);
+		}
 	}
 
 	.wc-block-product-gallery-thumbnails__thumbnail {
-		width: 100px;
-		height: 100px;
-		margin: 5px;
+		border: 1px solid rgba($color: #000, $alpha: 0.1);
+		height: auto;
+		width: auto;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		aspect-ratio: 1 / 1;
 		position: relative;
+		flex-basis: 0;
+		flex-grow: 1;
+
+		img {
+			aspect-ratio: 1 / 1;
+			object-fit: contain;
+		}
+
+		&::before {
+			content: "";
+			display: block;
+			padding-top: 100%;
+		}
+
+		@for $i from 3 through 8 {
+			#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}'][data-thumbnails-position="bottom"] & {
+				// Calculate the total width occupied by the gaps between thumbnails.
+				$gap-width: $thumbnails-gap * ($i - 1);
+
+				// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
+				$border-width: $i * 1px * 2;
+
+				$thumbnail-width: calc((100% - #{$gap-width} - #{$border-width}) / $i);
+
+				flex: 0 0 $thumbnail-width;
+			}
+		}
 
 	}