Add Product Image Gallery #8233

Add Product Image Gallery

assets/js/atomic/blocks/index.js

@@ -13,3 +13,4 @@ import './product-elements/category-list';
 import './product-elements/tag-list';
 import './product-elements/stock-indicator';
 import './product-elements/add-to-cart';
+import './product-elements/product-image-gallery';

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

@@ -0,0 +1,12 @@
+{
+	"name": "woocommerce/product-image-gallery",
+	"version": "1.0.0",
+	"title": "Product image gallery",
+	"description": "",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

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

@@ -0,0 +1,3 @@
+export const ProductImageGalleryEdit = ( props ) => {
+	return <span>placeholder</span>;
+};

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

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+
+/**
+ * Internal dependencies
+ */
+import { ProductImageGalleryEdit } from './edit';
+
+registerBlockType( metadata, {
+	icon: 'tickets',
+	edit: ProductImageGalleryEdit,
+} );

src/BlockTypes/ProductImageGallery.php

@@ -0,0 +1,49 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\BlockTypes;
+
+/**
+ * ProductImageGallery class.
+ */
+class ProductImageGallery extends AbstractBlock {
+	/**
+	 * Block name.
+	 *
+	 * @var string
+	 */
+	protected $block_name = 'product-image-gallery';
+
+	/**
+	 *  Register the context
+	 *
+	 * @var string
+	 */
+	protected function get_block_type_uses_context() {
+		return [ 'query', 'queryId', 'postId' ];
+	}
+
+	/**
+	 * Include and render the block.
+	 *
+	 * @param array    $attributes Block attributes. Default empty array.
+	 * @param string   $content    Block content. Default empty string.
+	 * @param WP_Block $block      Block instance.
+	 * @return string Rendered block type output.
+	 */
+	protected function render( $attributes, $content, $block ) {
+
+		$post_id = $block->context['postId'];
+		global $product;
+		$product = wc_get_product( $post_id );
+
+		if ( class_exists( 'WC_Frontend_Scripts' ) ) {
+			$frontend_scripts = new \WC_Frontend_Scripts();
+			$frontend_scripts::load_scripts();
+		}
+
+		ob_start();
+		woocommerce_show_product_images();
+		$product_image_gallery_html = ob_get_clean();
+
+		return $product_image_gallery_html;
+	}
+}

src/BlockTypesController.php

@@ -186,6 +186,7 @@ protected function get_block_types() {
 			'ProductCategory',
 			'ProductCategoryList',
 			'ProductImage',
+			'ProductImageGallery',
 			'ProductNew',
 			'ProductOnSale',
 			'ProductPrice',