Merge branch 'trunk' into contextual-filter

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;

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 }
 				/>
 			</ParentComponent>
 		</div>

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;
 }

assets/js/base/components/country-input/style.scss

@@ -4,4 +4,9 @@
 
 .wc-block-components-country-input {
 	margin-top: em($gap-large);
+
+	// Fixes width in the editor.
+	.components-flex {
+		width: 100%;
+	}
 }

assets/js/base/components/state-input/style.scss

@@ -1,3 +1,8 @@
 .wc-block-components-state-input {
 	margin-top: em($gap-large);
+
+	// Fixes width in the editor.
+	.components-flex {
+		width: 100%;
+	}
 }

assets/js/blocks/product-gallery/frontend.tsx

@@ -11,6 +11,7 @@ interface Context {
 	woocommerce: {
 		selectedImage: string;
 		imageId: string;
+		visibleImagesIds: string[];
 		isDialogOpen: boolean;
 	};
 }
@@ -19,6 +20,7 @@ interface Selectors {
 	woocommerce: {
 		isSelected: ( store: unknown ) => boolean;
 		pagerDotFillOpacity: ( store: SelectorsStore ) => number;
+		selectedImageIndex: ( store: SelectorsStore ) => number;
 		isDialogOpen: ( store: unknown ) => boolean;
 	};
 }
@@ -80,6 +82,33 @@ interactivityApiStore( {
 			handleSelectImage: ( { context }: Store ) => {
 				context.woocommerce.selectedImage = context.woocommerce.imageId;
 			},
+			handleNextImageButtonClick: ( store: Store ) => {
+				const { context } = store;
+				const selectedImageIdIndex =
+					context.woocommerce.visibleImagesIds.indexOf(
+						context.woocommerce.selectedImage
+					);
+				const nextImageIndex = Math.min(
+					selectedImageIdIndex + 1,
+					context.woocommerce.visibleImagesIds.length - 1
+				);
+
+				context.woocommerce.selectedImage =
+					context.woocommerce.visibleImagesIds[ nextImageIndex ];
+			},
+			handlePreviousImageButtonClick: ( store: Store ) => {
+				const { context } = store;
+				const selectedImageIdIndex =
+					context.woocommerce.visibleImagesIds.indexOf(
+						context.woocommerce.selectedImage
+					);
+				const previousImageIndex = Math.max(
+					selectedImageIdIndex - 1,
+					0
+				);
+				context.woocommerce.selectedImage =
+					context.woocommerce.visibleImagesIds[ previousImageIndex ];
+			},
 		},
 	},
 } );

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/editor.scss

@@ -5,9 +5,8 @@
 	width: 100%;
 	position: absolute;
 	height: 50px;
-}
 
-.wc-block-editor-product-gallery-large-image-next-previous--outside-image .wc-block-product-gallery-large-image-next-previous {
-	margin-right: 0;
-	margin-left: 0;
+	svg {
+		z-index: 1;
+	}
 }

assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image/editor.scss

@@ -9,10 +9,3 @@
 		max-width: calc(100% - 60px);
 	}
 }
-
-.wc-block-product-gallery-large-image__inner-blocks {
-	.wc-block-editor-product-gallery-large-image-next-previous--outside-image & > * {
-		margin-left: 30px;
-		margin-right: 30px;
-	}
-}

assets/js/blocks/product-gallery/style.scss

@@ -107,9 +107,13 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 	width: 100%;
 	height: 100%;
 
-	svg {
+	button {
+		cursor: pointer;
 		z-index: 3;
 		pointer-events: all;
+		padding: 0;
+		border: none;
+		background: none;
 	}
 
 	.is-vertically-aligned-top {
@@ -215,4 +219,3 @@ $outside-image-max-width: calc(100% - (2 * $outside-image-offset));
 
 	}
 }
-

assets/js/blocks/single-product/edit/index.tsx

@@ -2,18 +2,19 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { Placeholder, Button, PanelBody } from '@wordpress/components';
 import { withProduct } from '@woocommerce/block-hocs';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import EditProductLink from '@woocommerce/editor-components/edit-product-link';
-import { singleProductBlockPreview } from '@woocommerce/resource-previews';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { ProductResponseItem } from '@woocommerce/types';
 import ErrorPlaceholder, {
 	ErrorObject,
 } from '@woocommerce/editor-components/error-placeholder';
 
