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.