Add Product Gallery Thumbnails block

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

@@ -1,17 +1,34 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
 	"name": "woocommerce/product-gallery",
 	"version": "1.0.0",
 	"title": "Product Gallery",
 	"description": "Showcase your products relevant images and media.",
 	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
 	"supports": {
 		"align": true,
 		"multiple": false
 	},
-	"keywords": [ "WooCommerce" ],
-	"usesContext": [ "postId", "postType", "queryId" ],
 	"textdomain": "woo-gutenberg-products-block",
-
-	"apiVersion": 2,
-	"$schema": "https://schemas.wp.org/trunk/block.json"
+	"providesContext": {
+		"thumbnailsPosition": "thumbnailsPosition",
+		"thumbnailsNumberOfThumbnails": "thumbnailsNumberOfThumbnails",
+		"productGalleryClientId": "productGalleryClientId"
+	},
+	"attributes": {
+		"thumbnailsPosition": {
+			"type": "string",
+			"default": "left"
+		},
+		"thumbnailsNumberOfThumbnails": {
+			"type": "number",
+			"default": 3
+		},
+		"productGalleryClientId": {
+			"type": "string",
+			"default": ""
+		}
+	}
 }

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

@@ -1,25 +1,82 @@
 /**
  * External dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { BlockEditProps, InnerBlockTemplate } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
 
-export const Edit = (): JSX.Element => {
+/**
+ * Internal dependencies
+ */
+import {
+	moveInnerBlocksToPosition,
+	updateGroupBlockType,
+	getInnerBlocksLockAttributes,
+} from './utils';
+import { BlockSettings } from './inner-blocks/product-gallery-thumbnails/block-settings';
+import type { BlockAttributes } from './types';
+
+const TEMPLATE: InnerBlockTemplate[] = [
+	[
+		'core/group',
+		{ layout: { type: 'flex' } },
+		[
+			[
+				'woocommerce/product-gallery-thumbnails',
+				getInnerBlocksLockAttributes( 'lock' ),
+			],
+			[
+				'woocommerce/product-gallery-large-image',
+				getInnerBlocksLockAttributes( 'lock' ),
+			],
+		],
+	],
+];
+
+export const Edit = ( {
+	clientId,
+	attributes,
+	setAttributes,
+}: BlockEditProps< BlockAttributes > ) => {
 	const blockProps = useBlockProps();
 
+	// Update the Group block type when the thumbnailsPosition attribute changes.
+	updateGroupBlockType( attributes, clientId );
+
+	useEffect( () => {
+		setAttributes( {
+			...attributes,
+			productGalleryClientId: 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 ] );
+
 	return (
 		<div { ...blockProps }>
+			<InspectorControls>
+				<BlockSettings
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					context={ {
+						productGalleryClientId: clientId,
+						thumbnailsPosition: attributes.thumbnailsPosition,
+						thumbnailsNumberOfThumbnails:
+							attributes.thumbnailsNumberOfThumbnails,
+					} }
+				/>
+			</InspectorControls>
 			<InnerBlocks
-				allowedBlocks={ [ 'woocommerce/product-gallery-large-image' ] }
-				templateLock={ false }
+				allowedBlocks={ [
+					'woocommerce/product-gallery-large-image',
+					'woocommerce/product-gallery-thumbnails',
+				] }
+				template={ TEMPLATE }
 			/>
 		</div>
 	);
 };
-
-export const Save = (): JSX.Element => {
-	return (
-		<div { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</div>
-	);
-};

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

@@ -7,17 +7,21 @@ import { isExperimentalBuild } from '@woocommerce/block-settings';
 /**
  * Internal dependencies
  */
-import { Edit, Save } from './edit';
+import { Edit } from './edit';
+import { Save } from './save';
 import metadata from './block.json';
 import icon from './icon';
 import './inner-blocks/product-gallery-large-image';
+import './inner-blocks/product-gallery-thumbnails';
 
 if ( isExperimentalBuild() ) {
 	registerBlockSingleProductTemplate( {
 		blockName: metadata.name,
+		// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
 		blockMetadata: metadata,
 		blockSettings: {
 			icon,
+			// @ts-expect-error `edit` can be extended to include other attributes
 			edit: Edit,
 			save: Save,
 			ancestor: [ 'woocommerce/single-product' ],

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/edit.tsx

@@ -5,6 +5,11 @@ import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
 export const Edit = (): JSX.Element => {
 	const blockProps = useBlockProps( {
 		className: 'wc-block-editor-product-gallery_large-image',

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

@@ -0,0 +1,3 @@
+.wc-block-editor-product-gallery-large-image img {
+	max-width: 500px;
+}

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

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import {
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import {
+	thumbnailsPositionLeft,
+	thumbnailsPositionBottom,
+	thumbnailsPositionRight,
+} from '@woocommerce/icons';
+import { useDispatch } from '@wordpress/data';
+import {
+	PanelBody,
+	RangeControl,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore - Ignoring because `__experimentalToggleGroupControlOption` is not yet in the type definitions.
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ThumbnailsPosition } from '../constants';
+import type { ThumbnailsSettingProps } from '../../../types';
+
+const positionHelp: Record< ThumbnailsPosition, string > = {
+	[ ThumbnailsPosition.OFF ]: __(
+		'No thumbnails will be displayed.',
+		'woo-gutenberg-products-block'
+	),
+	[ ThumbnailsPosition.LEFT ]: __(
+		'A strip of small images will appear to the left of the main gallery image.',
+		'woo-gutenberg-products-block'
+	),
+	[ ThumbnailsPosition.BOTTOM ]: __(
+		'A strip of small images will appear below the main gallery image.',
+		'woo-gutenberg-products-block'
+	),
+	[ ThumbnailsPosition.RIGHT ]: __(
+		'A strip of small images will appear to the right of the main gallery image.',
+		'woo-gutenberg-products-block'
+	),
+};
+
+export const BlockSettings = ( { context }: ThumbnailsSettingProps ) => {
+	const maxNumberOfThumbnails = 8;
+	const minNumberOfThumbnails = 2;
+	const { productGalleryClientId } = context;
+	// @ts-expect-error @wordpress/block-editor/store types not provided
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+			>
+				<ToggleGroupControl
+					className="wc-block-editor-product-gallery-thumbnails__position-toggle"
+					isBlock={ true }
+					label={ __( 'Thumbnails', 'woo-gutenberg-products-block' ) }
+					value={ context.thumbnailsPosition }
+					help={
+						positionHelp[
+							context.thumbnailsPosition as ThumbnailsPosition
+						]
+					}
+					onChange={ ( value: string ) =>
+						updateBlockAttributes( productGalleryClientId, {
+							thumbnailsPosition: value,
+						} )
+					}
+				>
+					<ToggleGroupControlOption
+						value={ ThumbnailsPosition.OFF }
+						label={ __( 'Off', 'woo-gutenberg-products-block' ) }
+					/>
+					<ToggleGroupControlOption
+						value={ ThumbnailsPosition.LEFT }
+						label={
+							<Icon size={ 32 } icon={ thumbnailsPositionLeft } />
+						}
+					/>
+					<ToggleGroupControlOption
+						value={ ThumbnailsPosition.BOTTOM }
+						label={
+							<Icon
+								size={ 32 }
+								icon={ thumbnailsPositionBottom }
+							/>
+						}
+					/>
+					<ToggleGroupControlOption
+						value={ ThumbnailsPosition.RIGHT }
+						label={
+							<Icon
+								size={ 32 }
+								icon={ thumbnailsPositionRight }
+							/>
+						}
+					/>
+				</ToggleGroupControl>
+				{ context.thumbnailsPosition !== ThumbnailsPosition.OFF && (
+					<RangeControl
+						label={ __(
+							'Number of Thumbnails',
+							'woo-gutenberg-products-block'
+						) }
+						value={ context.thumbnailsNumberOfThumbnails }
+						onChange={ ( value: number ) =>
+							updateBlockAttributes( productGalleryClientId, {
+								thumbnailsNumberOfThumbnails: value,
+							} )
+						}
+						help={ __(
+							'Choose how many thumbnails (2-8) will display. If more images exist, a “View all” button will display.',
+							'woo-gutenberg-products-block'
+						) }
+						max={ maxNumberOfThumbnails }
+						min={ minNumberOfThumbnails }
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+};

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

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+    "apiVersion": 2,
+    "name": "woocommerce/product-gallery-thumbnails",
+    "version": "1.0.0",
+    "title": "Thumbnails",
+    "description": "Display the Thumbnails of a product.",
+    "category": "woocommerce",
+    "keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "thumbnailsPosition", "thumbnailsNumberOfThumbnails", "productGalleryClientId" ],
+    "textdomain": "woo-gutenberg-products-block",
+	"ancestor": [ "woocommerce/product-gallery" ],
+	"supports": {
+		"spacing": {
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"margin": true
+			}
+		}
+	}
+}

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

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