+import { PRODUCTS_STORE_NAME, Product } from '@woocommerce/data';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -52,9 +53,29 @@ const Editor = ( {
 	const [ isEditing, setIsEditing ] = useState( ! productId );
 	const blockProps = useBlockProps();
 
-	if ( isPreview ) {
-		return singleProductBlockPreview;
-	}
+	const productPreview = useSelect( ( select ) => {
+		if ( ! isPreview ) {
+			return null;
+		}
+		return select( PRODUCTS_STORE_NAME ).getProducts< Array< Product > >( {
+			per_page: 1,
+		} );
+	} );
+
+	useEffect( () => {
+		const productPreviewId = productPreview
+			? productPreview[ 0 ]?.id
+			: null;
+		if ( ! productPreviewId ) {
+			return;
+		}
+
+		setAttributes( {
+			...attributes,
+			productId: productPreviewId,
+		} );
+		setIsEditing( false );
+	}, [ attributes, productPreview, setAttributes ] );
 
 	if ( error ) {
 		return (

packages/checkout/components/text-input/validated-text-input.tsx

@@ -166,6 +166,8 @@ const ValidatedTextInput = forwardRef<
 
 				if ( formattedValue !== value ) {
 					onChange( formattedValue );
+				} else {
+					validateInput( true );
 				}
 			}
 		}, [ validateInput, customFormatter, value, previousValue, onChange ] );

patterns/featured-category-triple.php

@@ -14,17 +14,17 @@
 $image3 = PatternsHelper::get_image_url( $images, 2, 'images/pattern-placeholders/dish-food-baking-dessert-bread-bakery.png' );
 ?>
 
-<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"}}}} -->
-<div class="wp-block-columns alignwide">
+<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"},"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
+<div class="wp-block-columns alignwide" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","isDark":false,"className":"has-white-color"} -->
 		<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-white-color">
 			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
 			<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 1 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
-				<!-- wp:heading {"level":4} -->
-				<h4 class="wp-block-heading"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h4>
+				<!-- wp:heading {"textAlign":"center","level":4} -->
+				<h4 class="wp-block-heading has-text-align-center"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h4>
 				<!-- /wp:heading -->
 				<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
 				<p class="has-text-align-center has-link-color" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">
@@ -44,8 +44,8 @@
 			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
 			<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 2 out of 3.', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image2 ); ?>" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
-				<!-- wp:heading {"level":4} -->
-				<h4 class="wp-block-heading"><?php echo esc_html( $content['titles'][1]['default'] ); ?></h4>
+				<!-- wp:heading {"textAlign":"center","level":4} -->
+				<h4 class="wp-block-heading has-text-align-center "><?php echo esc_html( $content['titles'][1]['default'] ); ?></h4>
 				<!-- /wp:heading -->
 				<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
 				<p class="has-text-align-center has-link-color" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">
@@ -65,8 +65,8 @@
 			<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
 			<img class="wp-block-cover__image-background wp-image-1" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased in featured categories banner. 3 out of 3', 'woo-gutenberg-products-block' ); ?>" src="<?php echo esc_url( $image3 ); ?>" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
-				<!-- wp:heading {"level":4} -->
-				<h4 class="wp-block-heading"><?php echo esc_html( $content['titles'][2]['default'] ); ?></h4>
+				<!-- wp:heading {"textAlign":"center","level":4} -->
+				<h4 class="wp-block-heading has-text-align-center"><?php echo esc_html( $content['titles'][2]['default'] ); ?></h4>
 				<!-- /wp:heading -->
 				<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}}} -->
 				<p class="has-text-align-center has-link-color" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">

patterns/just-arrived-full-hero.php

@@ -7,10 +7,15 @@
 
 use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
 $content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/just-arrived-full-hero' );
+$images  = PatternsHelper::get_pattern_images( 'woocommerce-blocks/just-arrived-full-hero' );
+
+$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' );
 ?>
-<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"contentPosition":"center right","isDark":false,"align":"wide","style":{"spacing":{"padding":{"right":"4em"}}}} -->
-<div class="wp-block-cover alignwide is-light has-custom-content-position is-position-center-right" style="padding-right:4em">
+
+<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":0,"minHeight":739,"contentPosition":"center right","isDark":false,"align":"wide","style":{"spacing":{"padding":{"right":"4em"}}}} -->
+<div class="wp-block-cover alignwide is-light has-custom-content-position is-position-center-right" style="padding-right:4em;min-height:739px">
 	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
+	<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:group {"layout":{"type":"constrained"}} -->
 		<div class="wp-block-group">
@@ -26,7 +31,7 @@
 			<div class="wp-block-buttons">
 				<!-- wp:button -->
 				<div class="wp-block-button">
-					<a class="wp-block-button__link wp-element-button"><?php echo esc_html( $content['buttons'][0]['default'] ); ?></a>
+					<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>"><?php echo esc_html( $content['buttons'][0]['default'] ); ?></a>
 				</div>
 				<!-- /wp:button -->
 			</div>

patterns/product-collection-3-columns.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Title: Product Collection 3 Columns
+ * Slug: woocommerce-blocks/product-collection-3-columns
+ * Categories: WooCommerce
+ */
+use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;
+
+$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/product-collection-3-columns' );
+?>
+
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+	<!-- wp:heading {"level":3,"align":"wide"} -->
+	<h3 class="wp-block-heading alignwide"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h3>
+	<!-- /wp:heading -->
+
+	<!-- wp:woocommerce/product-collection {"query":{"perPage":3,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":{},"parents":[],"isProductCollectionBlock":true,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","outofstock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[]},"tagName":"div","displayLayout":{"type":"flex","columns":3},"align":"wide"} -->
+	<div class="wp-block-woocommerce-product-collection alignwide">
+		<!-- wp:woocommerce/product-template -->
+		<!-- wp:woocommerce/product-image {"aspectRatio":"3/5","imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
+
+		<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"textAlign":"center"} /-->
+
+		<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
+
+		<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+		<!-- /wp:woocommerce/product-template -->
+	</div>
+	<!-- /wp:woocommerce/product-collection -->
+</div>
+<!-- /wp:group -->