From 678a25ffa1c16b916ae2814281293c50afa8dacd Mon Sep 17 00:00:00 2001 From: Luigi Date: Tue, 3 Oct 2023 14:56:04 +0200 Subject: [PATCH 01/12] Add slide animation --- .../product-gallery-large-image/frontend.tsx | 37 +++++++++++++++---- assets/js/blocks/product-gallery/style.scss | 34 ++++++++++++++--- src/BlockTypes/ProductGalleryLargeImage.php | 16 ++++---- 3 files changed, 67 insertions(+), 20 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index b5d193b8207..416af95c9ac 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -3,6 +3,11 @@ */ import { store as interactivityStore } from '@woocommerce/interactivity'; +/** + * Internal dependencies + */ +import { ProductGallerySelectors } from '../../frontend'; + type Context = { woocommerce: { styles: { @@ -17,19 +22,24 @@ type Context = { type Store = { context: Context; - selectors: typeof productButtonSelectors; + selectors: typeof productButtonSelectors & ProductGallerySelectors; ref: HTMLElement; }; const productButtonSelectors = { woocommerce: { - styles: ( { context }: Store ) => { - const { styles } = context.woocommerce; + productGalleryLargeImage: { + styles: ( { context }: Store ) => { + const { styles } = context.woocommerce; - return Object.entries( styles ).reduce( ( acc, [ key, value ] ) => { - const style = `${ key }:${ value };`; - return acc.length > 0 ? `${ acc } ${ style }` : style; - }, '' ); + return Object.entries( styles ).reduce( + ( acc, [ key, value ] ) => { + const style = `${ key }:${ value };`; + return acc.length > 0 ? `${ acc } ${ style }` : style; + }, + '' + ); + }, }, }, }; @@ -78,5 +88,18 @@ interactivityStore( }, }, }, + effects: { + woocommerce: { + scrollInto: ( store: Store ) => { + if ( store.selectors?.woocommerce?.isSelected( store ) ) { + store.ref.scrollIntoView( { + behavior: 'smooth', + block: 'nearest', + inline: 'center', + } ); + } + }, + }, + }, } ); diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index 126b943eb1e..fb27dbbba69 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -5,6 +5,8 @@ $next-previous: "#{$large-image}-next-previous"; $next-previous-left-off: "#{$next-previous}-left--off"; $next-previous-right-off: "#{$next-previous}-right--off"; $gallery-next-previous-outside-image: "#{$gallery}[data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image)"; +$gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image))"; + $outside-image-offset: 30px; $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); @@ -57,8 +59,28 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); // Restrict the width of the Large Image when the Next/Previous buttons are outside the image. #{$gallery-next-previous-outside-image} & .wc-block-woocommerce-product-gallery-large-image__container { overflow: hidden; - max-width: $outside-image-max-width; margin: 0 auto; + max-width: $outside-image-max-width; + margin-left: 30px; + } + + .wc-block-woocommerce-product-gallery-large-image__container { + flex-shrink: 0; + max-width: 100%; + overflow: hidden; + } + + .wc-block-product-gallery-large-image__container { + display: flex; + overflow-x: hidden; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + } + + #{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container { + max-width: 100%; + overflow: hidden; + margin: unset; } img { @@ -76,10 +98,6 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); &.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom { cursor: zoom-in; } - - &[hidden] { - display: none; - } } .wc-block-product-gallery-large-image__inner-blocks { @@ -95,6 +113,12 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); margin-left: $outside-image-offset; margin-right: $outside-image-offset; } + + // Reset the margin of the inner blocks when the Next/Previous buttons are outside the image. + #{$gallery-next-previous-inside-image} & > * { + margin-left: unset; + margin-right: unset; + } } } diff --git a/src/BlockTypes/ProductGalleryLargeImage.php b/src/BlockTypes/ProductGalleryLargeImage.php index 31062e91c90..5536541bb0d 100644 --- a/src/BlockTypes/ProductGalleryLargeImage.php +++ b/src/BlockTypes/ProductGalleryLargeImage.php @@ -87,11 +87,11 @@ protected function render( $attributes, $content, $block ) { return strtr( '
- {visible_main_image} - {main_images} -
- {content} +
+ {visible_main_image} + {main_images}
+ {content}
', array( '{visible_main_image}' => $visible_main_image, @@ -118,9 +118,9 @@ function( $carry, $key ) use ( $directives ) { */ private function get_main_images_html( $context, $product_id ) { $attributes = array( - 'data-wc-bind--hidden' => '!selectors.woocommerce.isSelected', - 'hidden' => true, - 'class' => 'wc-block-woocommerce-product-gallery-large-image__image', + 'data-wc-bind--style' => 'selectors.woocommerce.productGalleryLargeImage.styles', + 'data-wc-effect' => 'effects.woocommerce.scrollInto', + 'class' => 'wc-block-woocommerce-product-gallery-large-image__image', ); @@ -130,7 +130,7 @@ private function get_main_images_html( $context, $product_id ) { if ( $context['hoverZoom'] ) { $attributes['class'] .= ' wc-block-woocommerce-product-gallery-large-image__image--hoverZoom'; - $attributes['data-wc-bind--style'] = 'selectors.woocommerce.styles'; + $attributes['data-wc-bind--style'] = 'selectors.woocommerce.productGalleryLargeImage.styles'; } $main_images = ProductGalleryUtils::get_product_gallery_images( From 34a36c4b660282bc22a04102fee854fdb2b8e6da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Fri, 6 Oct 2023 10:51:35 +0200 Subject: [PATCH 02/12] Remove placeholder and pagination (#11145) * Add titles to patterns and set the aligment to Wide * Replace product query patterns with product collection ones * Remove pagination and no results query from product query patterns * Add aspect ratio to the product image attributes * Add portrait aspect ratio to product X column and product gallery patterns --- .../blocks/product-elements/image/attributes.ts | 3 +++ .../blocks/product-elements/image/block.tsx | 5 +++++ .../blocks/product-elements/image/types.ts | 2 ++ patterns/product-collection-3-columns.php | 16 +--------------- patterns/product-collection-4-columns.php | 16 +--------------- patterns/product-collection-5-columns.php | 16 +--------------- patterns/product-query-product-gallery.php | 16 +--------------- src/BlockTypes/ProductImage.php | 3 +++ 8 files changed, 17 insertions(+), 60 deletions(-) diff --git a/assets/js/atomic/blocks/product-elements/image/attributes.ts b/assets/js/atomic/blocks/product-elements/image/attributes.ts index 601bd22f37e..2405642245e 100644 --- a/assets/js/atomic/blocks/product-elements/image/attributes.ts +++ b/assets/js/atomic/blocks/product-elements/image/attributes.ts @@ -47,6 +47,9 @@ export const blockAttributes: BlockAttributes = { type: 'string', default: 'cover', }, + aspectRatio: { + type: 'string', + }, }; export default blockAttributes; diff --git a/assets/js/atomic/blocks/product-elements/image/block.tsx b/assets/js/atomic/blocks/product-elements/image/block.tsx index 14adbf2affe..7eb3250d5b6 100644 --- a/assets/js/atomic/blocks/product-elements/image/block.tsx +++ b/assets/js/atomic/blocks/product-elements/image/block.tsx @@ -49,6 +49,7 @@ interface ImageProps { scale: string; width?: string | undefined; height?: string | undefined; + aspectRatio: string | undefined; } const Image = ( { @@ -59,6 +60,7 @@ const Image = ( { width, scale, height, + aspectRatio, }: ImageProps ): JSX.Element => { const { thumbnail, src, srcset, sizes, alt } = image || {}; const imageProps = { @@ -72,6 +74,7 @@ const Image = ( { height, width, objectFit: scale, + aspectRatio, }; return ( @@ -101,6 +104,7 @@ export const Block = ( props: Props ): JSX.Element | null => { height, width, scale, + aspectRatio, ...restProps } = props; const styleProps = useStyleProps( props ); @@ -171,6 +175,7 @@ export const Block = ( props: Props ): JSX.Element | null => { width={ width } height={ height } scale={ scale } + aspectRatio={ aspectRatio } />
diff --git a/assets/js/atomic/blocks/product-elements/image/types.ts b/assets/js/atomic/blocks/product-elements/image/types.ts index 9b56e165ed9..ccd88e86f43 100644 --- a/assets/js/atomic/blocks/product-elements/image/types.ts +++ b/assets/js/atomic/blocks/product-elements/image/types.ts @@ -24,4 +24,6 @@ export interface BlockAttributes { width?: string; // Image scaling method. scale: 'cover' | 'contain' | 'fill'; + // Aspect ratio of the image. + aspectRatio: string; } diff --git a/patterns/product-collection-3-columns.php b/patterns/product-collection-3-columns.php index f0a438a8fd2..d50e3bcc7b6 100644 --- a/patterns/product-collection-3-columns.php +++ b/patterns/product-collection-3-columns.php @@ -18,7 +18,7 @@
- + @@ -26,20 +26,6 @@ - - - - - - - - - - - -

- -
diff --git a/patterns/product-collection-4-columns.php b/patterns/product-collection-4-columns.php index 46179d523b2..78a6be333cd 100644 --- a/patterns/product-collection-4-columns.php +++ b/patterns/product-collection-4-columns.php @@ -18,7 +18,7 @@
- + @@ -26,20 +26,6 @@ - - - - - - - - - - - -

- -
diff --git a/patterns/product-collection-5-columns.php b/patterns/product-collection-5-columns.php index 3b3dd2abdf7..04173211c3f 100644 --- a/patterns/product-collection-5-columns.php +++ b/patterns/product-collection-5-columns.php @@ -18,7 +18,7 @@
- +
@@ -36,20 +36,6 @@
- - - - - - - - - - - -

- -
diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php index a5c692cd404..f0fcda2cebc 100644 --- a/patterns/product-query-product-gallery.php +++ b/patterns/product-query-product-gallery.php @@ -19,7 +19,7 @@
- + @@ -29,20 +29,6 @@ - - - - - - - - - - - -

- -
diff --git a/src/BlockTypes/ProductImage.php b/src/BlockTypes/ProductImage.php index cf28af2cf4e..445111ee16d 100644 --- a/src/BlockTypes/ProductImage.php +++ b/src/BlockTypes/ProductImage.php @@ -158,6 +158,9 @@ private function render_image( $product, $attributes ) { if ( ! empty( $attributes['scale'] ) ) { $image_style .= sprintf( 'object-fit:%s;', $attributes['scale'] ); } + if ( ! empty( $attributes['aspectRatio'] ) ) { + $image_style .= sprintf( 'aspect-ratio:%s;', $attributes['aspectRatio'] ); + } if ( ! $product->get_image_id() ) { // The alt text is left empty on purpose, as it's considered a decorative image. From ea0b1f59c7c454715616681e9ad098398669e361 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 6 Oct 2023 13:57:08 +0200 Subject: [PATCH 03/12] improve animation --- .../product-gallery-large-image/frontend.tsx | 45 ++++++++++++++++++- assets/js/blocks/product-gallery/style.scss | 2 +- 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index 416af95c9ac..0a6c91ee6b4 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -44,6 +44,8 @@ const productButtonSelectors = { }, }; +let isDialogStatusChanged = false; + interactivityStore( // @ts-expect-error: Store function isn't typed. { @@ -91,13 +93,54 @@ interactivityStore( effects: { woocommerce: { scrollInto: ( store: Store ) => { - if ( store.selectors?.woocommerce?.isSelected( store ) ) { + // Scroll to the selected image with a smooth animation. + if ( + store.selectors?.woocommerce?.isSelected( store ) && + store.context.woocommerce.isDialogOpen === + isDialogStatusChanged + ) { store.ref.scrollIntoView( { behavior: 'smooth', block: 'nearest', inline: 'center', } ); } + + // Scroll to the selected image when the dialog is being opened without an animation. + if ( + store.context.woocommerce.isDialogOpen && + store.context.woocommerce.isDialogOpen !== + isDialogStatusChanged && + store.selectors?.woocommerce?.isSelected( store ) && + store.ref.tagName === 'IMG' && + store.ref.closest( 'dialog' ) + ) { + store.ref.scrollIntoView( { + behavior: 'instant', + block: 'nearest', + inline: 'center', + } ); + + isDialogStatusChanged = + store.context.woocommerce.isDialogOpen; + } + + // Scroll to the selected image when the dialog is being closed without an animation. + if ( + ! store.context.woocommerce.isDialogOpen && + store.context.woocommerce.isDialogOpen !== + isDialogStatusChanged && + store.selectors?.woocommerce?.isSelected( store ) && + store.ref.tagName === 'IMG' + ) { + store.ref.scrollIntoView( { + behavior: 'instant', + block: 'nearest', + inline: 'center', + } ); + isDialogStatusChanged = + store.context.woocommerce.isDialogOpen; + } }, }, }, diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index fb27dbbba69..fd39ed2fc77 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -74,7 +74,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); display: flex; overflow-x: hidden; scroll-snap-type: x mandatory; - scroll-behavior: smooth; + scroll-behavior: auto; } #{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container { From c7fb03288acab070a3767480b196d6fda510ae09 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 6 Oct 2023 14:03:20 +0200 Subject: [PATCH 04/12] improve naming --- assets/js/blocks/product-gallery/frontend.tsx | 2 +- .../inner-blocks/product-gallery-large-image/frontend.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/product-gallery/frontend.tsx b/assets/js/blocks/product-gallery/frontend.tsx index 93af417a031..9229af9c841 100644 --- a/assets/js/blocks/product-gallery/frontend.tsx +++ b/assets/js/blocks/product-gallery/frontend.tsx @@ -16,7 +16,7 @@ interface Context { }; } -interface Selectors { +export interface ProductGallerySelectors { woocommerce: { isSelected: ( store: unknown ) => boolean; pagerDotFillOpacity: ( store: SelectorsStore ) => number; diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index 0a6c91ee6b4..55c4519a13b 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -22,11 +22,12 @@ type Context = { type Store = { context: Context; - selectors: typeof productButtonSelectors & ProductGallerySelectors; + selectors: typeof productGalleryLargeImageSelectors & + ProductGallerySelectors; ref: HTMLElement; }; -const productButtonSelectors = { +const productGalleryLargeImageSelectors = { woocommerce: { productGalleryLargeImage: { styles: ( { context }: Store ) => { From aace907540079aef8d9899b2c537963e8fda48e5 Mon Sep 17 00:00:00 2001 From: Luigi Date: Fri, 6 Oct 2023 17:42:45 +0200 Subject: [PATCH 05/12] fix regression --- assets/js/blocks/product-gallery/frontend.tsx | 2 +- .../inner-blocks/product-gallery-large-image/frontend.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/blocks/product-gallery/frontend.tsx b/assets/js/blocks/product-gallery/frontend.tsx index 9229af9c841..11f95696ed1 100644 --- a/assets/js/blocks/product-gallery/frontend.tsx +++ b/assets/js/blocks/product-gallery/frontend.tsx @@ -36,7 +36,7 @@ interface Actions { interface Store { state: State; context: Context; - selectors: Selectors; + selectors: ProductGallerySelectors; actions: Actions; ref?: HTMLElement; } diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index 55c4519a13b..9e8f02ba674 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -50,7 +50,7 @@ let isDialogStatusChanged = false; interactivityStore( // @ts-expect-error: Store function isn't typed. { - selectors: productButtonSelectors, + selectors: productGalleryLargeImageSelectors, actions: { woocommerce: { handleMouseMove: ( { From 69daeaeb81981e091170f87eb1fa014357c952e1 Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 11 Oct 2023 15:12:56 +0200 Subject: [PATCH 06/12] fix css --- assets/js/blocks/product-gallery/style.scss | 11 ++++++----- src/BlockTypes/ProductGalleryLargeImage.php | 17 +++++++++-------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index a5e754194d1..459eaeb4170 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -57,17 +57,17 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); overflow: hidden; // Restrict the width of the Large Image when the Next/Previous buttons are outside the image. - #{$gallery-next-previous-outside-image} & .wc-block-woocommerce-product-gallery-large-image__container { + #{$gallery-next-previous-outside-image} & .wc-block-product-gallery-large-image__image-element { overflow: hidden; margin: 0 auto; max-width: $outside-image-max-width; - margin-left: 30px; } - .wc-block-woocommerce-product-gallery-large-image__container { + .wc-block-product-gallery-large-image__wrapper { flex-shrink: 0; max-width: 100%; overflow: hidden; + width: 100%; } .wc-block-product-gallery-large-image__container { @@ -77,13 +77,13 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); scroll-behavior: auto; } - #{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container { + #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { max-width: 100%; overflow: hidden; margin: unset; } - #{$gallery-next-previous-inside-image} & .wc-block-woocommerce-product-gallery-large-image__container { + #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { overflow: unset; max-width: unset; margin: unset; @@ -95,6 +95,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); margin: 0 auto; z-index: 1; transition: all 0.1s linear; + width: 100%; // Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied. &.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click { diff --git a/src/BlockTypes/ProductGalleryLargeImage.php b/src/BlockTypes/ProductGalleryLargeImage.php index 5536541bb0d..8b126b83e1e 100644 --- a/src/BlockTypes/ProductGalleryLargeImage.php +++ b/src/BlockTypes/ProductGalleryLargeImage.php @@ -88,7 +88,6 @@ protected function render( $attributes, $content, $block ) { return strtr( '
- {visible_main_image} {main_images}
{content} @@ -137,16 +136,18 @@ private function get_main_images_html( $context, $product_id ) { $product_id, 'full', $attributes, - 'wc-block-woocommerce-product-gallery-large-image__container' + 'wc-block-product-gallery-large-image__image-element' ); - $visible_main_image = array_shift( $main_images ); - $visible_main_image_processor = new \WP_HTML_Tag_Processor( $visible_main_image ); - $visible_main_image_processor->next_tag(); - $visible_main_image_processor->remove_attribute( 'hidden' ); - $visible_main_image = $visible_main_image_processor->get_updated_html(); + $main_image_with_wrapper = array_map( + function( $main_image_element ) { + return "
" . $main_image_element . '
'; + }, + $main_images + ); - return array( $visible_main_image, $main_images ); + $visible_main_image = array_shift( $main_images ); + return array( $visible_main_image, $main_image_with_wrapper ); } From 8fe72333fde771e7bca133d7cbf1b6e34ab481bb Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 11 Oct 2023 15:15:46 +0200 Subject: [PATCH 07/12] improve code style --- .../product-gallery-large-image/frontend.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index 9e8f02ba674..84061a47705 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -94,11 +94,14 @@ interactivityStore( effects: { woocommerce: { scrollInto: ( store: Store ) => { + if ( ! store.selectors.woocommerce.isSelected( store ) ) { + return; + } + // Scroll to the selected image with a smooth animation. if ( - store.selectors?.woocommerce?.isSelected( store ) && store.context.woocommerce.isDialogOpen === - isDialogStatusChanged + isDialogStatusChanged ) { store.ref.scrollIntoView( { behavior: 'smooth', @@ -112,7 +115,6 @@ interactivityStore( store.context.woocommerce.isDialogOpen && store.context.woocommerce.isDialogOpen !== isDialogStatusChanged && - store.selectors?.woocommerce?.isSelected( store ) && store.ref.tagName === 'IMG' && store.ref.closest( 'dialog' ) ) { @@ -131,7 +133,6 @@ interactivityStore( ! store.context.woocommerce.isDialogOpen && store.context.woocommerce.isDialogOpen !== isDialogStatusChanged && - store.selectors?.woocommerce?.isSelected( store ) && store.ref.tagName === 'IMG' ) { store.ref.scrollIntoView( { From 7ff36140b4e8c94c24af2b056bab3244a567307b Mon Sep 17 00:00:00 2001 From: Luigi Date: Wed, 11 Oct 2023 15:19:34 +0200 Subject: [PATCH 08/12] remove check on tag image --- .../inner-blocks/product-gallery-large-image/frontend.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index 84061a47705..d22954a07d2 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -115,7 +115,6 @@ interactivityStore( store.context.woocommerce.isDialogOpen && store.context.woocommerce.isDialogOpen !== isDialogStatusChanged && - store.ref.tagName === 'IMG' && store.ref.closest( 'dialog' ) ) { store.ref.scrollIntoView( { @@ -132,8 +131,7 @@ interactivityStore( if ( ! store.context.woocommerce.isDialogOpen && store.context.woocommerce.isDialogOpen !== - isDialogStatusChanged && - store.ref.tagName === 'IMG' + isDialogStatusChanged ) { store.ref.scrollIntoView( { behavior: 'instant', From 05a3eb6f0e85aacafcb1b5b0786cb88227f07d14 Mon Sep 17 00:00:00 2001 From: Luigi Date: Thu, 19 Oct 2023 10:04:19 +0200 Subject: [PATCH 09/12] align image --- assets/js/blocks/product-gallery/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index 459eaeb4170..2773457e93e 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -75,6 +75,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; + align-items: center; } #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { From 18d416e85c6296427d49131a5e6b2572c5b69d40 Mon Sep 17 00:00:00 2001 From: Luigi Date: Thu, 19 Oct 2023 10:35:35 +0200 Subject: [PATCH 10/12] fix crash when zoom is disabled --- .../product-gallery-large-image/frontend.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx index d22954a07d2..c1d0b9140b0 100644 --- a/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx +++ b/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/frontend.tsx @@ -10,12 +10,14 @@ import { ProductGallerySelectors } from '../../frontend'; type Context = { woocommerce: { - styles: { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'transform-origin': string; - transform: string; - transition: string; - }; + styles: + | { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'transform-origin': string; + transform: string; + transition: string; + } + | undefined; isDialogOpen: boolean; }; }; @@ -33,7 +35,7 @@ const productGalleryLargeImageSelectors = { styles: ( { context }: Store ) => { const { styles } = context.woocommerce; - return Object.entries( styles ).reduce( + return Object.entries( styles ?? [] ).reduce( ( acc, [ key, value ] ) => { const style = `${ key }:${ value };`; return acc.length > 0 ? `${ acc } ${ style }` : style; From b6d00880da3071dfeb98fb1086b064df86d6c1fc Mon Sep 17 00:00:00 2001 From: Luigi Date: Thu, 19 Oct 2023 10:36:04 +0200 Subject: [PATCH 11/12] fix E2E tests --- ...rge-image.block_theme.side_effects.spec.ts | 22 ++++++++++--------- ...t-gallery.block_theme.side_effects.spec.ts | 4 +--- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts b/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts index f709eb38fa9..71f347a8de3 100644 --- a/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts +++ b/tests/e2e/tests/product-gallery/inner-blocks/product-gallery-large-image/product-gallery-large-image.block_theme.side_effects.spec.ts @@ -99,9 +99,7 @@ test.describe( `${ blockData.name }`, () => { } ); // img[style] is the selector because the style attribute is Interactivity API. - const imgElement = blockFrontend.locator( - 'img[style]:not([hidden])' - ); + const imgElement = blockFrontend.locator( 'img' ).first(); const style = await imgElement.evaluate( ( el ) => el.style ); await expect( style.transform ).toBe( 'scale(1)' ); @@ -137,14 +135,18 @@ test.describe( `${ blockData.name }`, () => { page: 'frontend', } ); - // img[style] is the selector because the style attribute is added by Interactivity API. In this case, the style attribute should not be added. - const imgElement = blockFrontend.locator( - 'img[style]:not([hidden])' + const imgElement = blockFrontend.locator( 'img' ).first(); + const style = await imgElement.evaluate( ( el ) => el.style ); + + await expect( style.transform ).toBe( '' ); + + await imgElement.hover(); + + const styleOnHover = await imgElement.evaluate( + ( el ) => el.style ); - await expect( imgElement ).toBeHidden(); - await expect( - blockFrontend.locator( 'img:not([hidden])' ) - ).toBeVisible(); + + await expect( styleOnHover.transform ).toBe( '' ); } ); } ); } ); diff --git a/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts b/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts index 909bc39527e..17a58caa4bb 100644 --- a/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts +++ b/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts @@ -34,9 +34,7 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( { export const getVisibleLargeImageId = async ( mainImageBlockLocator: Locator ) => { - const mainImage = mainImageBlockLocator.locator( - 'img:not([hidden])' - ) as Locator; + const mainImage = mainImageBlockLocator.locator( 'img' ).first() as Locator; const mainImageContext = ( await mainImage.getAttribute( 'data-wc-context' From 059217488b095c5604f3b3c950b8020d64c21787 Mon Sep 17 00:00:00 2001 From: Luigi Date: Thu, 19 Oct 2023 12:12:04 +0200 Subject: [PATCH 12/12] improve CSS --- assets/js/blocks/product-gallery/style.scss | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/assets/js/blocks/product-gallery/style.scss b/assets/js/blocks/product-gallery/style.scss index 2773457e93e..3b485211f7b 100644 --- a/assets/js/blocks/product-gallery/style.scss +++ b/assets/js/blocks/product-gallery/style.scss @@ -74,21 +74,18 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); display: flex; overflow-x: hidden; scroll-snap-type: x mandatory; + width: fit-content; + height: fit-content; scroll-behavior: auto; align-items: center; } #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { - max-width: 100%; + width: fit-content; overflow: hidden; - margin: unset; + margin: 0 auto; } - #{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element { - overflow: unset; - max-width: unset; - margin: unset; - } img { display: block; @@ -96,7 +93,7 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset)); margin: 0 auto; z-index: 1; transition: all 0.1s linear; - width: 100%; + width: auto; // Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied. &.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click {