Merge branch 'trunk' into add/global-style-for-cart-checkout

.github/release-initial-checklist.md

@@ -129,11 +129,14 @@ This only needs to be done if this release is the last release of the feature pl
     -   Ensure the release notes are included in the post verbatim.
     -   Don't forget to use category `WooCommerce Blocks Release Notes` for the post.
     -   If any of the PRs in this release is labelled with `needs dev-note`, include it in the post.
--   [ ] Add highlights to the WC core release post (do this even if the release you are doing is not merged into WC core):
+-   [ ] Document highlights so they can be used in the WC core release post (do this even if the release you are doing is not merged into WC core):
     -   Check which WC core version will include the WC Blocks release you just did (reference: PdToLP-K-p2).
-    -   Go to its Release Thread and search the _Feature Highlights_ comment (example: p6q8Tx-2gl-p2).
-    -   Edit the linked draft post and add all highlights from the release you just did.
-    -   Leave a comment under the _Feature Highlights_ comment in the release thread mentioning that you updated the draft with the features included in WC Blocks X.Y.
+    -   Go to the _Release highlights_ page (PdToLP-xh-p2) and edit the _WC Blocks features merged in WC core X.Y_ page corresponding to the correct release (create it and add it to the list if it doesn't exist yet).
+    -   Edit that page and write all highlights from the release you just made which will be available in WC core. Skip all features which are only available in the feature plugin. Make the text user-friendly, as it will be part of a public post when WC core is released (you can use what you wrote in the release announcement in the step above).
+    -   If you are doing a release that gets merged into WC core:
+        -   Go to its Release Thread and search the _Feature Highlights_ comment (example: p6q8Tx-2gl-p2).
+        -   Edit the linked draft post and copy and paste all highlights from the _WC Blocks features merged in WC core X.Y_ page.
+        -   Leave a comment under the _Feature Highlights_ comment in the release thread mentioning that you updated the draft with the features included in WC Blocks X.Y.
 -   [ ] Announce the release internally (`#woo-announcements` slack).
 -   [ ] Update user-facing documentation as needed. When the plugin is released, ensure user-facing documentation is kept up to date with new blocks and compatibility information. The dev team should update documents in collaboration with support team and WooCommerce docs guild. In particular, please review and update as needed:
     -   Are there any new blocks in this release? Ensure they have adequate user documentation.

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

@@ -3,6 +3,11 @@
  */
 import type { BlockAttributes } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
+import { ImageSizing } from './types';
+
 export const blockAttributes: BlockAttributes = {
 	showProductLink: {
 		type: 'boolean',
@@ -18,7 +23,7 @@ export const blockAttributes: BlockAttributes = {
 	},
 	imageSizing: {
 		type: 'string',
-		default: 'full-size',
+		default: ImageSizing.SINGLE,
 	},
 	productId: {
 		type: 'number',

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

@@ -23,7 +23,7 @@ import type { HTMLAttributes } from 'react';
  */
 import ProductSaleBadge from '../sale-badge/block';
 import './style.scss';
-import type { BlockAttributes } from './types';
+import { BlockAttributes, ImageSizing } from './types';
 
 const ImagePlaceholder = (): JSX.Element => {
 	return (
@@ -81,7 +81,7 @@ type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
 export const Block = ( props: Props ): JSX.Element | null => {
 	const {
 		className,
-		imageSizing = 'full-size',
+		imageSizing = ImageSizing.SINGLE,
 		showProductLink = true,
 		showSaleBadge,
 		saleBadgeAlign = 'right',
@@ -160,7 +160,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 					fallbackAlt={ product.name }
 					image={ image }
 					loaded={ ! isLoading }
-					showFullSize={ imageSizing !== 'cropped' }
+					showFullSize={ imageSizing !== ImageSizing.THUMBNAIL }
 				/>
 			</ParentComponent>
 		</div>

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

@@ -32,10 +32,9 @@ import {
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
-import type { BlockAttributes } from './types';
+import { BlockAttributes, ImageSizing } from './types';
 
 type SaleBadgeAlignProps = 'left' | 'center' | 'right';
-type ImageSizingProps = 'full-size' | 'cropped';
 
 const Edit = ( {
 	attributes,
@@ -57,12 +56,6 @@ const Edit = ( {
 		[ setAttributes, isDescendentOfQueryLoop ]
 	);
 
-	useEffect( () => {
-		if ( isBlockThemeEnabled && attributes.imageSizing !== 'full-size' ) {
-			setAttributes( { imageSizing: 'full-size' } );
-		}
-	}, [ attributes.imageSizing, isBlockThemeEnabled, setAttributes ] );
-
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
@@ -160,19 +153,19 @@ const Edit = ( {
 								}
 							) }
 							value={ imageSizing }
-							onChange={ ( value: ImageSizingProps ) =>
+							onChange={ ( value: ImageSizing ) =>
 								setAttributes( { imageSizing: value } )
 							}
 						>
 							<ToggleGroupControlOption
-								value="full-size"
+								value={ ImageSizing.SINGLE }
 								label={ __(
 									'Full Size',
 									'woo-gutenberg-products-block'
 								) }
 							/>
 							<ToggleGroupControlOption
-								value="cropped"
+								value={ ImageSizing.THUMBNAIL }
 								label={ __(
 									'Cropped',
 									'woo-gutenberg-products-block'

assets/js/atomic/blocks/product-elements/image/test/block.test.tsx

@@ -9,6 +9,7 @@ import { ProductResponseItem } from '@woocommerce/types';
  * Internal dependencies
  */
 import { Block } from '../block';
+import { ImageSizing } from '../types';
 
 jest.mock( '@woocommerce/base-hooks', () => ( {
 	__esModule: true,
@@ -152,7 +153,7 @@ describe( 'Product Image Block', () => {
 						productId={ productWithImages.id }
 						showSaleBadge={ false }
 						saleBadgeAlign={ 'left' }
-						imageSizing={ 'full-size' }
+						imageSizing={ ImageSizing.SINGLE }
 						isDescendentOfQueryLoop={ false }
 					/>
 				</ProductDataContextProvider>
@@ -186,7 +187,7 @@ describe( 'Product Image Block', () => {
 						productId={ productWithoutImages.id }
 						showSaleBadge={ false }
 						saleBadgeAlign={ 'left' }
-						imageSizing={ 'full-size' }
+						imageSizing={ ImageSizing.SINGLE }
 						isDescendentOfQueryLoop={ false }
 					/>
 				</ProductDataContextProvider>
@@ -219,7 +220,7 @@ describe( 'Product Image Block', () => {
 						productId={ productWithImages.id }
 						showSaleBadge={ false }
 						saleBadgeAlign={ 'left' }
-						imageSizing={ 'full-size' }
+						imageSizing={ ImageSizing.SINGLE }
 						isDescendentOfQueryLoop={ false }
 					/>
 				</ProductDataContextProvider>
@@ -249,7 +250,7 @@ describe( 'Product Image Block', () => {
 						productId={ productWithoutImages.id }
 						showSaleBadge={ false }
 						saleBadgeAlign={ 'left' }
-						imageSizing={ 'full-size' }
+						imageSizing={ ImageSizing.SINGLE }
 						isDescendentOfQueryLoop={ false }
 					/>
 				</ProductDataContextProvider>
@@ -277,7 +278,7 @@ describe( 'Product Image Block', () => {
 						productId={ productWithoutImages.id }
 						showSaleBadge={ false }
 						saleBadgeAlign={ 'left' }
-						imageSizing={ 'full-size' }
+						imageSizing={ ImageSizing.SINGLE }
 						isDescendentOfQueryLoop={ false }
 					/>
 				</ProductDataContextProvider>

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

@@ -1,3 +1,8 @@
+export enum ImageSizing {
+	SINGLE = 'single',
+	THUMBNAIL = 'thumbnail',
+}
+
 export interface BlockAttributes {
 	// The product ID.
 	productId: number;
@@ -10,7 +15,7 @@ export interface BlockAttributes {
 	// How should the sale badge be aligned if displayed.
 	saleBadgeAlign: 'left' | 'center' | 'right';
 	// Size of image to use.
-	imageSizing: 'full-size' | 'cropped';
+	imageSizing: ImageSizing;
 	// Whether or not be a children of Query Loop Block.
 	isDescendentOfQueryLoop: boolean;
 }

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

@@ -9,14 +9,11 @@ import {
 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 { BLOCK_TITLE, BLOCK_ICON } from './constants';
-import { ProductSelector } from '../shared/product-selector';
 
 type UnsupportedAligments = 'wide' | 'full';
 type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
@@ -82,52 +79,20 @@ const PriceEdit = ( {
 		]
 	);
 
-	const showProductSelector =
-		! isDescendentOfQueryLoop &&
-		! isDescendentOfSingleProductTemplate &&
-		! attributes.isDescendentOfSingleProductBlock;
-
-	if ( ! showProductSelector ) {
-		return (
-			<>
-				<BlockControls>
-					<AlignmentToolbar
-						value={ attributes.textAlign }
-						onChange={ ( textAlign: AllowedAlignments ) => {
-							setAttributes( { textAlign } );
-						} }
-					/>
-				</BlockControls>
-				<div { ...blockProps }>
-					<Block { ...blockAttrs } />
-				</div>
-			</>
-		);
-	}
-
 	return (
-		<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>
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ attributes.textAlign }
+					onChange={ ( textAlign: AllowedAlignments ) => {
+						setAttributes( { textAlign } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>
 				<Block { ...blockAttrs } />
-			</ProductSelector>
-		</div>
+			</div>
+		</>
 	);
 };
 

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

@@ -3,13 +3,21 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { InnerBlockTemplate } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 
 const Edit = () => {
+	const isDescendentOfSingleProductTemplate = useSelect( ( select ) => {
+		const store = select( 'core/edit-site' );
+		const postId = store?.getEditedPostId< string | undefined >();
+
+		return postId?.includes( '//single-product' );
+	}, [] );
+
 	const TEMPLATE: InnerBlockTemplate[] = [
 		[
 			'core/group',
@@ -18,7 +26,7 @@ const Edit = () => {
 				[
 					'woocommerce/product-sku',
 					{
-						isDescendentOfSingleProductTemplate: true,
+						isDescendentOfSingleProductTemplate,
 					},
 				],
 				[

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

@@ -8,6 +8,7 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
  * Internal dependencies
  */
 import edit from './edit';
+import save from './save';
 import metadata from './block.json';
 
 registerBlockSingleProductTemplate( {
@@ -16,6 +17,7 @@ registerBlockSingleProductTemplate( {
 	blockMetadata: metadata,
 	blockSettings: {
 		edit,
+		save,
 		icon,
 		ancestor: [ 'woocommerce/single-product' ],
 	},

assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx

@@ -11,6 +11,7 @@ import type { RefObject } from 'react';
  * Internal dependencies
  */
 import CartLineItemRow from './cart-line-item-row';
+import './style.scss';
 
 const placeholderRows = [ ...Array( 3 ) ].map( ( _x, i ) => (
 	<CartLineItemRow lineItem={ {} } key={ i } />