Merge branch 'trunk' into update/extensibility-docs

assets/js/atomic/blocks/product-elements/product-meta/edit.tsx

@@ -3,6 +3,7 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { InnerBlockTemplate } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,14 +29,17 @@ const Edit = () => {
 				[
 					'core/post-terms',
 					{
-						prefix: 'Category: ',
+						prefix: __(
+							'Category: ',
+							'woo-gutenberg-products-block'
+						),
 						term: 'product_cat',
 					},
 				],
 				[
 					'core/post-terms',
 					{
-						prefix: 'Tags: ',
+						prefix: __( 'Tags: ', 'woo-gutenberg-products-block' ),
 						term: 'product_tag',
 					},
 				],

assets/js/base/components/button/stories/index.stories.tsx

@@ -10,7 +10,7 @@ import Button, { ButtonProps } from '..';
 const availableTypes = [ 'button', 'input', 'submit' ];
 
 export default {
-	title: 'Base Components/Button',
+	title: 'External Components/Button',
 	argTypes: {
 		children: {
 			control: 'text',

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-collection/inspector-controls/hand-picked-products-control.tsx

@@ -3,6 +3,7 @@
  */
 import { getProducts } from '@woocommerce/editor-components/utils';
 import { ProductResponseItem } from '@woocommerce/types';
+import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -91,16 +92,21 @@ const HandPickedProductsControl = ( {
 		);
 	}, [ productsList, selectedProductIds ] );
 
+	/**
+	 * Transforms a token into a product name.
+	 * - If the token is a number, it will be used to lookup the product name.
+	 * - Otherwise, the token will be used as is.
+	 */
 	const transformTokenIntoProductName = ( token: string ) => {
 		const parsedToken = Number( token );
 
 		if ( Number.isNaN( parsedToken ) ) {
-			return token;
+			return decodeEntities( token ) || '';
 		}
 
 		const product = productsMap.get( parsedToken );
 
-		return product?.name || '';
+		return decodeEntities( product?.name ) || '';
 	};
 
 	return (
@@ -120,7 +126,7 @@ const HandPickedProductsControl = ( {
 				disabled={ ! productsMap.size }
 				displayTransform={ transformTokenIntoProductName }
 				label={ __(
-					'Pick some products',
+					'Hand-picked Products',
 					'woo-gutenberg-products-block'
 				) }
 				onChange={ onTokenChange }
@@ -135,6 +141,7 @@ const HandPickedProductsControl = ( {
 						: selectedProductIds || []
 				}
 				__experimentalExpandOnFocus={ true }
+				__experimentalShowHowTo={ false }
 			/>
 		</ToolsPanelItem>
 	);

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});
 	}
 }