Merge branch 'trunk' into merge/#8025-local-pickup-country-state-into…

…-same-field

.github/patch-initial-checklist.md

@@ -57,7 +57,7 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
 -   [ ] After the wp.org workflow completes, confirm the following
     -   [ ] Changelog, Version, and Last Updated on [WP.org plugin page](https://wordpress.org/plugins/woo-gutenberg-products-block/) is correct.
     -   [ ] Confirm svn tag is correct, e.g. [{{version}}](https://plugins.svn.wordpress.org/woo-gutenberg-products-block/tags/{{version}}/)
-    -   [ ] Confirm [WooCommerce.com plugin page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/) is updated.
+    -   [ ] Confirm [WooCommerce.com plugin page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/) is updated. Note: this can take several hours, feel free to check it the following day.
     -   [ ] Download zip and smoke test.
     -   [ ] Test updating plugin from previous version.
 

.github/release-initial-checklist.md

@@ -76,7 +76,7 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
 -   [ ] After the wp.org workflow completes, confirm the following
     -   [ ] Changelog, Version, and Last Updated on [WP.org plugin page](https://wordpress.org/plugins/woo-gutenberg-products-block/) is correct.
     -   [ ] Confirm svn tag is correct, e.g. [{{version}}](https://plugins.svn.wordpress.org/woo-gutenberg-products-block/tags/{{version}}/)
-    -   [ ] Confirm [WooCommerce.com plugin page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/) is updated.
+    -   [ ] Confirm [WooCommerce.com plugin page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/) is updated. Note: this can take several hours, feel free to check it the following day.
     -   [ ] Download zip and smoke test.
     -   [ ] Test updating plugin from previous version.
 

.github/workflows/auto-merge-dependabot.yml

@@ -13,7 +13,7 @@ jobs:
         steps:
             - name: Dependabot metadata
               id: metadata
-              uses: dependabot/[email protected].1
+              uses: dependabot/[email protected].6
               with:
                   github-token: "${{ secrets.GITHUB_TOKEN }}"
 

.github/workflows/php-js-e2e-tests.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
     JSE2EWithGutenberg:
+        if: ${{ false }}  # disable until we've fixed failing tests.
         strategy:
             fail-fast: false
             matrix:

assets/js/atomic/blocks/index.js

@@ -17,3 +17,4 @@ import './product-elements/add-to-cart-form';
 import './product-elements/product-image-gallery';
 import './product-elements/product-details';
 import './product-elements/related-products';
+import './product-elements/product-meta';

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

@@ -16,6 +16,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'string',
 		default: '',
 	},
+	isDescendentOfSingleProductTemplate: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

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

@@ -40,7 +40,7 @@ interface PriceProps {
 }
 
 export const Block = ( props: Props ): JSX.Element | null => {
-	const { className, textAlign } = props;
+	const { className, textAlign, isDescendentOfSingleProductTemplate } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
 
@@ -57,7 +57,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		}
 	);
 
-	if ( ! product.id ) {
+	if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {
 		return (
 			<ProductPrice align={ textAlign } className={ wrapperClassName } />
 		);
@@ -71,7 +71,11 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		...spacingProps.style,
 	};
 	const prices: PriceProps = product.prices;
-	const currency = getCurrencyFromPriceResponse( prices );
+	const currency = isDescendentOfSingleProductTemplate
+		? getCurrencyFromPriceResponse()
+		: getCurrencyFromPriceResponse( prices );
+
+	const pricePreview = '5000';
 	const isOnSale = prices.price !== prices.regular_price;
 	const priceClassName = classnames( {
 		[ `${ parentClassName }__product-price__value` ]: parentClassName,
@@ -86,12 +90,20 @@ export const Block = ( props: Props ): JSX.Element | null => {
 			priceStyle={ style }
 			priceClassName={ priceClassName }
 			currency={ currency }
-			price={ prices.price }
+			price={
+				isDescendentOfSingleProductTemplate
+					? pricePreview
+					: prices.price
+			}
 			// Range price props
 			minPrice={ prices?.price_range?.min_amount }
 			maxPrice={ prices?.price_range?.max_amount }
 			// This is the regular or original price when the `price` value is a sale price.
-			regularPrice={ prices.regular_price }
+			regularPrice={
+				isDescendentOfSingleProductTemplate
+					? pricePreview
+					: prices.regular_price
+			}
 			regularPriceClassName={ classnames( {
 				[ `${ parentClassName }__product-price__regular` ]:
 					parentClassName,
@@ -101,4 +113,15 @@ export const Block = ( props: Props ): JSX.Element | null => {
 	);
 };
 
-export default withProductDataContext( Block );
+export default ( props: Props ) => {
+	// It is necessary because this block has to support serveral contexts:
+	// - Inside `All Products Block` -> `withProductDataContext` HOC
+	// - Inside `Products Block` -> Gutenberg Context
+	// - Inside `Single Product Template` -> Gutenberg Context
+	// - Without any parent -> `WithSelector` and `withProductDataContext` HOCs
+	// For more details, check https://github.com/woocommerce/woocommerce-blocks/pull/8609
+	if ( props.isDescendentOfSingleProductTemplate ) {
+		return <Block { ...props } />;
+	}
+	return withProductDataContext( Block )( props );
+};

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

@@ -8,13 +8,15 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import type { BlockAlignment } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
-import withProductSelector from '../shared/with-product-selector';
-import { BLOCK_TITLE as label, BLOCK_ICON as icon } from './constants';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+import { ProductSelector } from '../shared/product-selector';
 
 type UnsupportedAligments = 'wide' | 'full';
 type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
@@ -51,26 +53,78 @@ const PriceEdit = ( {
 	};
 	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
 
+	const isDescendentOfSingleProductTemplate = useSelect(
+		( select ) => {
+			const store = select( 'core/edit-site' );
+			const postId = store?.getEditedPostId();
+
+			return (
+				( postId === 'woocommerce/woocommerce//product-meta' ||
+					postId === 'woocommerce/woocommerce//single-product' ) &&
+				! isDescendentOfQueryLoop
+			);
+		},
+		[ isDescendentOfQueryLoop ]
+	);
+
 	useEffect(
-		() => setAttributes( { isDescendentOfQueryLoop } ),
-		[ setAttributes, isDescendentOfQueryLoop ]
+		() =>
+			setAttributes( {
+				isDescendentOfQueryLoop,
+				isDescendentOfSingleProductTemplate,
+			} ),
+		[
+			isDescendentOfQueryLoop,
+			isDescendentOfSingleProductTemplate,
+			setAttributes,
+		]
 	);
 
+	const showProductSelector =
+		! isDescendentOfQueryLoop && ! isDescendentOfSingleProductTemplate;
+
+	if ( ! showProductSelector ) {
+		return (
+			<>
+				<BlockControls>
+					<AlignmentToolbar
+						value={ attributes.textAlign }
+						onChange={ ( textAlign: AllowedAlignments ) => {
+							setAttributes( { textAlign } );
+						} }
+					/>
+				</BlockControls>
+				<div { ...blockProps }>
+					<Block { ...blockAttrs } />
+				</div>
+			</>
+		);
+	}
+
 	return (
-		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ attributes.textAlign }
-					onChange={ ( textAlign: AllowedAlignments ) => {
-						setAttributes( { textAlign } );
-					} }
-				/>
-			</BlockControls>
-			<div { ...blockProps }>
+		<div { ...blockProps }>
+			<ProductSelector
+				productId={ attributes.productId }
+				setAttributes={ setAttributes }
+				icon={ BLOCK_ICON }
+				label={ BLOCK_TITLE }
+				description={ __(
+					'Choose a product to display its price.',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				<BlockControls>
+					<AlignmentToolbar
+						value={ attributes.textAlign }
+						onChange={ ( textAlign: AllowedAlignments ) => {
+							setAttributes( { textAlign } );
+						} }
+					/>
+				</BlockControls>
 				<Block { ...blockAttrs } />
-			</div>
-		</>
+			</ProductSelector>
+		</div>
 	);
 };
 
-export default withProductSelector( { icon, label } )( PriceEdit );
+export default PriceEdit;

assets/js/atomic/blocks/product-elements/price/index.ts → assets/js/atomic/blocks/product-elements/price/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import type { BlockConfiguration } from '@wordpress/blocks';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -17,21 +17,32 @@ import {
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
-const blockConfig: BlockConfiguration = {
-	...sharedConfig,
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+	...configuration,
 	apiVersion: 2,
 	title,
 	description,
-	ancestor: [
-		'woocommerce/all-products',
-		'woocommerce/single-product',
-		'core/post-template',
-	],
 	usesContext: [ 'query', 'queryId', 'postId' ],
 	icon: { src: icon },
 	attributes,
 	supports,
 	edit,
+	save: () => {
+		if (
+			attributes.isDescendentOfQueryLoop ||
+			attributes.isDescendentOfSingleProductTemplate
+		) {
+			return null;
+		}
+
+		return (
+			<div
+				className={ classnames( 'is-loading', attributes.className ) }
+			/>
+		);
+	},
 };
 
 registerBlockType( 'woocommerce/product-price', blockConfig );

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

@@ -3,4 +3,5 @@ export interface BlockAttributes {
 	className?: string;
 	textAlign?: 'left' | 'center' | 'right';
 	isDescendentOfQueryLoop?: boolean;
+	isDescendentOfSingleProductTemplate?: boolean;
 }

assets/js/atomic/blocks/product-elements/product-image-gallery/block.json

@@ -7,7 +7,7 @@
 	"category": "woocommerce",
 	"supports": {
 		"align": true,
-		"reusable": false
+		"multiple": false
 	},
 	"keywords": [ "WooCommerce" ],
 	"usesContext": [ "postId", "postType", "queryId" ],

assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

@@ -10,6 +10,7 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
  */
 import edit from './edit';
 import metadata from './block.json';
+import './style.scss';
 
 registerBlockSingleProductTemplate( {
 	registerBlockFn: () => {

assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss

@@ -0,0 +1,13 @@
+.woocommerce .wp-block-woocommerce-product-image-gallery {
+	position: relative;
+
+	div.images {
+		width: unset !important;
+	}
+
+	span.onsale {
+		right: unset;
+		z-index: 1;
+		left: -1rem;
+	}
+}

assets/js/atomic/blocks/product-elements/product-meta/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-meta",
+	"version": "1.0.0",
+	"title": "Product Meta",
+	"icon": "product",
+	"description": "Display Product Meta",
+	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"reusable": false
+	},
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/product-meta/edit.tsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlockTemplate } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Edit = () => {
+	const TEMPLATE: InnerBlockTemplate[] = [
+		[
+			'core/group',
+			{ layout: { type: 'flex', flexWrap: 'nowrap' } },
+			[
+				[
+					'woocommerce/product-sku',
+					{
+						isDescendentOfSingleProductTemplate: true,
+					},
+				],
+				[
+					'core/post-terms',
+					{
+						prefix: 'Category: ',
+						term: 'product_cat',
+					},
+				],
+				[
+					'core/post-terms',
+					{
+						prefix: 'Tags: ',
+						term: 'product_tag',
+					},
+				],
+			],
+		],
+	];
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks template={ TEMPLATE } />
+		</div>
+	);
+};
+
+export default Edit;

assets/js/atomic/blocks/product-elements/product-meta/editor.scss

@@ -0,0 +1,4 @@
+.wc-block-editor-related-products__notice {
+	margin: 10px auto;
+	max-width: max-content;
+}