Product Gallery Thumbnails: Add support for cropping (#11718)

* Product Gallery Thumbnails: Refactor sizing in the editor and the front end

* Product Gallery Thumbnails: Change default vertical alignment to top and better control the width of the thumbnails

* Product Gallery Thumbnails: Fix thumbnails cropping based on the 'Crop images to fit' setting

* Product Gallery Thumbnails: Revert thumbnails styling from #11665

* Product Gallery Thumbnails: Update the default value of the cropImages setting to false

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": {

src/BlockTypes/ProductGalleryThumbnails.php

@@ -37,7 +37,7 @@ protected function get_block_type_style() {
 	 * @return string[]
 	 */
 	protected function get_block_type_uses_context() {
-		return [ 'productGalleryClientId', 'postId', 'thumbnailsNumberOfThumbnails', 'thumbnailsPosition', 'mode' ];
+		return [ 'productGalleryClientId', 'postId', 'thumbnailsNumberOfThumbnails', 'thumbnailsPosition', 'mode', 'cropImages' ];
 	}
 
 	/**
@@ -133,7 +133,9 @@ protected function render( $attributes, $content, $block ) {
 
 			if ( $product ) {
 				$post_thumbnail_id      = $product->get_image_id();
-				$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail' );
+				$crop_images            = $block->context['cropImages'] ?? false;
+				$product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail', $crop_images );
+
 				if ( $product_gallery_images && count( $product_gallery_images ) > 1 && $post_thumbnail_id ) {
 					$html                 = '';
 					$number_of_thumbnails = isset( $block->context['thumbnailsNumberOfThumbnails'] ) ? $block->context['thumbnailsNumberOfThumbnails'] : 3;