Product Gallery: Add crop, zoom and full-screen settings

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

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { ProductGallerySettingsProps } from '../types';
+
+export const ProductGalleryBlockSettings = ( {
+	attributes,
+	setAttributes,
+}: ProductGallerySettingsProps ) => {
+	const { cropImages, hoverZoom, fullScreenOnClick } = attributes;
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Media Settings', 'woo-gutenberg-products-block' ) }
+			>
+				<ToggleControl
+					label={ __(
+						'Crop images to fit',
+						'woo-gutenberg-products-block'
+					) }
+					help={ __(
+						'Images will be cropped to fit within a square space.',
+						'woo-gutenberg-products-block'
+					) }
+					checked={ cropImages }
+					onChange={ () =>
+						setAttributes( {
+							cropImages: ! cropImages,
+						} )
+					}
+				/>
+				<ToggleControl
+					label={ __(
+						'Zoom while hovering',
+						'woo-gutenberg-products-block'
+					) }
+					help={ __(
+						'While hovering the large image will zoom in by 30%.',
+						'woo-gutenberg-products-block'
+					) }
+					checked={ hoverZoom }
+					onChange={ () =>
+						setAttributes( {
+							hoverZoom: ! hoverZoom,
+						} )
+					}
+				/>
+				<ToggleControl
+					label={ __(
+						'Full-screen when clicked',
+						'woo-gutenberg-products-block'
+					) }
+					help={ __(
+						'Clicking on the large image will open a full-screen gallery experience.',
+						'woo-gutenberg-products-block'
+					) }
+					checked={ fullScreenOnClick }
+					onChange={ () =>
+						setAttributes( {
+							fullScreenOnClick: ! fullScreenOnClick,
+						} )
+					}
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+};

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

@@ -29,6 +29,18 @@
 		"productGalleryClientId": {
 			"type": "string",
 			"default": ""
+		},
+		"cropImages": {
+			"type": "boolean",
+			"default": false
+		},
+		"hoverZoom": {
+			"type": "boolean",
+			"default": false
+		},
+		"fullScreenOnClick": {
+			"type": "boolean",
+			"default": false
 		}
 	}
 }

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

@@ -17,8 +17,12 @@ import {
 	updateGroupBlockType,
 	getInnerBlocksLockAttributes,
 } from './utils';
-import { BlockSettings } from './inner-blocks/product-gallery-thumbnails/block-settings';
-import type { BlockAttributes } from './types';
+import { ProductGalleryThumbnailsBlockSettings } from './inner-blocks/product-gallery-thumbnails/block-settings';
+import { ProductGalleryBlockSettings } from './block-settings/index';
+import type {
+	ProductGalleryThumbnailsBlockAttributes,
+	ProductGalleryBlockAttributes,
+} from './types';
 
 const TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -41,7 +45,9 @@ export const Edit = ( {
 	clientId,
 	attributes,
 	setAttributes,
-}: BlockEditProps< BlockAttributes > ) => {
+}: BlockEditProps<
+	ProductGalleryThumbnailsBlockAttributes & ProductGalleryBlockAttributes
+> ) => {
 	const blockProps = useBlockProps();
 
 	// Update the Group block type when the thumbnailsPosition attribute changes.
@@ -59,7 +65,7 @@ export const Edit = ( {
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
-				<BlockSettings
+				<ProductGalleryThumbnailsBlockSettings
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 					context={ {
@@ -70,6 +76,12 @@ export const Edit = ( {
 					} }
 				/>
 			</InspectorControls>
+			<InspectorControls>
+				<ProductGalleryBlockSettings
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
+			</InspectorControls>
 			<InnerBlocks
 				allowedBlocks={ [
 					'woocommerce/product-gallery-large-image',

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

@@ -30,7 +30,7 @@ import {
  * Internal dependencies
  */
 import { ThumbnailsPosition } from '../constants';
-import type { ThumbnailsSettingProps } from '../../../types';
+import type { ProductGalleryThumbnailsSettingsProps } from '../../../types';
 
 const positionHelp: Record< ThumbnailsPosition, string > = {
 	[ ThumbnailsPosition.OFF ]: __(
@@ -51,7 +51,9 @@ const positionHelp: Record< ThumbnailsPosition, string > = {
 	),
 };
 
-export const BlockSettings = ( { context }: ThumbnailsSettingProps ) => {
+export const ProductGalleryThumbnailsBlockSettings = ( {
+	context,
+}: ProductGalleryThumbnailsSettingsProps ) => {
 	const maxNumberOfThumbnails = 8;
 	const minNumberOfThumbnails = 2;
 	const { productGalleryClientId } = context;

assets/js/blocks/product-gallery/types.ts

@@ -3,28 +3,43 @@
  */
 import { ThumbnailsPosition } from './inner-blocks/product-gallery-thumbnails/constants';
 
-export interface BlockAttributes {
+export interface ProductGalleryBlockAttributes {
+	cropImages?: boolean;
+	hoverZoom?: boolean;
+	fullScreenOnClick?: boolean;
+}
+
+export interface ProductGalleryThumbnailsBlockAttributes {
 	thumbnailsPosition: ThumbnailsPosition;
 	thumbnailsNumberOfThumbnails: number;
 	productGalleryClientId: string;
 }
 
+export interface ProductGalleryBlockEditProps {
+	clientId: string;
+	attributes: ProductGalleryThumbnailsBlockAttributes;
+	setAttributes: (
+		newAttributes: ProductGalleryThumbnailsBlockAttributes
+	) => void;
+}
+
+export interface ProductGallerySettingsProps {
+	attributes: ProductGalleryBlockAttributes;
+	setAttributes: ( attributes: ProductGalleryBlockAttributes ) => void;
+}
+
+export interface ProductGalleryThumbnailsSettingsProps {
+	attributes: ProductGalleryThumbnailsBlockAttributes;
+	setAttributes: (
+		attributes: ProductGalleryThumbnailsBlockAttributes
+	) => void;
+	context: ProductGalleryThumbnailsBlockAttributes;
+}
+
 export interface Context {
 	context: {
 		thumbnailsPosition: ThumbnailsPosition;
 		thumbnailsNumberOfThumbnails: number;
 		productGalleryClientId: string;
 	};
 }
-
-export interface ProductGalleryBlockEditProps {
-	clientId: string;
-	attributes: BlockAttributes;
-	setAttributes: ( newAttributes: BlockAttributes ) => void;
-}
-
-export interface ThumbnailsSettingProps {
-	attributes: BlockAttributes;
-	context: BlockAttributes;
-	setAttributes: ( attributes: BlockAttributes ) => void;
-}