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 @@