From b13e0ac95642124e80f2d092acf5cf7b0212c270 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Wed, 8 Nov 2023 03:28:50 +0100 Subject: [PATCH 1/5] Product Gallery Thumbnails: Refactor sizing in the editor and the front end --- .../product-gallery-thumbnails/edit.tsx | 12 ++++--- .../product-gallery-thumbnails/editor.scss | 26 +++++++-------- assets/js/blocks/product-gallery/style.scss | 33 ++++++++++++++++--- src/BlockTypes/ProductGalleryThumbnails.php | 2 +- 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx index d62da00ad1a..ad83749f77a 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx @@ -40,11 +40,15 @@ export const Edit = ( { attributes, setAttributes, context }: EditProps ) => { ...Array( context.thumbnailsNumberOfThumbnails ).keys(), ].map( ( index ) => { return ( - Placeholder + > + Placeholder + ); } ) } diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss index 006c477d7f1..bc568d82802 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss @@ -1,17 +1,17 @@ -.wc-block-product-gallery-thumbnails { - width: fit-content; - .wc-block-editor-product-gallery-thumbnails { - display: flex; - flex-flow: column nowrap; +$thumbnails: ".wc-block-editor-product-gallery-thumbnails"; - &.wc-block-editor-product-gallery-thumbnails--bottom { - flex-flow: row nowrap; - } +// Thumbnails +#{$thumbnails} { + display: flex; - img { - width: 100px; - height: 100px; - margin: 5px; - } + &.wc-block-editor-product-gallery-thumbnails--bottom { + flex-direction: row; + gap: 0 15px; + } + + &:not(.wc-block-editor-product-gallery-thumbnails--bottom) { + flex-direction: column; + gap: 15px 0; + min-width: clamp(50px, 20%, 100%); } } diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index 6d19db24f3c..347f3fff63c 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -10,6 +10,7 @@ $gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-button $outside-image-offset: 30px; $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); +$thumbnails-gap: 15px; // Product Gallery #{$gallery} { @@ -232,21 +233,43 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); // Thumbnails #{$thumbnails} { + display: flex; + img { cursor: pointer; + height: auto; + width: auto; + max-width: 100%; } - .is-vertical & { - display: flex; + #{$gallery}[data-thumbnails-position='bottom'] & { flex-direction: row; + gap: 0 15px; + } + + #{$gallery}:not([data-thumbnails-position='bottom']) & { + flex-direction: column; + gap: 15px 0; } .wc-block-product-gallery-thumbnails__thumbnail { - width: 100px; - height: 100px; - margin: 5px; + border: 1px solid rgba($color: #000, $alpha: 0.1); + max-width: 100%; + height: auto; + width: auto; + display: flex; + justify-content: center; + align-items: center; + aspect-ratio: 1 / 1; position: relative; + flex-basis: 0; + flex-grow: 1; + &::before { + content: ""; + display: block; + padding-top: 100%; + } } .wc-block-product-gallery-thumbnails__thumbnail__overlay { diff --git a/src/BlockTypes/ProductGalleryThumbnails.php b/src/BlockTypes/ProductGalleryThumbnails.php index 2e82ad1fe35..3159a519481 100644 --- a/src/BlockTypes/ProductGalleryThumbnails.php +++ b/src/BlockTypes/ProductGalleryThumbnails.php @@ -133,7 +133,7 @@ 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, 'thumbnail', array(), 'wc-block-product-gallery-thumbnails__thumbnail' ); + $product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail' ); if ( $product_gallery_images && $post_thumbnail_id ) { $html = ''; $number_of_thumbnails = isset( $block->context['thumbnailsNumberOfThumbnails'] ) ? $block->context['thumbnailsNumberOfThumbnails'] : 3; From 76620aa92dbc166a4febb4328ff3af3440d41d71 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Wed, 8 Nov 2023 11:43:11 +0100 Subject: [PATCH 2/5] Product Gallery Thumbnails: Change default vertical alignment to top and better control the width of the thumbnails --- assets/js/blocks/product-gallery/edit.tsx | 8 +++++++- .../inner-blocks/product-gallery-thumbnails/editor.scss | 6 ++++-- assets/js/blocks/product-gallery/style.scss | 1 + 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/product-gallery/edit.tsx b/assets/js/blocks/product-gallery/edit.tsx index 9264f5b07ec..3d86f6bc600 100644 --- a/assets/js/blocks/product-gallery/edit.tsx +++ b/assets/js/blocks/product-gallery/edit.tsx @@ -25,7 +25,13 @@ import type { ProductGalleryAttributes } from './types'; const TEMPLATE: InnerBlockTemplate[] = [ [ 'core/group', - { layout: { type: 'flex', flexWrap: 'nowrap' } }, + { + layout: { + type: 'flex', + flexWrap: 'nowrap', + verticalAlignment: 'top', + }, + }, [ [ 'woocommerce/product-gallery-thumbnails', diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss index bc568d82802..c5c00ae3732 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss @@ -1,6 +1,5 @@ $thumbnails: ".wc-block-editor-product-gallery-thumbnails"; -// Thumbnails #{$thumbnails} { display: flex; @@ -12,6 +11,9 @@ $thumbnails: ".wc-block-editor-product-gallery-thumbnails"; &:not(.wc-block-editor-product-gallery-thumbnails--bottom) { flex-direction: column; gap: 15px 0; - min-width: clamp(50px, 20%, 100%); } } + +.wc-block-product-gallery-thumbnails { + flex-basis: 30%; +} diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index 347f3fff63c..c2bbde6208a 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -250,6 +250,7 @@ $thumbnails-gap: 15px; #{$gallery}:not([data-thumbnails-position='bottom']) & { flex-direction: column; gap: 15px 0; + min-width: clamp(50px, 20%, 100%); } .wc-block-product-gallery-thumbnails__thumbnail { From 7b3b823bad692763aa7f0de23fb30e05e78e3c10 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 9 Nov 2023 16:49:27 +0100 Subject: [PATCH 3/5] Product Gallery Thumbnails: Fix thumbnails cropping based on the 'Crop images to fit' setting --- .../inner-blocks/product-gallery-thumbnails/block.json | 2 +- src/BlockTypes/ProductGalleryThumbnails.php | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json index 4cb598b27f2..a4768bd8f66 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block.json +++ b/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": { diff --git a/src/BlockTypes/ProductGalleryThumbnails.php b/src/BlockTypes/ProductGalleryThumbnails.php index 3159a519481..4fa26b3165d 100644 --- a/src/BlockTypes/ProductGalleryThumbnails.php +++ b/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'] ?? ''; + $product_gallery_images = ProductGalleryUtils::get_product_gallery_images( $post_id, 'full', array(), 'wc-block-product-gallery-thumbnails__thumbnail', $crop_images ); + if ( $product_gallery_images && $post_thumbnail_id ) { $html = ''; $number_of_thumbnails = isset( $block->context['thumbnailsNumberOfThumbnails'] ) ? $block->context['thumbnailsNumberOfThumbnails'] : 3; From 3bd9afa0de0cb16375dad0eae870477f413b94c4 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 10 Nov 2023 09:15:10 +0100 Subject: [PATCH 4/5] Product Gallery Thumbnails: Revert thumbnails styling from #11665 --- assets/js/blocks/product-gallery/edit.tsx | 8 +---- .../product-gallery-thumbnails/edit.tsx | 12 +++---- .../product-gallery-thumbnails/editor.scss | 28 +++++++-------- assets/js/blocks/product-gallery/style.scss | 34 +++---------------- 4 files changed, 23 insertions(+), 59 deletions(-) diff --git a/assets/js/blocks/product-gallery/edit.tsx b/assets/js/blocks/product-gallery/edit.tsx index 3d86f6bc600..9264f5b07ec 100644 --- a/assets/js/blocks/product-gallery/edit.tsx +++ b/assets/js/blocks/product-gallery/edit.tsx @@ -25,13 +25,7 @@ import type { ProductGalleryAttributes } from './types'; const TEMPLATE: InnerBlockTemplate[] = [ [ 'core/group', - { - layout: { - type: 'flex', - flexWrap: 'nowrap', - verticalAlignment: 'top', - }, - }, + { layout: { type: 'flex', flexWrap: 'nowrap' } }, [ [ 'woocommerce/product-gallery-thumbnails', diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx index ad83749f77a..d62da00ad1a 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/edit.tsx @@ -40,15 +40,11 @@ export const Edit = ( { attributes, setAttributes, context }: EditProps ) => { ...Array( context.thumbnailsNumberOfThumbnails ).keys(), ].map( ( index ) => { return ( -
- Placeholder -
+ src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` } + alt="Placeholder" + /> ); } ) } diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss index c5c00ae3732..006c477d7f1 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-thumbnails/editor.scss @@ -1,19 +1,17 @@ -$thumbnails: ".wc-block-editor-product-gallery-thumbnails"; - -#{$thumbnails} { - display: flex; +.wc-block-product-gallery-thumbnails { + width: fit-content; + .wc-block-editor-product-gallery-thumbnails { + display: flex; + flex-flow: column nowrap; - &.wc-block-editor-product-gallery-thumbnails--bottom { - flex-direction: row; - gap: 0 15px; - } + &.wc-block-editor-product-gallery-thumbnails--bottom { + flex-flow: row nowrap; + } - &:not(.wc-block-editor-product-gallery-thumbnails--bottom) { - flex-direction: column; - gap: 15px 0; + img { + width: 100px; + height: 100px; + margin: 5px; + } } } - -.wc-block-product-gallery-thumbnails { - flex-basis: 30%; -} diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index c2bbde6208a..6d19db24f3c 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -10,7 +10,6 @@ $gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-button $outside-image-offset: 30px; $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); -$thumbnails-gap: 15px; // Product Gallery #{$gallery} { @@ -233,44 +232,21 @@ $thumbnails-gap: 15px; // Thumbnails #{$thumbnails} { - display: flex; - img { cursor: pointer; - height: auto; - width: auto; - max-width: 100%; } - #{$gallery}[data-thumbnails-position='bottom'] & { + .is-vertical & { + display: flex; flex-direction: row; - gap: 0 15px; - } - - #{$gallery}:not([data-thumbnails-position='bottom']) & { - flex-direction: column; - gap: 15px 0; - min-width: clamp(50px, 20%, 100%); } .wc-block-product-gallery-thumbnails__thumbnail { - border: 1px solid rgba($color: #000, $alpha: 0.1); - max-width: 100%; - height: auto; - width: auto; - display: flex; - justify-content: center; - align-items: center; - aspect-ratio: 1 / 1; + width: 100px; + height: 100px; + margin: 5px; position: relative; - flex-basis: 0; - flex-grow: 1; - &::before { - content: ""; - display: block; - padding-top: 100%; - } } .wc-block-product-gallery-thumbnails__thumbnail__overlay { From 35e85c00581a0e457705c67c87399115d1e32791 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Thu, 23 Nov 2023 18:06:05 +0100 Subject: [PATCH 5/5] Product Gallery Thumbnails: Update the default value of the cropImages setting to false --- src/BlockTypes/ProductGalleryThumbnails.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BlockTypes/ProductGalleryThumbnails.php b/src/BlockTypes/ProductGalleryThumbnails.php index 4fa26b3165d..2bc26ef9858 100644 --- a/src/BlockTypes/ProductGalleryThumbnails.php +++ b/src/BlockTypes/ProductGalleryThumbnails.php @@ -133,7 +133,7 @@ protected function render( $attributes, $content, $block ) { if ( $product ) { $post_thumbnail_id = $product->get_image_id(); - $crop_images = $block->context['cropImages'] ?? ''; + $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 && $post_thumbnail_id ) {