Add Product Image Gallery block

assets/js/atomic/blocks/product-elements/product-image-gallery/block.json

@@ -1,9 +1,22 @@
 {
 	"name": "woocommerce/product-image-gallery",
 	"version": "1.0.0",
-	"title": "Product image gallery",
-	"description": "",
+	"title": "Product Image Gallery",
+	"icon": "image",
+	"description": "Display the main product images.",
 	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"spacing": {
+			"margin": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true
+		},
+		"__experimentalSelector": ".wp-block-woocommerce-product-image-gallery img"
+	},
 	"keywords": [ "WooCommerce" ],
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"textdomain": "woo-gutenberg-products-block",

assets/js/atomic/blocks/product-elements/product-image-gallery/edit.tsx

@@ -1,21 +1,48 @@
-/**
- * Internal dependencies
- */
-
 /**
  * External dependencies
  */
+import { useBorderProps } from '@woocommerce/base-hooks';
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
 import { isEmptyObject } from '@woocommerce/types';
 import { useBlockProps } from '@wordpress/block-editor';
 import { BlockAttributes } from '@wordpress/blocks';
 
-const Placeholder = () => {
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Placeholder = ( { attributes }: BlockAttributes ) => {
+	const marginProps = useBorderProps( attributes );
+
 	return (
-		<img
-			src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/fallback.svg` }
-			alt="Placeholder"
-		/>
+		<div className="wc-block-editor-product-gallery">
+			<img
+				src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/fallback.svg` }
+				style={ {
+					width: '500px',
+					height: '500px',
+					...marginProps.style,
+				} }
+				alt="Placeholder"
+			/>
+			<div className="wc-block-editor-product-gallery__gallery">
+				{ [ ...Array( 4 ).keys() ].map( ( index ) => {
+					return (
+						<img
+							key={ index }
+							src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/fallback.svg` }
+							style={ {
+								width: '100px',
+								height: '100px',
+								...marginProps.style,
+							} }
+							alt="Placeholder"
+						/>
+					);
+				} ) }
+			</div>
+		</div>
 	);
 };
 
@@ -30,13 +57,13 @@ interface Props {
 	context: Context;
 }
 
-const Edit = ( { context }: Props ) => {
+const Edit = ( { context, attributes }: Props ) => {
 	const blockProps = useBlockProps();
 
 	if ( isEmptyObject( context ) ) {
 		return (
 			<div { ...blockProps }>
-				<Placeholder />
+				<Placeholder attributes={ attributes } />
 			</div>
 		);
 	}

assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

@@ -1,17 +1,26 @@
 /**
  * External dependencies
  */
-import { registerBlockType } from '@wordpress/blocks';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
 import save from './save';
 import metadata from './block.json';
+import './style.scss';
 
-registerBlockType( metadata, {
-	icon: 'tickets',
-	edit,
-	save,
+registerBlockSingleProductTemplate( {
+	registerBlockFn: () => {
+		registerBlockType( metadata, {
+			edit,
+			save,
+		} );
+	},
+	unregisterBlockFn: () => {
+		unregisterBlockType( metadata.name );
+	},
+	blockName: metadata.name,
 } );

assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss

@@ -0,0 +1,11 @@
+.woocommerce-product-gallery {
+	border-radius: inherit;
+
+	.woocommerce-product-gallery__wrapper {
+	  border-radius: inherit;
+
+	  .woocommerce-product-gallery__image {
+		border-radius: inherit;
+	  }
+	}
+  }

assets/js/atomic/utils/index.js

@@ -2,3 +2,4 @@ export * from './get-block-map';
 export * from './create-blocks-from-template';
 export * from './render-parent-block';
 export * from './render-standalone-blocks';
+export * from './register-block-single-product-template';

src/BlockTypes/ProductImageGallery.php

@@ -1,6 +1,9 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
+
 /**
  * ProductImageGallery class.
  */
@@ -21,6 +24,17 @@ protected function get_block_type_uses_context() {
 		return [ 'query', 'queryId', 'postId' ];
 	}
 
+	/**
+	 * Get block attributes.
+	 *
+	 * @return array
+	 */
+	protected function get_block_type_supports() {
+		return array(
+			'__experimentalSelector' => 'img',
+		);
+	}
+
 	/**
 	 * Include and render the block.
 	 *
@@ -40,10 +54,20 @@ protected function render( $attributes, $content, $block ) {
 			$frontend_scripts::load_scripts();
 		}
 
+		$classname          = $attributes['className'] ?? '';
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+
 		ob_start();
 		woocommerce_show_product_images();
 		$product_image_gallery_html = ob_get_clean();
 
-		return $product_image_gallery_html;
+		return sprintf(
+			'<div class="wp-block-woocommerce-product-image-gallery %1$s %2$s" style="%3$s">%4$s</div>',
+			esc_attr( $classes_and_styles['classes'] ),
+			esc_attr( $classname ),
+			esc_attr( $classes_and_styles['styles'] ),
+			$product_image_gallery_html
+		);
+
 	}
 }