Merge branch 'trunk' into 9331-with-gutenberg-trunk-the-images-arent-…

…loaded-on-the-site-editor

assets/js/atomic/blocks/product-elements/price/block.tsx

@@ -41,9 +41,11 @@ interface PriceProps {
 
 export const Block = ( props: Props ): JSX.Element | null => {
 	const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
-	const { parentClassName } = useInnerBlockLayoutContext();
+	const { parentName, parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
+	const isDescendentOfAllProductsBlock =
+		parentName === 'woocommerce/all-products';
 	const colorProps = useColorProps( props );
 	const spacingProps = useSpacingProps( props );
 	const typographyProps = useTypographyProps( props );
@@ -59,9 +61,17 @@ export const Block = ( props: Props ): JSX.Element | null => {
 	);
 
 	if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
-		return (
+		const productPriceComponent = (
 			<ProductPrice align={ textAlign } className={ wrapperClassName } />
 		);
+		if ( isDescendentOfAllProductsBlock ) {
+			return (
+				<div className="wp-block-woocommerce-product-price">
+					{ productPriceComponent }
+				</div>
+			);
+		}
+		return productPriceComponent;
 	}
 
 	const style = {
@@ -83,7 +93,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
 	} );
 
-	return (
+	const productPriceComponent = (
 		<ProductPrice
 			align={ textAlign }
 			className={ wrapperClassName }
@@ -112,6 +122,14 @@ export const Block = ( props: Props ): JSX.Element | null => {
 			spacingStyle={ spacingStyle }
 		/>
 	);
+	if ( isDescendentOfAllProductsBlock ) {
+		return (
+			<div className="wp-block-woocommerce-product-price">
+				{ productPriceComponent }
+			</div>
+		);
+	}
+	return productPriceComponent;
 };
 
 export default ( props: Props ) => {

assets/js/atomic/blocks/product-elements/price/supports.ts

@@ -27,7 +27,8 @@ export const supports = {
 			__experimentalSkipSerialization: true,
 			__experimentalLetterSpacing: true,
 		},
-		__experimentalSelector: '.wc-block-components-product-price',
+		__experimentalSelector:
+			'.wp-block-woocommerce-product-price .wc-block-components-product-price',
 	} ),
 	...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
 		spacing: {

assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -45,13 +45,15 @@ const Block = ( {
 		setShippingAddress,
 		setBillingAddress,
 		shippingAddress,
+		billingAddress,
 		setShippingPhone,
 		useShippingAsBilling,
 		setUseShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
 	const { isEditor } = useEditorContext();
 
+	const { email } = billingAddress;
 	// This is used to track whether the "Use shipping as billing" checkbox was checked on first load and if we synced
 	// the shipping address to the billing address if it was. This is not used on further toggles of the checkbox.
 	const [ addressesSynced, setAddressesSynced ] = useState( false );
@@ -65,20 +67,25 @@ const Block = ( {
 
 	// Run this on first render to ensure addresses sync if needed, there is no need to re-run this when toggling the
 	// checkbox.
-	useEffect( () => {
-		if ( addressesSynced ) {
-			return;
-		}
-		if ( useShippingAsBilling ) {
-			setBillingAddress( shippingAddress );
-		}
-		setAddressesSynced( true );
-	}, [
-		addressesSynced,
-		setBillingAddress,
-		shippingAddress,
-		useShippingAsBilling,
-	] );
+	useEffect(
+		() => {
+			if ( addressesSynced ) {
+				return;
+			}
+			if ( useShippingAsBilling ) {
+				setBillingAddress( { ...shippingAddress, email } );
+			}
+			setAddressesSynced( true );
+		},
+		// Skip the `email` dependency since we don't want to re-run if that changes, but we do want to sync it on first render.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[
+			addressesSynced,
+			setBillingAddress,
+			shippingAddress,
+			useShippingAsBilling,
+		]
+	);
 
 	const addressFieldsConfig = useMemo( () => {
 		return {
@@ -111,7 +118,7 @@ const Block = ( {
 					onChange={ ( values: Partial< ShippingAddress > ) => {
 						setShippingAddress( values );
 						if ( useShippingAsBilling ) {
-							setBillingAddress( values );
+							setBillingAddress( { ...values, email } );
 						}
 						dispatchCheckoutEvent( 'set-shipping-address' );
 					} }

patterns/featured-category-cover-image.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Title: Featured Category Cover Image
+ * Slug: woocommerce-blocks/featured-category-cover-image
+ * Categories: WooCommerce
+ */
+?>
+<?php echo '<!-- wp:cover {"url":"' . esc_url( plugins_url() ) . '/woocommerce-blocks/images/pattern-placeholders/product-apparel-1.png","id":1,"dimRatio":0,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"3.38em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->'; ?>
+<div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:3.38em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em"><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="" src="<?php echo esc_url( plugins_url() ) . '/woocommerce-blocks/images/pattern-placeholders/product-apparel-1.png'; ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
+	<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"0","fontSize":"2.2em"}}} -->
+	<p class="has-text-align-left" style="font-size:2.2em;line-height:0"><strong>100% natural denim</strong></p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:paragraph {"style":{"typography":{"lineHeight":"3"}}} -->
+	<p style="line-height:3">Only the finest goes into our products. You deserve it.</p>
+	<!-- /wp:paragraph -->
+
+	<!-- wp:buttons -->
+	<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"foreground","style":{"border":{"width":"0px","style":"none"}},"className":"is-style-fill"} -->
+		<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-foreground-color has-background-background-color has-text-color has-background wp-element-button" style="border-style:none;border-width:0px">Shop jeans</a></div>
+		<!-- /wp:button --></div>
+	<!-- /wp:buttons --></div>
+</div>
+<!-- /wp:cover -->

patterns/hero-product-3-split.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * Title: Hero Product 3 Split
+ * Slug: woocommerce-blocks/hero-product-3-split
+ * Categories: WooCommerce
+ */
+?>
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":{"top":"0","left":"0"}}}} -->
+<div class="wp-block-columns alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
+	<!-- wp:column {"width":"66.66%"} -->
+	<div class="wp-block-column" style="flex-basis:66.66%">
+		<!-- wp:media-text {"mediaPosition":"right","mediaId":3800,"mediaLink":"https://store.local/p/image/","mediaType":"image","style":{"color":{"background":"#000000","text":"#ffffff"}}} -->
+		<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile has-text-color has-background" style="color:#ffffff;background-color:#000000">
+			<div class="wp-block-media-text__content">
+				<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","left":"20px","right":"20px"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+				<div class="wp-block-group" style="padding-top:0;padding-right:20px;padding-left:20px">
+					<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"large"} -->
+					<h2 class="wp-block-heading has-large-font-size" style="font-style:normal;font-weight:700">New in: 3-in-1 parka</h2>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph {"fontSize":"small"} -->
+					<p class="has-small-font-size">With high-quality materials and expert craftsmanship, our products are built to last and exceed your expectations.</p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:buttons -->
+					<div class="wp-block-buttons">
+						<!-- wp:button {"backgroundColor":"background","textColor":"foreground"} -->
+						<div class="wp-block-button">
+							<a class="wp-block-button__link has-foreground-color has-background-background-color has-text-color has-background wp-element-button">Shop now</a>
+						</div>
+						<!-- /wp:button -->
+					</div>
+					<!-- /wp:buttons -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<figure class="wp-block-media-text__media">
+				<img src="<?php echo esc_url( plugins_url() ); ?>/woocommerce-blocks/images/pattern-placeholders/product-apparel-4.jpg" alt="" class="wp-image-3800 size-full" />
+			</figure>
+		</div>
+		<!-- /wp:media-text -->
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"verticalAlignment":"center","width":"25%","style":{"spacing":{"padding":{"top":"40px","right":"40px","bottom":"40px","left":"40px"}}}} -->
+	<div class="wp-block-column is-vertically-aligned-center" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;flex-basis:25%">
+		<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+		<h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Waterproof Membrane</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} -->
+		<p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">Never worry about the weather again. Keep yourself dry, warm, and looking stylish.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:separator {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"className":"is-style-wide"} -->
+		<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:20px;margin-bottom:20px" />
+		<!-- /wp:separator -->
+
+		<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+		<h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Expert Craftsmanship</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} -->
+		<p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">Our products are made with expert craftsmanship and attention to detail, ensuring that every stitch and seam is perfect.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:separator {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"className":"is-style-wide"} -->
+		<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:20px;margin-bottom:20px" />
+		<!-- /wp:separator -->
+
+		<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+		<h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Durable Fabric</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} -->
+		<p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">We use only the highest-quality materials in our products, ensuring that they look great and last for years to come.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:separator {"style":{"spacing":{"margin":{"top":"20px","bottom":"20px"}}},"className":"is-style-wide"} -->
+		<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:20px;margin-bottom:20px" />
+		<!-- /wp:separator -->
+
+		<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"15px"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+		<h2 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-size:15px;font-style:normal;font-weight:700">Sustainable Dyes</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"},"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}}} -->
+		<p style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0;font-size:12px">From bold prints and colors to intricate details and textures, our products are a perfect combination of style and function.</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:column -->
+</div>
+<!-- /wp:columns -->

patterns/hero-product-split.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Hero Product - Split
+ * Slug: woocommerce-blocks/hero-product-split
+ * Categories: WooCommerce
+ */
+?>
+
+<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaType":"image","mediaSizeSlug":"full","imageFill":false,"backgroundColor":"contrast","textColor":"base"} -->
+<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile has-base-color has-contrast-background-color has-text-color has-background">
+	<div class="wp-block-media-text__content"><!-- wp:heading -->
+		<h2 class="wp-block-heading">Get cozy this fall with<br>flannel shirts</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:buttons {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
+		<div class="wp-block-buttons" style="margin-bottom:var(--wp--preset--spacing--40)">
+			<!-- wp:button -->
+			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Shop now</a></div>
+			<!-- /wp:button -->
+		</div>
+		<!-- /wp:buttons -->
+	</div>
+
+	<figure class="wp-block-media-text__media">
+		<img src="<?php echo esc_url( plugins_url() ); ?>/woocommerce-blocks/images/pattern-placeholders/hero-product-split.webp" alt="Woman in red, black, and white plaid hoodie." />
+	</figure>
+</div>
+<!-- /wp:media-text -->

src/BlockTemplatesController.php

@@ -116,7 +116,7 @@ public function get_block_template_fallback( $template, $id, $template_type ) {
 			return null;
 		}
 
-		if ( count( $posts ) > 0 ) {
+		if ( count( $posts ) > 0 && 'archive-product' === $posts[0]->post_name ) {
 			$template = _build_block_template_result_from_post( $posts[0] );
 
 			if ( ! is_wp_error( $template ) ) {

src/BlockTypes/ProductPrice.php

@@ -42,7 +42,7 @@ protected function get_block_type_supports() {
 				'__experimentalFontWeight' => true,
 				'__experimentalFontStyle'  => true,
 			),
-			'__experimentalSelector' => '.wc-block-components-product-price',
+			'__experimentalSelector' => '.wp-block-woocommerce-product-price .wc-block-components-product-price',
 		);
 	}
 
@@ -86,9 +86,9 @@ protected function render( $attributes, $content, $block ) {
 			$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
 
 			return sprintf(
-				'<div class="wc-block-components-product-price wc-block-grid__product-price %1$s %2$s" style="%3$s">
+				'<div class="wp-block-woocommerce-product-price"><div class="wc-block-components-product-price wc-block-grid__product-price %1$s %2$s" style="%3$s">
 					%4$s
-				</div>',
+				</div></div>',
 				esc_attr( $text_align_styles_and_classes['class'] ?? '' ),
 				esc_attr( $styles_and_classes['classes'] ),
 				esc_attr( $styles_and_classes['styles'] ?? '' ),

src/BlockTypes/SingleProduct.php

@@ -50,7 +50,7 @@ protected function initialize() {
 	 * @return string Rendered block output.
 	 */
 	protected function render( $attributes, $content, $block ) {
-		$classname = $attributes['className'] ?? '';
+		$classname          = $attributes['className'] ?? '';
 		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classname ) );
 
 		$html = sprintf(
@@ -75,7 +75,7 @@ protected function render( $attributes, $content, $block ) {
 	 * @return array Updated block context.
 	 */
 	public function update_context( $context, $block, $parent_block ) {
-		if ( 'woocommerce/single-product' == $block['blockName']
+		if ( 'woocommerce/single-product' === $block['blockName']
 			&& isset( $block['attrs']['productId'] ) ) {
 				$this->product_id = $block['attrs']['productId'];
 
@@ -126,8 +126,14 @@ protected function replace_post_for_single_product_inner_block( $block, &$contex
 			$block_name = array_pop( $this->single_product_inner_blocks_names );
 
 			if ( $block_name === $block['blockName'] ) {
-				// @todo This is a temporary fix to make the Post Excerpt block work while https://github.com/WordPress/gutenberg/pull/49495 is not merged
-				if ( 'core/post-excerpt' === $block_name ) {
+				/**
+				 * This is a temporary fix to ensure the Post Title and Excerpt blocks work as expected
+				 * until Gutenberg versions 15.2 and 15.6 are included in the core of WordPress.
+				 *
+				 * @see https://github.com/WordPress/gutenberg/pull/48001
+				 * @see https://github.com/WordPress/gutenberg/pull/49495
+				 */
+				if ( 'core/post-excerpt' === $block_name || 'core/post-title' === $block_name ) {
 					global $post;
 					// phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
 					$post = get_post( $this->product_id );