Merged in feature/117-dev-dev01 (pull request #8)

auto-patch  117-dev-dev01-2023-12-15T16_09_06

* auto-patch  117-dev-dev01-2023-12-15T16_09_06

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx

@@ -4,7 +4,7 @@
 import { useEffect } from '@wordpress/element';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Disabled, Tooltip } from '@wordpress/components';
+import { Disabled, Tooltip } from '@wordpress/components';
 import { Skeleton } from '@woocommerce/base-components/skeleton';
 import { BlockEditProps } from '@wordpress/blocks';
 
@@ -37,31 +37,28 @@ const Edit = ( props: BlockEditProps< Attributes > ) => {
 	return (
 		<div { ...blockProps }>
 			<Tooltip
-				text="Customer will see product add-to-cart options in this space, dependend on the product type. "
+				text="Customer will see product add-to-cart options in this space, dependent on the product type. "
 				position="bottom right"
 			>
-				<div className="wc-block-editor-container">
+				<div className="wc-block-editor-add-to-cart-form-container">
 					<Skeleton numberOfLines={ 3 } />
 					<Disabled>
-						<input
-							type={ 'number' }
-							value={ '1' }
-							className={
-								'wc-block-editor-add-to-cart-form__quantity'
-							}
-							readOnly
-						/>
-						<Button
-							variant={ 'primary' }
-							className={
-								'wc-block-editor-add-to-cart-form__button'
-							}
+						<div className="quantity">
+							<input
+								type={ 'number' }
+								value={ '1' }
+								className={ 'input-text qty text' }
+								readOnly
+							/>
+						</div>
+						<button
+							className={ `single_add_to_cart_button button alt wp-element-button` }
 						>
 							{ __(
 								'Add to cart',
 								'woo-gutenberg-products-block'
 							) }
-						</Button>
+						</button>
 					</Disabled>
 				</div>
 			</Tooltip>

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss

@@ -1,30 +1,4 @@
-.wc-block-editor-add-to-cart-form {
-	display: flex;
-	flex-direction: column;
-	row-gap: $default-block-margin;
-}
-
-input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
-	max-width: 50px;
-	min-height: 23px;
-	float: left;
-	padding: 6px 6px 6px 12px;
-	margin-right: 10px;
-	font-size: 13px;
-	height: inherit;
-}
-
-input[type="number"]::-webkit-inner-spin-button {
-	opacity: 1;
-}
-
-button.components-button.wc-block-add-to-cart-form__button {
-	float: left;
-	padding: 20px 30px;
-	border-radius: 0;
-}
-
-.wc-block-editor-container {
+.wc-block-editor-add-to-cart-form-container {
 	cursor: help;
 	gap: 10px;
 	display: flex;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss

@@ -1,4 +1,4 @@
-.wp-block-add-to-cart-form {
+.wc-block-add-to-cart-form {
 	width: unset;
 	/**
 	* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
@@ -9,4 +9,17 @@
 		font-size: var(--wp--preset--font-size--small);
 		padding: 0.9rem 1.1rem;
 	}
+
+	.quantity {
+		display: inline-block;
+		float: none;
+		margin-right: 4px;
+		vertical-align: middle;
+
+		.qty {
+			margin-right: 0.5rem;
+			width: 3.631em;
+			text-align: center;
+		}
+	}
 }

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.tsx

@@ -7,7 +7,7 @@ import { SelectControl } from 'wordpress-components';
 import type { SelectControl as SelectControlType } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import classnames from 'classnames';
-import { ValidationInputError } from '@woocommerce/blocks-checkout';
+import { ValidationInputError } from '@woocommerce/blocks-components';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/style.scss

@@ -13,8 +13,7 @@
 		display: inline-flex;
 		justify-content: center;
 		text-align: center;
-		// Set button font size and padding so it inherits from parent.
-		padding: 0.5em 1em;
+		// Set button font size so it inherits from parent.
 		font-size: 1em;
 
 		&.loading {
@@ -25,6 +24,7 @@
 			font-family: WooCommerce; /* stylelint-disable-line */
 			content: "\e031";
 			animation: spin 2s linear infinite;
+			margin-right: 0;
 			margin-left: 0.5em;
 			display: inline-block;
 			width: auto;
@@ -70,8 +70,9 @@
 		justify-content: center;
 		white-space: normal;
 		word-break: break-word;
-		width: 150px;
 		overflow: hidden;
+		align-items: center;
+		line-height: inherit;
 
 		span {
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/utils/blocks-registration-manager/block-registration-strategy.ts

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import {
+	BlockConfiguration,
+	registerBlockType,
+	unregisterBlockType,
+	registerBlockVariation,
+	unregisterBlockVariation,
+	BlockVariation,
+	BlockAttributes,
+} from '@wordpress/blocks';
+
+export interface BlockRegistrationStrategy {
+	register(
+		blockNameOrMetadata: string | Partial< BlockConfiguration >,
+		blockSettings: Partial< BlockConfiguration >
+	): boolean;
+	unregister( blockName: string, variationName?: string ): boolean;
+}
+
+export class BlockTypeStrategy implements BlockRegistrationStrategy {
+	register(
+		blockNameOrMetadata: string | Partial< BlockConfiguration >,
+		blockSettings: Partial< BlockConfiguration >
+	): boolean {
+		return Boolean(
+			// @ts-expect-error: `registerBlockType` is typed in WordPress core
+			registerBlockType( blockNameOrMetadata, blockSettings )
+		);
+	}
+
+	unregister( blockName: string ): boolean {
+		return Boolean( unregisterBlockType( blockName ) );
+	}
+}
+
+// Strategy for BlockVariation
+export class BlockVariationStrategy implements BlockRegistrationStrategy {
+	register(
+		blockName: string,
+		blockSettings: Partial< BlockConfiguration >
+	): boolean {
+		return Boolean(
+			registerBlockVariation(
+				blockName,
+				blockSettings as BlockVariation< BlockAttributes >
+			)
+		);
+	}
+
+	unregister( blockName: string, variationName: string ): boolean {
+		return Boolean( unregisterBlockVariation( blockName, variationName ) );
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/utils/blocks-registration-manager/blocks-registration-manager.ts

@@ -0,0 +1,182 @@
+/**
+ * External dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TemplateChangeDetector,
+	TemplateChangeDetectorObserver,
+} from './template-change-detector';
+import {
+	BlockRegistrationStrategy,
+	BlockTypeStrategy,
+	BlockVariationStrategy,
+} from './block-registration-strategy';
+import { BLOCKS_WITH_RESTRICTION } from './blocks-with-restriction';
+
+/**
+ * Manages the registration and unregistration of blocks based on template or page restrictions.
+ *
+ * This class implements the TemplateChangeDetectorObserver interface and is responsible for managing the registration and unregistration of blocks based on the restrictions defined in the BLOCKS_WITH_RESTRICTION constant.
+ *
+ * The class maintains a list of unregistered blocks and uses a block registration strategy to register and unregister blocks as needed. The strategy used depends on whether the block is a variation block or a regular block.
+ *
+ * The `run` method is the main entry point for the class. It is called with a TemplateChangeDetector object and registers and unregisters blocks based on the current template and whether the editor is in post or page mode.
+ */
+export class BlockRegistrationManager
+	implements TemplateChangeDetectorObserver
+{
+	private unregisteredBlocks: string[] = [];
+	private blockRegistrationStrategy: BlockRegistrationStrategy;
+
+	constructor() {
+		this.blockRegistrationStrategy = new BlockTypeStrategy();
+	}
+
+	/**
+	 * Determines whether a block should be registered based on the current template or page.
+	 *
+	 * This method checks whether a block with restrictions should be registered based on the current template ID and
+	 * whether the editor is in post or page mode. It checks whether the current template ID starts with any of the
+	 * allowed templates or template parts for the block, and whether the block is available in the post or page editor.
+	 *
+	 * @param {Object}  params                          - The parameters for the method.
+	 * @param {string}  params.blockWithRestrictionName - The name of the block with restrictions.
+	 * @param {string}  params.currentTemplateId        - The ID of the current template.
+	 * @param {boolean} params.isPostOrPage             - Whether the editor is in a post or page.
+	 * @return {boolean} True if the block should be registered, false otherwise.
+	 */
+	private shouldBlockBeRegistered( {
+		blockWithRestrictionName,
+		currentTemplateId,
+		isPostOrPage,
+	}: {
+		blockWithRestrictionName: string;
+		currentTemplateId: string;
+		isPostOrPage: boolean;
+	} ) {
+		const {
+			allowedTemplates,
+			allowedTemplateParts,
+			availableInPostOrPageEditor,
+		} = BLOCKS_WITH_RESTRICTION[ blockWithRestrictionName ];
+		const shouldBeAvailableOnTemplate = Object.keys(
+			allowedTemplates
+		).some( ( allowedTemplate ) =>
+			currentTemplateId.startsWith( allowedTemplate )
+		);
+		const shouldBeAvailableOnTemplatePart = Object.keys(
+			allowedTemplateParts
+		).some( ( allowedTemplate ) =>
+			currentTemplateId.startsWith( allowedTemplate )
+		);
+		const shouldBeAvailableOnPostOrPageEditor =
+			isPostOrPage && availableInPostOrPageEditor;
+
+		return (
+			shouldBeAvailableOnTemplate ||
+			shouldBeAvailableOnTemplatePart ||
+			shouldBeAvailableOnPostOrPageEditor
+		);
+	}
+
+	/**
+	 * Unregisters blocks before entering a restricted area based on the current template or page/post.
+	 *
+	 * This method iterates over all blocks with restrictions and unregisters them if they should not be registered
+	 * based on the current template ID and whether the editor is in a post or page. It uses a block registration
+	 * strategy to unregister the blocks, which depends on whether the block is a variation block or a regular block.
+	 *
+	 * @param {Object}  params                   - The parameters for the method.
+	 * @param {string}  params.currentTemplateId - The ID of the current template.
+	 * @param {boolean} params.isPostOrPage      - Whether the editor is in post or page mode.
+	 */
+	unregisterBlocksBeforeEnteringRestrictedArea( {
+		currentTemplateId,
+		isPostOrPage,
+	}: {
+		currentTemplateId: string;
+		isPostOrPage: boolean;
+	} ) {
+		for ( const blockWithRestrictionName of Object.keys(
+			BLOCKS_WITH_RESTRICTION
+		) ) {
+			if (
+				this.shouldBlockBeRegistered( {
+					blockWithRestrictionName,
+					currentTemplateId,
+					isPostOrPage,
+				} )
+			) {
+				continue;
+			}
+
+			if ( ! getBlockType( blockWithRestrictionName ) ) {
+				continue;
+			}
+
+			this.blockRegistrationStrategy = BLOCKS_WITH_RESTRICTION[
+				blockWithRestrictionName
+			].isVariationBlock
+				? new BlockVariationStrategy()
+				: new BlockTypeStrategy();
+
+			this.blockRegistrationStrategy.unregister(
+				blockWithRestrictionName
+			);
+			this.unregisteredBlocks.push( blockWithRestrictionName );
+		}
+	}
+
+	/**
+	 * Registers blocks after leaving a restricted area.
+	 *
+	 * This method iterates over all unregistered blocks and registers them if they are not restricted in the current context.
+	 * It uses a block registration strategy to register the blocks, which depends on whether the block is a variation block or a regular block.
+	 * If the block is successfully registered, it is removed from the list of unregistered blocks.
+	 */
+	registerBlocksAfterLeavingRestrictedArea() {
+		for ( const unregisteredBlockName of this.unregisteredBlocks ) {
+			if ( ! getBlockType( unregisteredBlockName ) ) {
+				continue;
+			}
+
+			const restrictedBlockData =
+				BLOCKS_WITH_RESTRICTION[ unregisteredBlockName ];
+			this.blockRegistrationStrategy = BLOCKS_WITH_RESTRICTION[
+				unregisteredBlockName
+			].isVariationBlock
+				? new BlockVariationStrategy()
+				: new BlockTypeStrategy();
+			const isBlockRegistered = this.blockRegistrationStrategy.register(
+				restrictedBlockData.blockMetadata,
+				restrictedBlockData.blockSettings
+			);
+			this.unregisteredBlocks = isBlockRegistered
+				? this.unregisteredBlocks.filter(
+						( blockName ) => blockName !== unregisteredBlockName
+				  )
+				: this.unregisteredBlocks;
+		}
+	}
+
+	/**
+	 * Runs the block registration manager.
+	 *
+	 * This method is the main entry point for the block registration manager. It is called with a TemplateChangeDetector object,
+	 * and registers and unregisters blocks based on the current template and whether the editor is in a post or page.
+	 *
+	 * @param {TemplateChangeDetector} templateChangeDetector - The template change detector object.
+	 */
+	run( templateChangeDetector: TemplateChangeDetector ) {
+		this.registerBlocksAfterLeavingRestrictedArea();
+		this.unregisterBlocksBeforeEnteringRestrictedArea( {
+			currentTemplateId:
+				templateChangeDetector.getCurrentTemplateId() || '',
+			isPostOrPage: templateChangeDetector.getIsPostOrPage(),
+		} );
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/utils/blocks-registration-manager/blocks-with-restriction.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { BlockConfiguration } from '@wordpress/blocks';
+import { ProductGalleryBlockSettings } from '@woocommerce/blocks/product-gallery/settings';
+
+/**
+ * Internal dependencies
+ */
+import productGalleryBlockMetadata from '../../../blocks/product-gallery/block.json';
+
+export interface BlocksWithRestriction {
+	[ key: string ]: {
+		blockMetadata: Partial< BlockConfiguration >;
+		blockSettings: Partial< BlockConfiguration >;
+		allowedTemplates: {
+			[ key: string ]: boolean;
+		};
+		allowedTemplateParts: {
+			[ key: string ]: boolean;
+		};
+		availableInPostOrPageEditor: boolean;
+		isVariationBlock: boolean;
+	};
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+export const BLOCKS_WITH_RESTRICTION: BlocksWithRestriction = {
+	[ productGalleryBlockMetadata.name ]: {
+		blockMetadata: productGalleryBlockMetadata,
+		blockSettings: ProductGalleryBlockSettings,
+		allowedTemplates: {
+			'single-product': true,
+		},
+		allowedTemplateParts: {
+			'product-gallery': true,
+		},
+		availableInPostOrPageEditor: false,
+		isVariationBlock: false,
+	},
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/utils/blocks-registration-manager/index.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies
+ */
+import { BlockRegistrationManager } from './blocks-registration-manager';
+import { TemplateChangeDetector } from './template-change-detector';
+
+domReady( () => {
+	const templateChangeDetector = new TemplateChangeDetector();
+	const blockRegistrationManager = new BlockRegistrationManager();
+	templateChangeDetector.add( blockRegistrationManager );
+} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/utils/blocks-registration-manager/template-change-detector.ts

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { subscribe, select } from '@wordpress/data';
+import { isNumber } from '@woocommerce/types';
+
+interface TemplateChangeDetectorSubject {
+	add( observer: TemplateChangeDetectorObserver ): void;
+	getPreviousTemplateId(): string | undefined;
+	getCurrentTemplateId(): string | undefined;
+	notify(): void;
+}
+
+export interface TemplateChangeDetectorObserver {
+	run( subject: TemplateChangeDetectorSubject ): void;
+}
+
+/**
+ * This class implements the TemplateChangeDetectorSubject interface and is responsible for detecting changes in the
+ * current template or page and notifying any observers of these changes. It maintains a list of observers and provides methods
+ * to add observers and notify them of changes.
+ *
+ * The class also provides methods to get the previous and current template IDs and whether the editor is in a post or page.
+ *
+ * The `checkIfTemplateHasChangedAndNotifySubscribers` method is the main method of the class. It checks if the current
+ * template has changed and, if so, notifies all observers.
+ */
+export class TemplateChangeDetector implements TemplateChangeDetectorSubject {
+	private previousTemplateId: string | undefined;
+	private currentTemplateId: string | undefined;
+	private isPostOrPage: boolean;
+
+	private observers: TemplateChangeDetectorObserver[] = [];
+
+	constructor() {
+		this.isPostOrPage = false;
+		subscribe( () => {
+			this.checkIfTemplateHasChangedAndNotifySubscribers();
+		}, 'core/edit-site' );
+	}
+
+	public add( observer: TemplateChangeDetectorObserver ): void {
+		this.observers.push( observer );
+	}
+
+	/**
+	 * Trigger an update in each subscriber.
+	 */
+	public notify(): void {
+		for ( const observer of this.observers ) {
+			observer.run( this );
+		}
+	}
+
+	public getPreviousTemplateId() {
+		return this.previousTemplateId;
+	}
+
+	public getCurrentTemplateId() {
+		return this.currentTemplateId;
+	}
+
+	public getIsPostOrPage() {
+		return this.isPostOrPage;
+	}
+
+	/**
+	 * Parses the template ID.
+	 *
+	 * This method takes a template or a post ID and returns it parsed in the expected format.
+	 *
+	 * @param {string | number | undefined} templateId - The template ID to parse.
+	 * @return {string | undefined} The parsed template ID.
+	 */
+	private parseTemplateId(
+		templateId: string | number | undefined
+	): string | undefined {
+		if ( isNumber( templateId ) ) {
+			return String( templateId );
+		}
+		return templateId?.split( '//' )[ 1 ];
+	}
+
+	/**
+	 * Checks if the current template or page has changed and notifies subscribers.
+	 *
+	 * If the current template ID has changed and is not undefined (which means that it is not a page, post or template), it notifies all subscribers.
+	 */
+	public checkIfTemplateHasChangedAndNotifySubscribers(): void {
+		this.previousTemplateId = this.currentTemplateId;
+
+		const postOrPageId = select( 'core/editor' )?.getCurrentPostId<
+			string | number | undefined
+		>();
+
+		this.isPostOrPage = Boolean( postOrPageId );
+
+		const editedPostId =
+			postOrPageId ||
+			select( 'core/edit-site' )?.getEditedPostId<
+				string | number | undefined
+			>();
+		this.currentTemplateId = this.parseTemplateId( editedPostId );
+
+		const hasChangedTemplate =
+			this.previousTemplateId !== this.currentTemplateId;
+		const hasTemplateId = Boolean( this.currentTemplateId );
+
+		if ( ! hasChangedTemplate || ! hasTemplateId ) {
+			return;
+		}
+
+		this.notify();
+	}
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/atomic/utils/register-block-single-product-template.ts

@@ -46,7 +46,7 @@ export const registerBlockSingleProductTemplate = ( {
 
 		// With GB 16.3.0 the return type can be a number: https://github.com/WordPress/gutenberg/issues/53230
 		currentTemplateId = parseTemplateId(
-			store?.getEditedPostId() as string | number | undefined
+			store?.getEditedPostId< string | number | undefined >()
 		);
 		const hasChangedTemplate = previousTemplateId !== currentTemplateId;
 		const hasTemplateId = Boolean( currentTemplateId );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/button/stories/index.stories.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Button, { ButtonProps } from '..';
+const availableTypes = [ 'button', 'input', 'submit' ];
+
+export default {
+	title: 'Base Components/Button',
+	argTypes: {
+		children: {
+			control: 'text',
+		},
+		type: {
+			control: 'radio',
+			options: availableTypes,
+		},
+	},
+	component: Button,
+} as Meta< ButtonProps >;
+
+const Template: Story< ButtonProps > = ( args ) => {
+	return <Button { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Buy Now',
+	disabled: false,
+	showSpinner: false,
+	type: 'button',
+};
+
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+	...Default.args,
+	disabled: true,
+};
+
+export const Loading = Template.bind( {} );
+Loading.args = {
+	...Default.args,
+	disabled: true,
+	showSpinner: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
+import { isPostcode } from '@woocommerce/blocks-checkout';
 import {
 	ValidatedTextInput,
-	isPostcode,
 	type ValidatedTextInputHandle,
-} from '@woocommerce/blocks-checkout';
+} from '@woocommerce/blocks-components';
 import {
 	BillingCountryInput,
 	ShippingCountryInput,
@@ -180,6 +180,7 @@ const AddressForm = ( {
 							( fieldsRef.current[ field.key ] = el )
 						}
 						{ ...fieldProps }
+						type={ field.type }
 						value={ values[ field.key ] }
 						onChange={ ( newValue: string ) =>
 							onChange( {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss

@@ -34,7 +34,8 @@ table.wc-block-cart-items {
 		}
 		.wc-block-cart-item__quantity {
 			.wc-block-cart-item__remove-link {
-				@include link-button;
+				@include link-button();
+				@include hover-effect();
 				@include font-size( smaller );
 
 				text-transform: none;
@@ -75,7 +76,7 @@ table.wc-block-cart-items {
 		.wc-block-cart-item__remove-link {
 			display: none;
 		}
-		&:not(.wc-block-mini-cart-items) {
+		&:not(.wc-block-mini-cart-items):not(:last-child) {
 			.wc-block-cart-items__row {
 				@include with-translucent-border( 0 0 1px );
 			}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/index.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useContainerWidthContext } from '@woocommerce/base-context';
-import { Panel } from '@woocommerce/blocks-checkout';
+import { Panel } from '@woocommerce/blocks-components';
 import type { CartItem } from '@woocommerce/types';
 
 /**

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx

@@ -5,7 +5,7 @@ import type { ShippingAddress } from '@woocommerce/settings';
 import { useCustomerData } from '@woocommerce/base-context/hooks';
 import { dispatch } from '@wordpress/data';
 import { CART_STORE_KEY, processErrorResponse } from '@woocommerce/block-data';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import { removeNoticesWithContext } from '@woocommerce/base-utils';
 
 /**

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -4,8 +4,7 @@
 import classNames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Panel } from '@woocommerce/blocks-checkout';
-import { Label } from '@woocommerce/blocks-components';
+import { Label, Panel } from '@woocommerce/blocks-components';
 import { useCallback } from '@wordpress/element';
 import { useShippingData } from '@woocommerce/base-context/hooks';
 import { sanitizeHTML } from '@woocommerce/utils';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/index.tsx

@@ -9,11 +9,11 @@ import { withInstanceId } from '@wordpress/compose';
 import {
 	ValidatedTextInput,
 	ValidationInputError,
-} from '@woocommerce/blocks-checkout';
+} from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import classnames from 'classnames';
-import type { MouseEvent } from 'react';
+import type { MouseEvent, MouseEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -62,18 +62,18 @@ export const TotalsCoupon = ( {
 			validationErrorId: store.getValidationErrorId( textInputId ),
 		};
 	} );
-	const handleCouponAnchorClick = (
-		e: MouseEvent< HTMLAnchorElement, MouseEvent >
+	const handleCouponAnchorClick: MouseEventHandler< HTMLAnchorElement > = (
+		e: MouseEvent< HTMLAnchorElement >
 	) => {
 		e.preventDefault();
 		setIsCouponFormHidden( false );
 	};
-	const handleCouponSubmit = (
-		e: MouseEvent< HTMLButtonElement, MouseEvent >
+	const handleCouponSubmit: MouseEventHandler< HTMLButtonElement > = (
+		e: MouseEvent< HTMLButtonElement >
 	) => {
 		e.preventDefault();
-		if ( onSubmit !== undefined ) {
-			onSubmit( couponValue ).then( ( result ) => {
+		if ( typeof onSubmit !== 'undefined' ) {
+			onSubmit( couponValue )?.then( ( result ) => {
 				if ( result ) {
 					setCouponValue( '' );
 					setIsCouponFormHidden( true );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.stories.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { useArgs } from '@storybook/client-api';
+import type { Story, Meta } from '@storybook/react';
+import { INTERACTION_TIMEOUT } from '@woocommerce/storybook-controls';
+import { useDispatch } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { TotalsCoupon, TotalsCouponProps } from '..';
+
+export default {
+	title: 'Base Components/Totals/Coupon',
+	component: TotalsCoupon,
+	args: {
+		initialOpen: true,
+	},
+} as Meta< TotalsCouponProps >;
+
+const INVALID_COUPON_ERROR = {
+	hidden: false,
+	message: 'Invalid coupon code',
+};
+
+const Template: Story< TotalsCouponProps > = ( args ) => {
+	const [ {}, setArgs ] = useArgs();
+
+	const onSubmit = ( code: string ) => {
+		args.onSubmit?.( code );
+		setArgs( { isLoading: true } );
+		return new Promise( ( resolve ) => {
+			setTimeout( () => {
+				setArgs( { isLoading: false } );
+				resolve( true );
+			}, INTERACTION_TIMEOUT );
+		} );
+	};
+
+	return <TotalsCoupon { ...args } onSubmit={ onSubmit } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const LoadingState = Template.bind( {} );
+LoadingState.args = {
+	isLoading: true,
+};
+
+export const ErrorState: Story< TotalsCouponProps > = ( args ) => {
+	const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+
+	setValidationErrors( { coupon: INVALID_COUPON_ERROR } );
+
+	return <TotalsCoupon { ...args } />;
+};
+
+ErrorState.decorators = [
+	( StoryComponent ) => {
+		return <StoryComponent />;
+	},
+];

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/index.tsx

@@ -3,8 +3,8 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
-import { RemovableChip } from '@woocommerce/blocks-components';
-import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout';
+import { RemovableChip, TotalsItem } from '@woocommerce/blocks-components';
+import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
 import { getSetting } from '@woocommerce/settings';
 import {
 	CartResponseCouponItemWithLabel,

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.stories.tsx

@@ -0,0 +1,111 @@
+/**
+ * External dependencies
+ */
+import { useArgs } from '@storybook/client-api';
+import type { Story, Meta } from '@storybook/react';
+import {
+	currenciesAPIShape as currencies,
+	currencyControl,
+	INTERACTION_TIMEOUT,
+} from '@woocommerce/storybook-controls';
+import {
+	CartResponseCouponItemWithLabel,
+	CartTotalsItem,
+	LooselyMustHave,
+} from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import Discount, { TotalsDiscountProps } from '..';
+
+const EXAMPLE_COUPONS: CartResponseCouponItemWithLabel[] = [
+	{
+		code: 'AWSMSB',
+		discount_type: '',
+		label: 'Awesome Storybook coupon',
+		totals: {
+			...currencies.EUR,
+			total_discount: '5000',
+			total_discount_tax: '250',
+		},
+	},
+	{
+		code: 'STONKS',
+		discount_type: '',
+		label: 'Most valuable coupon',
+		totals: {
+			...currencies.EUR,
+			total_discount: '10000',
+			total_discount_tax: '1000',
+		},
+	},
+];
+
+function extractValuesFromCoupons(
+	coupons: LooselyMustHave< CartResponseCouponItemWithLabel, 'totals' >[]
+) {
+	return coupons.reduce(
+		( acc, curr ) => {
+			const totalDiscount =
+				Number( acc.total_discount ) +
+				Number( curr.totals.total_discount );
+			const totalDiscountTax =
+				Number( acc.total_discount_tax ) +
+				Number( curr.totals.total_discount_tax );
+
+			return {
+				total_discount: String( totalDiscount ),
+				total_discount_tax: String( totalDiscountTax ),
+			};
+		},
+		{ total_discount: '0', total_discount_tax: '0' } as LooselyMustHave<
+			CartTotalsItem,
+			'total_discount' | 'total_discount_tax'
+		>
+	);
+}
+
+export default {
+	title: 'Base Components/Totals/Discount',
+	component: Discount,
+	argTypes: {
+		currency: currencyControl,
+		removeCoupon: { action: 'Removing coupon with code' },
+	},
+	args: {
+		cartCoupons: EXAMPLE_COUPONS,
+		isRemovingCoupon: false,
+		values: extractValuesFromCoupons( EXAMPLE_COUPONS ),
+	},
+} as Meta< TotalsDiscountProps >;
+
+const Template: Story< TotalsDiscountProps > = ( args ) => {
+	const [ {}, setArgs ] = useArgs();
+
+	const removeCoupon = ( code: string ) => {
+		args.removeCoupon( code );
+		setArgs( { isRemovingCoupon: true } );
+
+		const cartCoupons = args.cartCoupons.filter(
+			( coupon ) => coupon.code !== code
+		);
+
+		const values = extractValuesFromCoupons( cartCoupons );
+
+		setTimeout(
+			() => setArgs( { cartCoupons, values, isRemovingCoupon: false } ),
+			INTERACTION_TIMEOUT
+		);
+	};
+
+	return <Discount { ...args } removeCoupon={ removeCoupon } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const RemovingCoupon = Template.bind( {} );
+RemovingCoupon.args = {
+	isRemovingCoupon: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx

@@ -4,8 +4,11 @@
 import { __, sprintf } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { createInterpolateElement } from '@wordpress/element';
-import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
-import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout';
+import {
+	FormattedMonetaryAmount,
+	TotalsItem,
+} from '@woocommerce/blocks-components';
+import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.stories.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { allSettings } from '@woocommerce/settings';
+import { Currency } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import FooterItem, { TotalsFooterItemProps } from '..';
+
+const NZD: Currency = {
+	code: 'NZD',
+	symbol: '$',
+	thousandSeparator: ' ',
+	decimalSeparator: '.',
+	minorUnit: 2,
+	prefix: '$',
+	suffix: '',
+};
+
+export default {
+	title: 'Base Components/Totals/FooterItem',
+	component: FooterItem,
+	args: {
+		currency: NZD,
+		values: { total_price: '2500', total_tax: '550' },
+	},
+} as Meta< TotalsFooterItemProps >;
+
+const Template: Story< TotalsFooterItemProps > = ( args ) => (
+	<FooterItem { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.decorators = [
+	( StoryComponent ) => {
+		allSettings.displayCartPricesIncludingTax = false;
+
+		return <StoryComponent />;
+	},
+];
+
+export const NoTaxLabel = Template.bind( {} );
+NoTaxLabel.decorators = [
+	( StoryComponent ) => {
+		allSettings.displayCartPricesIncludingTax = true;
+
+		return <StoryComponent />;
+	},
+];
+
+export const SingleTaxLabel = Template.bind( {} );
+SingleTaxLabel.args = {
+	values: {
+		total_price: '2500',
+		total_tax: '550',
+		tax_lines: [ { name: '10% VAT', price: '550', rate: '10.00' } ],
+	},
+};
+SingleTaxLabel.decorators = [
+	( StoryComponent ) => {
+		allSettings.displayCartPricesIncludingTax = true;
+
+		return <StoryComponent />;
+	},
+];
+
+export const MultipleTaxLabels = Template.bind( {} );
+MultipleTaxLabels.args = {
+	values: {
+		total_price: '2500',
+		total_tax: '550',
+		tax_lines: [
+			{ name: '10% VAT', price: '300', rate: '10.00' },
+			{ name: '5% VAT', price: '250', rate: '5.00' },
+		],
+	},
+};
+MultipleTaxLabels.decorators = [
+	( StoryComponent ) => {
+		allSettings.displayCartPricesIncludingTax = true;
+
+		return <StoryComponent />;
+	},
+];

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/index.tsx

@@ -5,8 +5,8 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
-import type { Currency } from '@woocommerce/price-format';
+import { TotalsItem } from '@woocommerce/blocks-components';
+import type { Currency } from '@woocommerce/types';
 import { ShippingVia } from '@woocommerce/base-components/cart-checkout/totals/shipping/shipping-via';
 import {
 	isAddressComplete,

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx

@@ -2,10 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	formatShippingAddress,
-	isAddressComplete,
-} from '@woocommerce/base-utils';
+import { formatShippingAddress } from '@woocommerce/base-utils';
 import { useEditorContext } from '@woocommerce/base-context';
 import { ShippingAddress as ShippingAddressType } from '@woocommerce/settings';
 import PickupLocation from '@woocommerce/base-components/cart-checkout/pickup-location';
@@ -31,15 +28,19 @@ export const ShippingAddress = ( {
 	setIsShippingCalculatorOpen,
 	shippingAddress,
 }: ShippingAddressProps ): JSX.Element | null => {
-	const addressComplete = isAddressComplete( shippingAddress );
 	const { isEditor } = useEditorContext();
 	const prefersCollection = useSelect( ( select ) =>
 		select( CHECKOUT_STORE_KEY ).prefersCollection()
 	);
-	// If the address is incomplete, and we're not in the editor, don't show anything.
-	if ( ! addressComplete && ! isEditor ) {
+	const hasFormattedAddress = !! formatShippingAddress( shippingAddress );
+
+	// If there is no default customer location set in the store, the customer hasn't provided their address,
+	// but a default shipping method is available for all locations,
+	// then the shipping calculator will be hidden to avoid confusion.
+	if ( ! hasFormattedAddress && ! isEditor ) {
 		return null;
 	}
+
 	const formattedLocation = formatShippingAddress( shippingAddress );
 	return (
 		<>

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/test/index.tsx

@@ -229,8 +229,11 @@ describe( 'TotalsShipping', () => {
 					currency={ {
 						code: 'USD',
 						symbol: '$',
-						position: 'left',
-						precision: 2,
+						minorUnit: 2,
+						decimalSeparator: '.',
+						prefix: '',
+						suffix: '',
+						thousandSeparator: ', ',
 					} }
 					values={ {
 						total_shipping: '0',
@@ -274,8 +277,11 @@ describe( 'TotalsShipping', () => {
 					currency={ {
 						code: 'USD',
 						symbol: '$',
-						position: 'left',
-						precision: 2,
+						minorUnit: 2,
+						decimalSeparator: '.',
+						prefix: '',
+						suffix: '',
+						thousandSeparator: ', ',
 					} }
 					values={ {
 						total_shipping: '0',
@@ -295,4 +301,51 @@ describe( 'TotalsShipping', () => {
 			screen.queryByText( 'Add an address for shipping options' )
 		).not.toBeInTheDocument();
 	} );
+	it( 'does show the calculator button when default rates are available and has formatted address', () => {
+		baseContextHooks.useStoreCart.mockReturnValue( {
+			cartItems: mockPreviewCart.items,
+			cartTotals: [ mockPreviewCart.totals ],
+			cartCoupons: mockPreviewCart.coupons,
+			cartFees: mockPreviewCart.fees,
+			cartNeedsShipping: mockPreviewCart.needs_shipping,
+			shippingRates: mockPreviewCart.shipping_rates,
+			shippingAddress: {
+				...shippingAddress,
+				city: '',
+				state: 'California',
+				country: 'US',
+				postcode: '',
+			},
+			billingAddress: mockPreviewCart.billing_address,
+			cartHasCalculatedShipping: mockPreviewCart.has_calculated_shipping,
+			isLoadingRates: false,
+		} );
+		render(
+			<SlotFillProvider>
+				<TotalsShipping
+					currency={ {
+						code: 'USD',
+						symbol: '$',
+						minorUnit: 2,
+						decimalSeparator: '.',
+						prefix: '',
+						suffix: '',
+						thousandSeparator: ', ',
+					} }
+					values={ {
+						total_shipping: '0',
+						total_shipping_tax: '0',
+					} }
+					showCalculator={ true }
+					showRateSelector={ true }
+					isCheckout={ false }
+					className={ '' }
+				/>
+			</SlotFillProvider>
+		);
+		expect( screen.queryByText( 'Change address' ) ).toBeInTheDocument();
+		expect(
+			screen.queryByText( 'Add an address for shipping options' )
+		).not.toBeInTheDocument();
+	} );
 } );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/combobox/index.tsx

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
 import { ComboboxControl } from 'wordpress-components';
-import { ValidationInputError } from '@woocommerce/blocks-checkout';
+import { ValidationInputError } from '@woocommerce/blocks-components';
 import { isObject } from '@woocommerce/types';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
@@ -121,14 +121,26 @@ const Combobox = ( {
 						// Try to match.
 						const normalizedFilterValue =
 							filterValue.toLocaleUpperCase();
-						const foundOption = options.find(
+
+						// Try to find an exact match first using values.
+						const foundValue = options.find(
 							( option ) =>
-								option.label
-									.toLocaleUpperCase()
-									.startsWith( normalizedFilterValue ) ||
 								option.value.toLocaleUpperCase() ===
-									normalizedFilterValue
+								normalizedFilterValue
 						);
+
+						if ( foundValue ) {
+							onChange( foundValue.value );
+							return;
+						}
+
+						// Fallback to a label match.
+						const foundOption = options.find( ( option ) =>
+							option.label
+								.toLocaleUpperCase()
+								.startsWith( normalizedFilterValue )
+						);
+
 						if ( foundOption ) {
 							onChange( foundOption.value );
 						}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/country-input/stories/index.stories.tsx

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useDispatch } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import { CountryInput, CountryInputWithCountriesProps } from '..';
+import { countries } from './countries-filler';
+
+type CountryCode = keyof typeof countries;
+
+export default {
+	title: 'Base Components/CountryInput',
+	component: CountryInput,
+	args: {
+		countries,
+		autoComplete: 'off',
+		id: 'country',
+		label: 'Countries: ',
+		required: false,
+	},
+	argTypes: {
+		countries: { control: false },
+		options: { table: { disable: true } },
+		value: { control: false },
+	},
+	decorators: [ ( StoryComponent ) => <StoryComponent /> ],
+} as Meta< CountryInputWithCountriesProps >;
+
+const Template: Story< CountryInputWithCountriesProps > = ( args ) => {
+	const [ selectedCountry, selectCountry ] = useState< CountryCode | '' >(
+		''
+	);
+	const { clearValidationError, showValidationError } =
+		useDispatch( VALIDATION_STORE_KEY );
+
+	useEffect( () => {
+		showValidationError( 'country' );
+	}, [ showValidationError ] );
+
+	function updateCountry( country: CountryCode ) {
+		clearValidationError( 'country' );
+		selectCountry( country );
+	}
+
+	return (
+		<CountryInput
+			{ ...args }
+			onChange={ ( value ) => updateCountry( value as CountryCode ) }
+			value={ selectedCountry }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+
+export const WithError = Template.bind( {} );
+WithError.args = {
+	errorId: 'country',
+	errorMessage: 'Please select a country',
+	required: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/form-token-field/stories/index.stories.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormTokenField, { Props } from '..';
+
+export default {
+	title: 'Base Components/FormTokenField',
+	argTypes: {},
+	component: FormTokenField,
+} as Meta< Props >;
+
+const Template: Story< Props > = ( args ) => {
+	const [ selected, setSelected ] = useState< string[] >( [] );
+
+	return (
+		<FormTokenField
+			{ ...args }
+			value={ selected }
+			onChange={ ( tokens ) => setSelected( tokens ) }
+		/>
+	);
+};
+
+const suggestions = [ 'foo', 'bar', 'baz' ];
+
+export const Default = Template.bind( {} );
+Default.args = {
+	suggestions,
+};
+
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+	...Default.args,
+	disabled: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/index.ts

@@ -10,7 +10,6 @@ export * from './filter-reset-button';
 export * from './filter-submit-button';
 export * from './form';
 export * from './form-token-field';
-export * from './label';
 export * from './load-more-button';
 export * from './loading-mask';
 export * from './noninteractive';
@@ -26,9 +25,6 @@ export * from './read-more';
 export * from './reviews';
 export * from './sidebar-layout';
 export * from './snackbar-list';
-export * from './sort-select';
 export * from './state-input';
 export * from './summary';
 export * from './tabs';
-export * from './textarea';
-export * from './title';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/notice-banner/docs/docs.mdx

@@ -0,0 +1,112 @@
+import { Canvas, Meta, ArgTypes, Primary, Source } from '@storybook/blocks';
+
+import * as NoticeBannerStories from '../stories/index.stories.tsx';
+
+<Meta name="Docs" of={ NoticeBannerStories } />
+
+# NoticeBanner
+
+An informational UI displayed near the top of the store pages.
+
+<Primary />
+
+## Design Guidelines
+
+`NoticeBanner` is an informational UI element displayed near the top of store pages used to indicate the result of an action, or to draw the user's attention to necessary information.
+
+Notices are color-coded to indicate the type of message being communicated, and also show an icon to reinforce the meaning of the message. The color and icon used for a notice are determined by the `status` prop.
+
+### Default Notices
+
+By default, noices are grey and used for less important messaging.
+
+<Canvas of={ NoticeBannerStories.Default } />
+
+### Informational Notices
+
+Blue notices with an info icon are used for general information for buyers, but do not require them to take an action.
+
+<Canvas of={ NoticeBannerStories.Info } />
+
+### Error Notices
+
+Red notices with an alert icon are used to show that an error has occurred and that the user needs to take action.
+
+<Canvas of={ NoticeBannerStories.Error } />
+
+### Success Notices
+
+Green notices with a success icon are used to show an action was successful.
+
+<Canvas of={ NoticeBannerStories.Success } />
+
+### Warning Notices
+
+Yellow notices with an alert icon are used to show that the user may need to take action, or needs to be aware of something important.
+
+<Canvas of={ NoticeBannerStories.Warning } />
+
+### Error Summary
+
+If you provide a `summary` it will be displayed above the notice content. This can be useful for displaying a summary of errors in a list format.
+
+<Canvas of={ NoticeBannerStories.ErrorSummary } />
+
+## Development Guidelines
+
+### Props
+
+<ArgTypes />
+
+### Usage examples
+
+#### Example: string based notices
+
+To display a basic notice, pass the notice message as a string:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+<NoticeBanner status="info">Your message here</NoticeBanner>;
+```
+
+#### Example: components within notices
+
+For more complex markup, you can wrap any JSX element:
+
+```jsx
+import { NoticeBanner } from '@woocommerce/base-components';
+
+<NoticeBanner status="error">
+	<p>
+		An error occurred: <code>{ errorDetails }</code>.
+	</p>
+</NoticeBanner>;
+```
+
+#### Example: list of notices
+
+In this example, the summary prop is used to indicate to the user that there are errors in the form submission.
+
+```typescript
+import { NoticeBanner } from '@woocommerce/base-components';
+
+const errorMessages = [
+	'First error message',
+	'Second error message',
+	'Third error message',
+];
+
+<NoticeBanner
+	status="error"
+	summary="There are errors in your form submission:"
+>
+	<ul>
+		{ errorMessages.map( ( message ) => (
+			<li key={ message }>{ message }</li>
+		) ) }
+	</ul>
+</NoticeBanner>;
+```
+
+The list of error messages is rendered within the NoticeBanner component using an unordered list (`<ul>`) and list items (`<li>`). The `status` prop is set to `error` to indicate that the notice represents an error message.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx

@@ -14,29 +14,20 @@ import Button from '../button';
 import { useSpokenMessage } from '../../hooks';
 
 export interface NoticeBannerProps {
-	// The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
 	children: React.ReactNode;
-	// Additional class name to give to the notice.
-	className?: string | undefined;
-	// Determines whether the notice can be dismissed by the user.
-	isDismissible?: boolean | undefined;
-	// Function called when dismissing the notice.
-	onRemove?: ( () => void ) | undefined;
-	// Determines the level of politeness for the notice for assistive technology.
-	politeness?: 'polite' | 'assertive' | undefined;
-	// Optionally provided to change the spoken message for assistive technology.
-	spokenMessage?: string | React.ReactNode | undefined;
-	// Status determines the color of the notice and the icon.
+	className?: string;
+	isDismissible?: boolean;
+	onRemove?: () => void;
+	politeness?: 'polite' | 'assertive';
+	spokenMessage?: string | React.ReactNode;
 	status: 'success' | 'error' | 'info' | 'warning' | 'default';
-	// Optional summary text shown above notice content, used when several notices are listed together.
-	summary?: string | undefined;
+	summary?: string;
 }
 
 /**
- * NoticeBanner: An informational UI displayed near the top of the store pages.
+ * NoticeBanner component.
  *
- * Notices are informational UI displayed near the top of store pages. WooCommerce blocks, themes, and plugins all use
- * notices to indicate the result of an action, or to draw the user’s attention to necessary information.
+ * An informational UI displayed near the top of the store pages.
  */
 const NoticeBanner = ( {
 	className,

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/notice-banner/stories/index.stories.tsx

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import NoticeBanner, { NoticeBannerProps } from '../';
+const availableStatus = [ 'default', 'success', 'error', 'warning', 'info' ];
+
+export default {
+	title: 'Base Components/NoticeBanner',
+	argTypes: {
+		status: {
+			control: 'radio',
+			options: availableStatus,
+			description:
+				'Status determines the color of the notice and the icon.',
+		},
+		isDismissible: {
+			control: 'boolean',
+			description:
+				'Determines whether the notice can be dismissed by the user. When set to true, a close icon will be displayed on the banner.',
+		},
+		summary: {
+			description:
+				'Optional summary text shown above notice content, used when several notices are listed together.',
+			control: 'text',
+		},
+		className: {
+			description: 'Additional class name to give to the notice.',
+			control: 'text',
+		},
+		spokenMessage: {
+			description:
+				'Optionally provided to change the spoken message for assistive technology. If not provided, the `children` prop will be used as the spoken message.',
+			control: 'text',
+		},
+		politeness: {
+			control: 'radio',
+			options: [ 'polite', 'assertive' ],
+			description:
+				'Determines the level of politeness for the notice for assistive technology.',
+		},
+		children: {
+			description:
+				'The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.',
+			disable: true,
+		},
+		onRemove: {
+			description:
+				'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called.',
+			disable: true,
+		},
+	},
+	component: NoticeBanner,
+} as Meta< NoticeBannerProps >;
+
+const Template: StoryFn< NoticeBannerProps > = ( args ) => {
+	return <NoticeBanner { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'This is a default notice',
+	status: 'default',
+	isDismissible: true,
+	summary: undefined,
+	className: undefined,
+	spokenMessage: undefined,
+	politeness: undefined,
+};
+
+export const Error = Template.bind( {} );
+Error.args = {
+	children: 'This is an error notice',
+	status: 'error',
+};
+
+export const Warning = Template.bind( {} );
+Warning.args = {
+	children: 'This is a warning notice',
+	status: 'warning',
+};
+
+export const Info = Template.bind( {} );
+Info.args = {
+	children: 'This is an informational notice',
+	status: 'info',
+};
+
+export const Success = Template.bind( {} );
+Success.args = {
+	children: 'This is a success notice',
+	status: 'success',
+};
+
+export const ErrorSummary = Template.bind( {} );
+ErrorSummary.args = {
+	summary: 'Please fix the following errors',
+	children: (
+		<ul>
+			<li>This is an error notice</li>
+			<li>This is another error notice</li>
+		</ul>
+	),
+	status: 'error',
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/pagination/style.scss

@@ -15,6 +15,10 @@
 	padding: 0.3em 0.6em;
 	min-width: 2.2em;
 
+	&:not([disabled]) {
+		cursor: pointer;
+	}
+
 	@include breakpoint("<782px") {
 		padding: 0.1em 0.2em;
 		min-width: 1.6em;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/price-slider/stories/index.stories.tsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useState } from '@wordpress/element';
+import { currencies, currencyControl } from '@woocommerce/storybook-controls';
+
+/**
+ * Internal dependencies
+ */
+import PriceSlider, { PriceSliderProps } from '..';
+
+export default {
+	title: 'Base Components/PriceSlider',
+	component: PriceSlider,
+	args: {
+		currency: currencies.USD,
+		maxPrice: 5000,
+		maxConstraint: 5000,
+		minConstraint: 1000,
+		minPrice: 1000,
+		step: 250,
+	},
+	argTypes: {
+		currency: currencyControl,
+		maxPrice: { control: { disable: true } },
+		minPrice: { control: { disable: true } },
+	},
+} as Meta< PriceSliderProps >;
+
+const Template: Story< PriceSliderProps > = ( args ) => {
+	const { maxPrice, minPrice, ...props } = args;
+	// PriceSlider expects client to update min & max price, i.e. is a controlled component
+	const [ min, setMin ] = useState( minPrice );
+	const [ max, setMax ] = useState( maxPrice );
+
+	return (
+		<PriceSlider
+			{ ...props }
+			maxPrice={ max }
+			minPrice={ min }
+			onChange={ ( [ newMin, newMax ] ) => {
+				setMin( newMin );
+				setMax( newMax );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+
+export const WithoutInputs = Template.bind( {} );
+WithoutInputs.args = {
+	showInputFields: false,
+};
+
+export const WithButton = Template.bind( {} );
+WithButton.args = {
+	showFilterButton: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/product-list/product-sort-select/index.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import SortSelect from '@woocommerce/base-components/sort-select';
+import { SortSelect } from '@woocommerce/blocks-components';
+
 /**
  * Internal dependencies
  */

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/product-name/stories/index.stories.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ProductName, { ProductNameProps } from '..';
+
+export default {
+	title: 'Base Components/ProductName',
+	component: ProductName,
+	args: {
+		name: 'Test product',
+		permalink: '#',
+	},
+} as Meta< ProductNameProps >;
+
+const Template: Story< ProductNameProps > = ( args ) => (
+	<ProductName { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	disabled: false,
+};
+
+export const DisabledProduct = Template.bind( {} );
+DisabledProduct.args = {
+	disabled: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/product-price/index.tsx

@@ -280,7 +280,7 @@ const ProductPrice = ( {
 		console.error( 'Price formats need to include the `<price/>` tag.' );
 	}
 
-	const isDiscounted = regularPrice && price !== regularPrice;
+	const isDiscounted = regularPrice && price && price < regularPrice;
 	let priceComponent = (
 		<span
 			className={ classNames(

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/product-price/stories/index.stories.tsx

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { currencyControl } from '@woocommerce/storybook-controls';
+
+/**
+ * Internal dependencies
+ */
+import ProductPrice, { ProductPriceProps } from '..';
+
+const ALLOWED_ALIGN_VALUES = [ 'left', 'center', 'right' ];
+
+export default {
+	title: 'Base Components/ProductPrice',
+	component: ProductPrice,
+	argTypes: {
+		align: {
+			control: { type: 'radio' },
+			options: ALLOWED_ALIGN_VALUES,
+		},
+		currency: currencyControl,
+	},
+	args: {
+		align: 'left',
+		format: '<price/>',
+		price: 3000,
+		currency: {
+			code: 'USD',
+			symbol: '$',
+			thousandSeparator: ' ',
+			decimalSeparator: '.',
+			minorUnit: 2,
+			prefix: '$',
+			suffix: '',
+		},
+	},
+} as Meta< ProductPriceProps >;
+
+const Template: Story< ProductPriceProps > = ( args ) => (
+	<ProductPrice { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const Sale = Template.bind( {} );
+Sale.args = {
+	regularPrice: 4500,
+};
+
+export const Range = Template.bind( {} );
+Range.args = {
+	maxPrice: 5000,
+	minPrice: 3000,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/quantity-selector/stories/index.stories.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useArgs } from '@storybook/client-api';
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import QuantitySelector, { QuantitySelectorProps } from '..';
+
+export default {
+	title: 'Base Components/QuantitySelector',
+	component: QuantitySelector,
+	args: {
+		itemName: 'widgets',
+		quantity: 1,
+	},
+} as Meta< QuantitySelectorProps >;
+
+const Template: Story< QuantitySelectorProps > = ( args ) => {
+	const [ {}, setArgs ] = useArgs();
+
+	const onChange = ( newVal: number ) => {
+		args.onChange?.( newVal );
+		setArgs( { quantity: newVal } );
+	};
+
+	return <QuantitySelector { ...args } onChange={ onChange } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+	disabled: true,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/read-more/stories/index.stories.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ReadMore, { defaultProps, ReadMoreProps } from '..';
+
+export default {
+	title: 'Base Components/ReadMore',
+	component: ReadMore,
+	args: defaultProps,
+	argTypes: {
+		children: { control: { disable: true } },
+	},
+} as Meta< ReadMoreProps >;
+
+const LongText = (
+	<>
+		<h1>
+			No! Alderaan is peaceful. We have no weapons. You can&apos;t
+			possibly…
+		</h1>
+		<p>
+			As you wish. But with the blast shield down, I can&apos;t even see!
+			How am I supposed to fight? Look, I ain&apos;t in this for your
+			revolution, and I&apos;m not in it for you, Princess. I expect to be
+			well paid. I&apos;m in it for the money.
+		</p>
+		<p>
+			You mean it controls your actions?
+			<strong>
+				{ ' ' }
+				She must have hidden the plans in the escape pod.
+			</strong>{ ' ' }
+			<em>
+				Send a detachment down to retrieve them, and see to it
+				personally, Commander.
+			</em>
+			There&apos;ll be no one to stop us this time!
+		</p>
+		<h2>Escape is not his plan. I must face him, alone.</h2>
+		<ol>
+			<li>Partially, but it also obeys your commands.</li>
+			<li>
+				Leave that to me. Send a distress signal, and inform the Senate
+				that all on board were killed.
+			</li>
+			<li>
+				A tremor in the Force. The last time I felt it was in the
+				presence of my old master.
+			</li>
+		</ol>
+		<aside>
+			<a href="http://fillerama.io">
+				Content from http://fillerama.io &quot;Star Wars&quot;
+			</a>
+		</aside>
+	</>
+);
+
+const Template: Story< ReadMoreProps > = ( args ) => <ReadMore { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: LongText,
+	maxLines: 6,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/reviews/review-sort-select/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import SortSelect from '@woocommerce/base-components/sort-select';
+import { SortSelect } from '@woocommerce/blocks-components';
 import type { ChangeEventHandler } from 'react';
 
 /**
@@ -12,7 +12,7 @@ import './style.scss';
 
 interface ReviewSortSelectProps {
 	onChange: ChangeEventHandler;
-	readOnly: boolean;
+	readOnly?: boolean;
 	value: 'most-recent' | 'highest-rating' | 'lowest-rating';
 }
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/snackbar-list/docs/docs.mdx

@@ -0,0 +1,90 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+
+import * as SnackbarListStories from '../stories/index.stories.tsx';
+import * as SnackbarStories from '../stories/snackbar.stories.tsx';
+
+<Meta name="Docs" of={ SnackbarListStories } />
+
+# SnackbarList
+
+A temporary informational UI element displayed at the bottom of store pages.
+
+<Canvas
+	of={ SnackbarListStories.Default }
+	layout="padded"
+	className={ 'force-canvas-height' }
+/>
+
+## Design Guidelines
+
+The Snackbar is a temporary informational UI element displayed at the bottom of store pages. WooCommerce blocks, themes, and plugins all use snackbar notices to indicate the result of a successful action. For example, adding something to the cart.
+
+Snackbar notices work in the same way as the NoticeBanner component, and support the same statuses and styles.
+
+### Default Snackbars
+
+By default, notices are grey and used for less important messaging.
+
+<Canvas of={ SnackbarStories.Default } />
+
+### Informational Snackbars
+
+Blue notices with an info icon are used for general information for buyers, but do not require action.
+
+<Canvas of={ SnackbarStories.Info } />
+
+### Error Snackbars
+
+Red notices with an alert icon are used to show that an error has occurred and that the user needs to take action.
+
+<Canvas of={ SnackbarStories.Error } />
+
+### Success Snackbars
+
+Green notices with a success icon are used to show an action was successful.
+
+<Canvas of={ SnackbarStories.Success } />
+
+### Warning Snackbars
+
+Yellow notices with an alert icon are used to show that the user may need to take action, or needs to be aware of something important.
+
+<Canvas of={ SnackbarStories.Warning } />
+
+## Development Guidelines
+
+The component consuming `SnackbarList` is responsible for managing the notices state. The `SnackbarList` component will automatically remove notices from the list when they are dismissed by the user using the provided `onRemove` callback, and also when the notice times out after 10000ms.
+
+### Props
+
+<ArgTypes />
+
+### NoticeType
+
+Each notice can be provided with the following args.
+
+-   The `id` (required) prop is used to identify the notice and should be unique.
+-   The `content` (required) prop is the content to display in the notice.
+-   The `status` prop is used to determine the color of the notice and the icon. Acceptable values are 'success', 'error', 'info', 'warning', and 'default'.
+-   The `isDismissible` prop determines whether the notice can be dismissed by the user.
+-   The `spokenMessage` prop is used to change the spoken message for assistive technology. If not provided, the `content` prop will be used as the spoken message.
+
+### Usage example
+
+To display snackbar notices, pass an array of `notices` to the `SnackbarList` component:
+
+```jsx
+import { SnackbarList } from '@woocommerce/base-components';
+
+const notices = [
+	{
+        id: '1',
+        content: 'This is a snackbar notice.',
+        status: 'default',
+        isDismissible: true,
+        spokenMessage: "Hello snackbar!"
+    }
+];
+
+<SnackbarList notices={ notices }>;
+```

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/snackbar-list/snackbar.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { useEffect } from '@wordpress/element';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -9,15 +10,18 @@ import { useEffect } from '@wordpress/element';
 import NoticeBanner, { NoticeBannerProps } from '../notice-banner';
 import { SNACKBAR_TIMEOUT } from './constants';
 
-const Snackbar = ( {
+export interface SnackbarProps extends NoticeBannerProps {
+	// A ref to the list that contains the snackbar.
+	listRef?: React.MutableRefObject< HTMLDivElement | null >;
+}
+
+export const Snackbar = ( {
 	onRemove = () => void 0,
 	children,
 	listRef,
+	className,
 	...notice
-}: {
-	// A ref to the list that contains the snackbar.
-	listRef?: React.MutableRefObject< HTMLDivElement | null >;
-} & NoticeBannerProps ) => {
+}: SnackbarProps ) => {
 	// Only set up the timeout dismiss if we're not explicitly dismissing.
 	useEffect( () => {
 		const timeoutHandle = setTimeout( () => {
@@ -29,6 +33,10 @@ const Snackbar = ( {
 
 	return (
 		<NoticeBanner
+			className={ classNames(
+				className,
+				'wc-block-components-notice-snackbar'
+			) }
 			{ ...notice }
 			onRemove={ () => {
 				// Prevent focus loss by moving it to the list element.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/index.stories.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import SnackbarList, { SnackbarListProps } from '../';
+
+export default {
+	title: 'Base Components/SnackbarList',
+	args: {
+		notices: [
+			{
+				id: '1',
+				content: 'This is a snackbar notice.',
+				status: 'success',
+				isDismissible: true,
+			},
+		],
+		className: undefined,
+		onRemove: () => void 0,
+	},
+	argTypes: {
+		className: {
+			description: 'Additional class name to give to the notice.',
+			control: 'text',
+		},
+		notices: {
+			description:
+				'A list of notices to display as snackbars. Each notice must have an `id` and `content` prop.',
+			disable: true,
+		},
+		onRemove: {
+			description:
+				'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called. This is also called when the notice times out after 10000ms.',
+			disable: true,
+		},
+	},
+	component: SnackbarList,
+} as Meta< SnackbarListProps >;
+
+const Template: StoryFn< SnackbarListProps > = ( args ) => {
+	return <SnackbarList { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	notices: [
+		{
+			id: '1',
+			content: 'This is a snackbar notice.',
+			status: 'default',
+			isDismissible: true,
+		},
+		{
+			id: '2',
+			content: 'This is an informational snackbar notice.',
+			status: 'info',
+			isDismissible: true,
+		},
+		{
+			id: '3',
+			content: 'This is a snackbar error notice.',
+			status: 'error',
+			isDismissible: true,
+		},
+		{
+			id: '4',
+			content: 'This is a snackbar warning notice.',
+			status: 'warning',
+			isDismissible: true,
+		},
+		{
+			id: '5',
+			content: 'This is a snackbar success notice.',
+			status: 'success',
+			isDismissible: true,
+		},
+	],
+	className: undefined,
+	onRemove: () => void 0,
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/snackbar-list/stories/snackbar.stories.tsx

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Snackbar, { SnackbarProps } from '../snackbar';
+const availableStatus = [ 'default', 'success', 'error', 'warning', 'info' ];
+
+export default {
+	title: 'Base Components/SnackbarList/Snackbar',
+	argTypes: {
+		status: {
+			control: 'radio',
+			options: availableStatus,
+			description:
+				'Status determines the color of the notice and the icon.',
+		},
+		isDismissible: {
+			control: 'boolean',
+			description:
+				'Determines whether the notice can be dismissed by the user. When set to true, a close icon will be displayed on the banner.',
+		},
+		summary: {
+			description:
+				'Optional summary text shown above notice content, used when several notices are listed together.',
+			control: 'text',
+		},
+		className: {
+			description: 'Additional class name to give to the notice.',
+			control: 'text',
+		},
+		spokenMessage: {
+			description:
+				'Optionally provided to change the spoken message for assistive technology. If not provided, the `children` prop will be used as the spoken message.',
+			control: 'text',
+		},
+		politeness: {
+			control: 'radio',
+			options: [ 'polite', 'assertive' ],
+			description:
+				'Determines the level of politeness for the notice for assistive technology.',
+		},
+		children: {
+			description:
+				'The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.',
+			disable: true,
+		},
+		onRemove: {
+			description:
+				'Function called when dismissing the notice. When the close icon is clicked or the Escape key is pressed, this function will be called.',
+			disable: true,
+		},
+	},
+	component: Snackbar,
+} as Meta< SnackbarProps >;
+
+const Template: StoryFn< SnackbarProps > = ( args ) => {
+	return <Snackbar { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'This is a default snackbar notice',
+	status: 'default',
+	isDismissible: true,
+	summary: undefined,
+	className: undefined,
+	spokenMessage: undefined,
+	politeness: undefined,
+};
+
+export const Error = Template.bind( {} );
+Error.args = {
+	children: 'This is an error snackbar notice',
+	status: 'error',
+};
+
+export const Warning = Template.bind( {} );
+Warning.args = {
+	children: 'This is a warning snackbar notice',
+	status: 'warning',
+};
+
+export const Info = Template.bind( {} );
+Info.args = {
+	children: 'This is an informational snackbar notice',
+	status: 'info',
+};
+
+export const Success = Template.bind( {} );
+Success.args = {
+	children: 'This is a success snackbar notice',
+	status: 'success',
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/snackbar-list/style.scss

@@ -9,25 +9,32 @@
 	bottom: $gap-large;
 	left: $gap-large;
 	right: $gap-large;
+}
 
-	.wc-block-components-notice-banner {
-		display: inline-flex;
-		width: auto;
-		max-width: 600px;
-		pointer-events: all;
-		border: 1px solid transparent;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-		position: relative;
-		margin: $gap-large 0 0;
+.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner,
+.wc-block-components-notice-banner.wc-block-components-notice-snackbar {
+	display: inline-flex;
+	width: auto;
+	max-width: 600px;
+	pointer-events: all;
+	border: 1px solid transparent;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	position: relative;
+	margin: $gap-large $gap 0 0;
 
-		&.is-default {
-			border-color: $gray-800;
-		}
+	&.is-error,
+	&.is-info,
+	&.is-success {
+		border-color: transparent;
+	}
 
-		@include breakpoint("<782px") {
-			width: 100%;
-			max-width: none;
-		}
+	&.is-default {
+		border-color: $gray-800;
+	}
+
+	@include breakpoint("<782px") {
+		width: 100%;
+		max-width: none;
 	}
 }
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/state-input/state-input.tsx

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCallback, useMemo, useEffect, useRef } from '@wordpress/element';
 import classnames from 'classnames';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/tabs/stories/index.stories.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __TabsWithoutInstanceId as Tabs, TabsProps } from '..';
+
+export default {
+	title: 'Base Components/Tabs',
+	component: Tabs,
+	args: {
+		tabs: [
+			{
+				name: 'firstTab',
+				title: 'First Tab',
+				content: <div>Content of the first tab</div>,
+			},
+			{
+				name: 'secondTab',
+				title: 'Second Tab',
+				content: <div>Content of the second tab</div>,
+			},
+		],
+		initialTabName: 'firstTab',
+	},
+	argTypes: {
+		initialTabName: {
+			control: {
+				type: 'select',
+				options: [ 'firstTab', 'secondTab' ],
+			},
+		},
+	},
+} as Meta< TabsProps >;
+
+const Template: Story< TabsProps > = ( args ) => {
+	const [ initialTab, setInitialTab ] = useState( args.initialTabName );
+
+	return (
+		<Tabs
+			initialTabName={ initialTab }
+			onSelect={ ( newTabName ) => {
+				setInitialTab( newTabName );
+			} }
+			{ ...args }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -16,7 +16,7 @@ import {
 	PAYMENT_STORE_KEY,
 	CART_STORE_KEY,
 } from '@woocommerce/block-data';
-import { ValidationInputError } from '@woocommerce/blocks-checkout';
+import { ValidationInputError } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/context/hooks/use-checkout-address.ts

@@ -24,8 +24,6 @@ interface CheckoutAddress {
 	setShippingAddress: ( data: Partial< ShippingAddress > ) => void;
 	setBillingAddress: ( data: Partial< BillingAddress > ) => void;
 	setEmail: ( value: string ) => void;
-	setBillingPhone: ( value: string ) => void;
-	setShippingPhone: ( value: string ) => void;
 	useShippingAsBilling: boolean;
 	setUseShippingAsBilling: ( useShippingAsBilling: boolean ) => void;
 	defaultAddressFields: AddressFields;
@@ -59,28 +57,13 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 	} = useCustomerData();
 
 	const setEmail = useCallback(
-		( value ) =>
+		( value: string ) =>
 			void setBillingAddress( {
 				email: value,
 			} ),
 		[ setBillingAddress ]
 	);
 
-	const setBillingPhone = useCallback(
-		( value ) =>
-			void setBillingAddress( {
-				phone: value,
-			} ),
-		[ setBillingAddress ]
-	);
-
-	const setShippingPhone = useCallback(
-		( value ) =>
-			void setShippingAddress( {
-				phone: value,
-			} ),
-		[ setShippingAddress ]
-	);
 	const forcedBillingAddress: boolean = getSetting(
 		'forcedBillingAddress',
 		false
@@ -91,8 +74,6 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 		setShippingAddress,
 		setBillingAddress,
 		setEmail,
-		setBillingPhone,
-		setShippingPhone,
 		defaultAddressFields,
 		useShippingAsBilling,
 		setUseShippingAsBilling: __internalSetUseShippingAsBilling,
@@ -101,8 +82,8 @@ export const useCheckoutAddress = (): CheckoutAddress => {
 			! forcedBillingAddress && needsShipping && ! prefersCollection,
 		showShippingMethods: needsShipping && ! prefersCollection,
 		showBillingFields:
-			! needsShipping || ! useShippingAsBilling || prefersCollection,
+			! needsShipping || ! useShippingAsBilling || !! prefersCollection,
 		forcedBillingAddress,
-		useBillingAsShipping: forcedBillingAddress || prefersCollection,
+		useBillingAsShipping: forcedBillingAddress || !! prefersCollection,
 	};
 };

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/utils/test/errors.js

@@ -35,12 +35,10 @@ describe( 'formatError', () => {
 		const mockResponse = new Response( mockMalformedJson, { status: 400 } );
 
 		const error = await formatError( mockResponse );
-		const expectedError = {
-			message:
-				'invalid json response body at  reason: Unexpected end of JSON input',
-			type: 'general',
-		};
 
-		expect( error ).toEqual( expectedError );
+		expect( error.message ).toContain(
+			'invalid json response body at  reason:'
+		);
+		expect( error.type ).toEqual( 'general' );
 	} );
 } );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/cart-express-payment.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
 import { noticeContexts } from '@woocommerce/base-context';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import { useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY } from '@woocommerce/block-data';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/checkout-express-payment.js

@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEditorContext, noticeContexts } from '@woocommerce/base-context';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
-import Title from '@woocommerce/base-components/title';
+import { Title, StoreNoticesContainer } from '@woocommerce/blocks-components';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
 import { CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY } from '@woocommerce/block-data';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-error-boundary.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import { noticeContexts } from '@woocommerce/base-context';
 import { NoticeType } from '@woocommerce/types';
 interface PaymentMethodErrorBoundaryProps {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/block.js

@@ -14,10 +14,8 @@ import {
 	CartProvider,
 	noticeContexts,
 } from '@woocommerce/base-context';
-import {
-	SlotFillProvider,
-	StoreNoticesContainer,
-} from '@woocommerce/blocks-checkout';
+import { SlotFillProvider } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx

@@ -4,7 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx

@@ -2,15 +2,13 @@
  * External dependencies
  */
 import { TotalsDiscount } from '@woocommerce/base-components/cart-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import {
-	ExperimentalDiscountsMeta,
-	TotalsWrapper,
-} from '@woocommerce/blocks-checkout';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx

@@ -4,7 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 import { getSetting } from '@woocommerce/settings';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/cart/style.scss

@@ -96,6 +96,9 @@
 			display: none;
 		}
 	}
+	table.wc-block-cart-items {
+		margin: 0;
+	}
 }
 
 .is-medium,

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx

@@ -7,6 +7,7 @@ import type {
 	CartShippingAddress,
 	CartBillingAddress,
 } from '@woocommerce/types';
+import { AddressFields, AddressField } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -17,12 +18,12 @@ const AddressCard = ( {
 	address,
 	onEdit,
 	target,
-	showPhoneField,
+	fieldConfig,
 }: {
 	address: CartShippingAddress | CartBillingAddress;
 	onEdit: () => void;
 	target: string;
-	showPhoneField: boolean;
+	fieldConfig: Record< keyof AddressFields, Partial< AddressField > >;
 } ): JSX.Element | null => {
 	return (
 		<div className="wc-block-components-address-card">
@@ -33,7 +34,7 @@ const AddressCard = ( {
 				<div className="wc-block-components-address-card__address-section">
 					{ [
 						address.address_1,
-						address.address_2,
+						! fieldConfig.address_2.hidden && address.address_2,
 						address.city,
 						address.state,
 						address.postcode,
@@ -46,7 +47,7 @@ const AddressCard = ( {
 							<span key={ `address-` + index }>{ field }</span>
 						) ) }
 				</div>
-				{ address.phone && showPhoneField ? (
+				{ address.phone && ! fieldConfig.phone.hidden ? (
 					<div
 						key={ `address-phone` }
 						className="wc-block-components-address-card__address-section"

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/block.tsx

@@ -12,10 +12,8 @@ import { CheckoutProvider, noticeContexts } from '@woocommerce/base-context';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
 import { CURRENT_USER_IS_ADMIN, getSetting } from '@woocommerce/settings';
-import {
-	SlotFillProvider,
-	StoreNoticesContainer,
-} from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
+import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/form-step/form-step-heading.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import Title from '@woocommerce/base-components/title';
+import { Title } from '@woocommerce/blocks-components';
 
 /**
  * Step Heading Component

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/block.tsx

@@ -9,10 +9,8 @@ import {
 } from '@woocommerce/base-components/cart-checkout';
 import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { noticeContexts } from '@woocommerce/base-context';
-import {
-	StoreNoticesContainer,
-	applyCheckoutFilter,
-} from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
+import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx

@@ -14,9 +14,10 @@ import type {
 	AddressField,
 	AddressFields,
 } from '@woocommerce/settings';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { CART_STORE_KEY } from '@woocommerce/block-data';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -29,17 +30,19 @@ const Block = ( {
 	showPhoneField = false,
 	requireCompanyField = false,
 	requirePhoneField = false,
-	forceEditing = false,
 }: {
 	showCompanyField: boolean;
 	showApartmentField: boolean;
 	showPhoneField: boolean;
 	requireCompanyField: boolean;
 	requirePhoneField: boolean;
-	forceEditing?: boolean;
 } ): JSX.Element => {
-	const { billingAddress, setShippingAddress, useBillingAsShipping } =
-		useCheckoutAddress();
+	const {
+		shippingAddress,
+		billingAddress,
+		setShippingAddress,
+		useBillingAsShipping,
+	} = useCheckoutAddress();
 	const { isEditor } = useEditorContext();
 
 	// Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled.
@@ -71,11 +74,17 @@ const Block = ( {
 			address_2: {
 				hidden: ! showApartmentField,
 			},
+			phone: {
+				hidden: ! showPhoneField,
+				required: requirePhoneField,
+			},
 		};
 	}, [
 		showCompanyField,
 		requireCompanyField,
 		showApartmentField,
+		showPhoneField,
+		requirePhoneField,
 	] ) as Record< keyof AddressFields, Partial< AddressField > >;
 
 	const WrapperComponent = isEditor ? Noninteractive : Fragment;
@@ -89,6 +98,20 @@ const Block = ( {
 			cartDataLoaded: store.hasFinishedResolution( 'getCartData' ),
 		};
 	} );
+
+	// Default editing state for CustomerAddress component comes from the current address and whether or not we're in the editor.
+	const hasAddress = !! (
+		billingAddress.address_1 &&
+		( billingAddress.first_name || billingAddress.last_name )
+	);
+	const { email, ...billingAddressWithoutEmail } = billingAddress;
+	const billingMatchesShipping = isShallowEqual(
+		billingAddressWithoutEmail,
+		shippingAddress
+	);
+	const defaultEditingAddress =
+		isEditor || ! hasAddress || billingMatchesShipping;
+
 	return (
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
@@ -96,9 +119,7 @@ const Block = ( {
 				{ cartDataLoaded ? (
 					<CustomerAddress
 						addressFieldsConfig={ addressFieldsConfig }
-						showPhoneField={ showPhoneField }
-						requirePhoneField={ requirePhoneField }
-						forceEditing={ forceEditing }
+						defaultEditing={ defaultEditingAddress }
 					/>
 				) : null }
 			</WrapperComponent>

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx

@@ -16,35 +16,24 @@ import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
  * Internal dependencies
  */
 import AddressWrapper from '../../address-wrapper';
-import PhoneNumber from '../../phone-number';
 import AddressCard from '../../address-card';
 
 const CustomerAddress = ( {
 	addressFieldsConfig,
-	showPhoneField,
-	requirePhoneField,
-	forceEditing = false,
+	defaultEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
-	showPhoneField: boolean;
-	requirePhoneField: boolean;
-	forceEditing?: boolean;
+	defaultEditing?: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
 		billingAddress,
 		setShippingAddress,
 		setBillingAddress,
-		setBillingPhone,
-		setShippingPhone,
 		useBillingAsShipping,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-	const hasAddress = !! (
-		billingAddress.address_1 &&
-		( billingAddress.first_name || billingAddress.last_name )
-	);
-	const [ editing, setEditing ] = useState( ! hasAddress || forceEditing );
+	const [ editing, setEditing ] = useState( defaultEditing );
 
 	// Forces editing state if store has errors.
 	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
@@ -54,8 +43,9 @@ const CustomerAddress = ( {
 			invalidProps: Object.keys( billingAddress )
 				.filter( ( key ) => {
 					return (
+						key !== 'email' &&
 						store.getValidationError( 'billing_' + key ) !==
-						undefined
+							undefined
 					);
 				} )
 				.filter( Boolean ),
@@ -97,10 +87,10 @@ const CustomerAddress = ( {
 				onEdit={ () => {
 					setEditing( true );
 				} }
-				showPhoneField={ showPhoneField }
+				fieldConfig={ addressFieldsConfig }
 			/>
 		),
-		[ billingAddress, showPhoneField ]
+		[ billingAddress, addressFieldsConfig ]
 	);
 
 	const renderAddressFormComponent = useCallback(
@@ -114,39 +104,13 @@ const CustomerAddress = ( {
 					fields={ addressFieldKeys }
 					fieldConfig={ addressFieldsConfig }
 				/>
-				{ showPhoneField && (
-					<PhoneNumber
-						id="billing-phone"
-						errorId={ 'billing_phone' }
-						isRequired={ requirePhoneField }
-						value={ billingAddress.phone }
-						onChange={ ( value ) => {
-							setBillingPhone( value );
-							dispatchCheckoutEvent( 'set-phone-number', {
-								step: 'billing',
-							} );
-							if ( useBillingAsShipping ) {
-								setShippingPhone( value );
-								dispatchCheckoutEvent( 'set-phone-number', {
-									step: 'billing',
-								} );
-							}
-						} }
-					/>
-				) }
 			</>
 		),
 		[
 			addressFieldKeys,
 			addressFieldsConfig,
 			billingAddress,
-			dispatchCheckoutEvent,
 			onChangeAddress,
-			requirePhoneField,
-			setBillingPhone,
-			setShippingPhone,
-			showPhoneField,
-			useBillingAsShipping,
 		]
 	);
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { useRef, useEffect } from '@wordpress/element';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/blocks-components';
 import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
@@ -43,21 +42,8 @@ const FrontendBlock = ( {
 		showCompanyField,
 		showPhoneField,
 	} = useCheckoutBlockContext();
-	const {
-		showBillingFields,
-		forcedBillingAddress,
-		useBillingAsShipping,
-		useShippingAsBilling,
-	} = useCheckoutAddress();
-
-	// If initial state was true, force editing to true so address fields are visible if the useShippingAsBilling option is unchecked.
-	const toggledUseShippingAsBilling = useRef( useShippingAsBilling );
-
-	useEffect( () => {
-		if ( useShippingAsBilling ) {
-			toggledUseShippingAsBilling.current = true;
-		}
-	}, [ useShippingAsBilling ] );
+	const { showBillingFields, forcedBillingAddress, useBillingAsShipping } =
+		useCheckoutAddress();
 
 	if ( ! showBillingFields && ! useBillingAsShipping ) {
 		return null;
@@ -86,7 +72,6 @@ const FrontendBlock = ( {
 				showCompanyField={ showCompanyField }
 				showPhoneField={ showPhoneField }
 				requirePhoneField={ requirePhoneField }
-				forceEditing={ toggledUseShippingAsBilling.current }
 			/>
 			{ children }
 		</FormStep>

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

@@ -8,19 +8,15 @@ import {
 	noticeContexts,
 } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
+import { CheckboxControl } from '@woocommerce/blocks-checkout';
 import {
-	CheckboxControl,
-	ValidatedTextInput,
 	StoreNoticesContainer,
-} from '@woocommerce/blocks-checkout';
+	ValidatedTextInput,
+} from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
 import { isEmail } from '@wordpress/url';
 
-/**
- * Internal dependencies
- */
-
 const Block = (): JSX.Element => {
 	const { customerId, shouldCreateAccount } = useSelect( ( select ) => {
 		const store = select( CHECKOUT_STORE_KEY );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/frontend.tsx

@@ -3,6 +3,8 @@
  */
 import classnames from 'classnames';
 import { Main } from '@woocommerce/base-components/sidebar-layout';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
+import { useEffect } from '@wordpress/element';
 
 const FrontendBlock = ( {
 	children,
@@ -11,6 +13,14 @@ const FrontendBlock = ( {
 	children: JSX.Element;
 	className?: string;
 } ): JSX.Element => {
+	const { dispatchCheckoutEvent } = useStoreEvents();
+
+	// Ignore changes to dispatchCheckoutEvent callback so this is ran on first mount only.
+	useEffect( () => {
+		dispatchCheckoutEvent( 'render-checkout-form' );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
 	return (
 		<Main className={ classnames( 'wc-block-checkout__main', className ) }>
 			<form className="wc-block-components-form wc-block-checkout__form">

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss

@@ -18,11 +18,11 @@
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: space-between;
+			gap: 0 calc(#{$gap-smaller} * 2); // Required for spacing especially when using flex-grow
 
 			.wc-block-components-text-input,
-			.wc-block-components-country-input,
 			.wc-block-components-state-input {
-				flex: 0 0 calc(50% - #{$gap-smaller});
+				flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space
 				box-sizing: border-box;
 
 				&:nth-of-type(2),
@@ -33,7 +33,8 @@
 
 			.wc-block-components-address-form__company,
 			.wc-block-components-address-form__address_1,
-			.wc-block-components-address-form__address_2 {
+			.wc-block-components-address-form__address_2,
+			.wc-block-components-country-input {
 				flex: 0 0 100%;
 			}
 		}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx

@@ -3,7 +3,7 @@
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx

@@ -4,7 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 
 const Block = ( {
 	className = '',

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx

@@ -2,15 +2,13 @@
  * External dependencies
  */
 import { TotalsDiscount } from '@woocommerce/base-components/cart-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import {
-	ExperimentalDiscountsMeta,
-	TotalsWrapper,
-} from '@woocommerce/blocks-checkout';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx

@@ -4,10 +4,12 @@
 import classnames from 'classnames';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
-import { FormStep } from '@woocommerce/blocks-components';
+import {
+	FormStep,
+	StoreNoticesContainer,
+} from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
 import { noticeContexts } from '@woocommerce/base-context';
 
 /**

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss

@@ -1,66 +1,68 @@
 .wc-block-checkout__pickup-options,
 .wp-block-woocommerce-checkout-pickup-options-block {
-	.wc-block-components-radio-control__option {
-		@include with-translucent-border(0 0 1px);
-		margin: 0;
-		padding: em($gap-small) 0 em($gap-small) em($gap-largest);
-	}
-	.wc-block-components-shipping-rates-control__no-results-notice {
-		margin: em($gap-small) 0;
-	}
-	.wc-block-components-radio-control .wc-block-components-radio-control__input {
-		top: auto;
-		transform: none;
-		margin-top: 1px;
-	}
-	.wc-block-components-radio-control__option-layout {
-		display: block;
-	}
-	.wc-block-components-radio-control__label-group {
-		width: 100%;
-		display: flex;
-
-		> :last-child {
-			margin-left: auto;
+	.wc-block-components-local-pickup-rates-control {
+		.wc-block-components-radio-control__option {
+			@include with-translucent-border(0 0 1px);
+			margin: 0;
+			padding: em($gap-small) 0 em($gap-small) em($gap-largest);
 		}
-	}
-	.wc-block-components-radio-control__description-group {
-		display: none;
-	}
-	.wc-block-components-radio-control__option-checked {
-		.wc-block-components-radio-control__description-group {
+		.wc-block-components-shipping-rates-control__no-results-notice {
+			margin: em($gap-small) 0;
+		}
+		.wc-block-components-radio-control .wc-block-components-radio-control__input {
+			top: auto;
+			transform: none;
+			margin-top: 1px;
+		}
+		.wc-block-components-radio-control__option-layout {
 			display: block;
 		}
-	}
-	.wc-block-components-radio-control__label-group {
-		em {
-			text-transform: uppercase;
-			font-style: inherit;
-		}
-	}
-	.wc-block-components-radio-control__description-group {
-		width: 100%;
-		box-sizing: border-box;
-		background-color: $gray-100;
-		border-radius: $universal-border-radius;
-		padding: 1px em($gap-small);
-		margin-top: em($gap-smaller);
-		@include font-size(regular);
-	}
-	.wc-block-components-radio-control__description,
-	.wc-block-components-radio-control__secondary-description {
-		width: 100%;
-		text-align: left;
-		margin: em($gap-small) 0;
-		display: block;
-	}
-	.wc-block-components-radio-control__secondary-description {
-		color: $gray-700;
+		.wc-block-components-radio-control__label-group {
+			width: 100%;
+			display: flex;
 
-		> svg {
-			vertical-align: middle;
-			margin-top: -4px;
-			fill: currentColor;
+			> :last-child {
+				margin-left: auto;
+			}
+		}
+		.wc-block-components-radio-control__description-group {
+			display: none;
+		}
+		.wc-block-components-radio-control__option-checked {
+			.wc-block-components-radio-control__description-group {
+				display: block;
+			}
+		}
+		.wc-block-components-radio-control__label-group {
+			em {
+				text-transform: uppercase;
+				font-style: inherit;
+			}
+		}
+		.wc-block-components-radio-control__description-group {
+			width: 100%;
+			box-sizing: border-box;
+			background-color: $gray-100;
+			border-radius: $universal-border-radius;
+			padding: 1px em($gap-small);
+			margin-top: em($gap-smaller);
+			@include font-size(regular);
+		}
+		.wc-block-components-radio-control__description,
+		.wc-block-components-radio-control__secondary-description {
+			width: 100%;
+			text-align: left;
+			margin: em($gap-small) 0;
+			display: block;
+		}
+		.wc-block-components-radio-control__secondary-description {
+			color: $gray-700;
+
+			> svg {
+				vertical-align: middle;
+				margin-top: -4px;
+				fill: currentColor;
+			}
 		}
 	}
 }

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx

@@ -9,10 +9,8 @@ import {
 	useEditorContext,
 	noticeContexts,
 } from '@woocommerce/base-context';
-import {
-	CheckboxControl,
-	StoreNoticesContainer,
-} from '@woocommerce/blocks-checkout';
+import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 import type {
 	BillingAddress,
@@ -82,11 +80,17 @@ const Block = ( {
 			address_2: {
 				hidden: ! showApartmentField,
 			},
+			phone: {
+				hidden: ! showPhoneField,
+				required: requirePhoneField,
+			},
 		};
 	}, [
 		showCompanyField,
 		requireCompanyField,
 		showApartmentField,
+		showPhoneField,
+		requirePhoneField,
 	] ) as Record< keyof AddressFields, Partial< AddressField > >;
 
 	const WrapperComponent = isEditor ? Noninteractive : Fragment;
@@ -105,6 +109,9 @@ const Block = ( {
 		};
 	} );
 
+	// Default editing state for CustomerAddress component comes from the current address and whether or not we're in the editor.
+	const defaultEditingAddress = isEditor || ! hasAddress;
+
 	return (
 		<>
 			<StoreNoticesContainer context={ noticeContext } />
@@ -112,27 +119,24 @@ const Block = ( {
 				{ cartDataLoaded ? (
 					<CustomerAddress
 						addressFieldsConfig={ addressFieldsConfig }
-						showPhoneField={ showPhoneField }
-						requirePhoneField={ requirePhoneField }
+						defaultEditing={ defaultEditingAddress }
 					/>
 				) : null }
 			</WrapperComponent>
-			{ hasAddress && (
-				<CheckboxControl
-					className="wc-block-checkout__use-address-for-billing"
-					label={ __(
-						'Use same address for billing',
-						'woo-gutenberg-products-block'
-					) }
-					checked={ useShippingAsBilling }
-					onChange={ ( checked: boolean ) => {
-						setUseShippingAsBilling( checked );
-						if ( checked ) {
-							syncBillingWithShipping();
-						}
-					} }
-				/>
-			) }
+			<CheckboxControl
+				className="wc-block-checkout__use-address-for-billing"
+				label={ __(
+					'Use same address for billing',
+					'woo-gutenberg-products-block'
+				) }
+				checked={ useShippingAsBilling }
+				onChange={ ( checked: boolean ) => {
+					setUseShippingAsBilling( checked );
+					if ( checked ) {
+						syncBillingWithShipping();
+					}
+				} }
+			/>
 		</>
 	);
 };

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx

@@ -3,11 +3,7 @@
  */
 import { useState, useCallback, useEffect } from '@wordpress/element';
 import { AddressForm } from '@woocommerce/base-components/cart-checkout';
-import {
-	useCheckoutAddress,
-	useStoreEvents,
-	useEditorContext,
-} from '@woocommerce/base-context';
+import { useCheckoutAddress, useStoreEvents } from '@woocommerce/base-context';
 import type {
 	ShippingAddress,
 	AddressField,
@@ -20,34 +16,24 @@ import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
  * Internal dependencies
  */
 import AddressWrapper from '../../address-wrapper';
-import PhoneNumber from '../../phone-number';
 import AddressCard from '../../address-card';
 
 const CustomerAddress = ( {
 	addressFieldsConfig,
-	showPhoneField,
-	requirePhoneField,
+	defaultEditing = false,
 }: {
 	addressFieldsConfig: Record< keyof AddressFields, Partial< AddressField > >;
-	showPhoneField: boolean;
-	requirePhoneField: boolean;
+	defaultEditing?: boolean;
 } ) => {
 	const {
 		defaultAddressFields,
 		shippingAddress,
 		setShippingAddress,
 		setBillingAddress,
-		setShippingPhone,
-		setBillingPhone,
 		useShippingAsBilling,
 	} = useCheckoutAddress();
 	const { dispatchCheckoutEvent } = useStoreEvents();
-	const { isEditor } = useEditorContext();
-	const hasAddress = !! (
-		shippingAddress.address_1 &&
-		( shippingAddress.first_name || shippingAddress.last_name )
-	);
-	const [ editing, setEditing ] = useState( ! hasAddress || isEditor );
+	const [ editing, setEditing ] = useState( defaultEditing );
 
 	// Forces editing state if store has errors.
 	const { hasValidationErrors, invalidProps } = useSelect( ( select ) => {
@@ -74,19 +60,11 @@ const CustomerAddress = ( {
 	const addressFieldKeys = Object.keys(
 		defaultAddressFields
 	) as ( keyof AddressFields )[];
-
 	const onChangeAddress = useCallback(
 		( values: Partial< ShippingAddress > ) => {
 			setShippingAddress( values );
 			if ( useShippingAsBilling ) {
-				// Sync billing with shipping. Ensure unwanted properties are omitted.
-				const { ...syncBilling } = values;
-
-				if ( ! showPhoneField ) {
-					delete syncBilling.phone;
-				}
-
-				setBillingAddress( syncBilling );
+				setBillingAddress( values );
 				dispatchCheckoutEvent( 'set-billing-address' );
 			}
 			dispatchCheckoutEvent( 'set-shipping-address' );
@@ -96,7 +74,6 @@ const CustomerAddress = ( {
 			setBillingAddress,
 			setShippingAddress,
 			useShippingAsBilling,
-			showPhoneField,
 		]
 	);
 
@@ -108,56 +85,28 @@ const CustomerAddress = ( {
 				onEdit={ () => {
 					setEditing( true );
 				} }
-				showPhoneField={ showPhoneField }
+				fieldConfig={ addressFieldsConfig }
 			/>
 		),
-		[ shippingAddress, showPhoneField ]
+		[ shippingAddress, addressFieldsConfig ]
 	);
 
 	const renderAddressFormComponent = useCallback(
 		() => (
-			<>
-				<AddressForm
-					id="shipping"
-					type="shipping"
-					onChange={ onChangeAddress }
-					values={ shippingAddress }
-					fields={ addressFieldKeys }
-					fieldConfig={ addressFieldsConfig }
-				/>
-				{ showPhoneField && (
-					<PhoneNumber
-						id="shipping-phone"
-						errorId={ 'shipping_phone' }
-						isRequired={ requirePhoneField }
-						value={ shippingAddress.phone }
-						onChange={ ( value ) => {
-							setShippingPhone( value );
-							dispatchCheckoutEvent( 'set-phone-number', {
-								step: 'shipping',
-							} );
-							if ( useShippingAsBilling ) {
-								setBillingPhone( value );
-								dispatchCheckoutEvent( 'set-phone-number', {
-									step: 'billing',
-								} );
-							}
-						} }
-					/>
-				) }
-			</>
+			<AddressForm
+				id="shipping"
+				type="shipping"
+				onChange={ onChangeAddress }
+				values={ shippingAddress }
+				fields={ addressFieldKeys }
+				fieldConfig={ addressFieldsConfig }
+			/>
 		),
 		[
 			addressFieldKeys,
 			addressFieldsConfig,
-			dispatchCheckoutEvent,
 			onChangeAddress,
-			requirePhoneField,
-			setBillingPhone,
-			setShippingPhone,
 			shippingAddress,
-			showPhoneField,
-			useShippingAsBilling,
 		]
 	);
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx

@@ -13,9 +13,11 @@ import {
 	isAddressComplete,
 } from '@woocommerce/base-utils';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
+import {
+	FormattedMonetaryAmount,
+	StoreNoticesContainer,
+} from '@woocommerce/blocks-components';
 import { useEditorContext, noticeContexts } from '@woocommerce/base-context';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
 import { decodeEntities } from '@wordpress/html-entities';
 import { getSetting } from '@woocommerce/settings';
 import type {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/frontend.tsx

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { Sidebar } from '@woocommerce/base-components/sidebar-layout';
-import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { StoreNoticesContainer } from '@woocommerce/blocks-components';
 
 const FrontendBlock = ( {
 	children,

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/order-notes/index.tsx

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { Textarea } from '@woocommerce/base-components/textarea';
+import { Textarea } from '@woocommerce/blocks-components';
 
 interface CheckoutOrderNotesProps {
 	disabled: boolean;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/checkout/phone-number/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/blocks-components';
 
 /**
  * Renders a phone number input.

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/block.json

@@ -4,14 +4,30 @@
 	"title": "Collection Filters",
 	"description": "A block that adds product filters to the product collection.",
 	"category": "woocommerce",
-	"keywords": [ "WooCommerce", "Filters" ],
+	"keywords": [
+		"WooCommerce",
+		"Filters"
+	],
 	"textdomain": "woocommerce",
 	"supports": {
 		"html": false,
 		"reusable": false
 	},
-	"usesContext": [ "query" ],
-	"ancestor": [ "woocommerce/product-collection" ],
+	"usesContext": [
+		"query"
+	],
+	"providesContext": {
+		"collectionData": "collectionData"
+	},
+	"ancestor": [
+		"woocommerce/product-collection"
+	],
+	"attributes": {
+		"collectionData": {
+			"type": "object",
+			"default": {}
+		}
+	},
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"
 }

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/edit.tsx

@@ -2,11 +2,40 @@
  * External dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { useCollection } from '@woocommerce/base-context/hooks';
 
-const Edit = () => {
+/**
+ * Internal dependencies
+ */
+import { formatQuery, getQueryParams } from './utils';
+import type { EditProps } from './type';
+
+const Edit = ( { clientId, setAttributes, context }: EditProps ) => {
 	const blockProps = useBlockProps();
 	const innerBlockProps = useInnerBlocksProps( blockProps );
 
+	// Get inner blocks by clientId
+	const currentBlock = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getBlock( clientId );
+	} );
+
+	const { results } = useCollection( {
+		namespace: '/wc/store/v1',
+		resourceName: 'products/collection-data',
+		query: {
+			...formatQuery( context.query ),
+			...getQueryParams( currentBlock ),
+		},
+	} );
+
+	useEffect( () => {
+		setAttributes( {
+			collectionData: results,
+		} );
+	}, [ results, setAttributes ] );
+
 	return <nav { ...innerBlockProps } />;
 };
 

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/block.json

@@ -10,16 +10,22 @@
 	],
 	"textdomain": "woocommerce",
 	"apiVersion": 2,
-	"viewScript": [
-		"wc-collection-price-filter-block-frontend"
-	],
 	"ancestor": [
-		"woocommerce/product-collection"
+		"woocommerce/collection-filters"
 	],
 	"supports": {
 		"interactivity": true
 	},
+	"usesContext": [
+		"collectionData"
+	],
 	"attributes": {
+		"queryParam": {
+			"type": "object",
+			"default": {
+				"calculate_price_range": "true"
+			}
+		},
 		"showInputFields": {
 			"type": "boolean",
 			"default": true

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/components/inspector.tsx

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { InspectorControls } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import {
+	PanelBody,
+	ToggleControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { FilterComponentProps } from '../types';
+
+export const Inspector = ( {
+	attributes,
+	setAttributes,
+}: Omit< FilterComponentProps, 'collectionData' > ) => {
+	const { showInputFields, inlineInput } = attributes;
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
+			>
+				<ToggleGroupControl
+					label={ __(
+						'Price Slider',
+						'woo-gutenberg-products-block'
+					) }
+					value={ showInputFields ? 'editable' : 'text' }
+					onChange={ ( value: string ) =>
+						setAttributes( {
+							showInputFields: value === 'editable',
+						} )
+					}
+					className="wc-block-price-filter__price-range-toggle"
+				>
+					<ToggleGroupControlOption
+						value="editable"
+						label={ __(
+							'Editable',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+					<ToggleGroupControlOption
+						value="text"
+						label={ __( 'Text', 'woo-gutenberg-products-block' ) }
+					/>
+				</ToggleGroupControl>
+				{ showInputFields && (
+					<ToggleControl
+						label={ __(
+							'Inline input fields',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ inlineInput }
+						onChange={ () =>
+							setAttributes( {
+								inlineInput: ! inlineInput,
+							} )
+						}
+						help={ __(
+							'Show input fields inline with the slider.',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/components/price-slider.tsx

@@ -0,0 +1,67 @@
+/**
+ * Internal dependencies
+ */
+import { EditProps } from '../types';
+import { getFormattedPrice } from '../utils';
+
+/**
+ * We pass the whole props from Edit component to <PriceSlider/> so we're
+ * reusing the EditProps type here.
+ */
+export const PriceSlider = ( { attributes, context }: EditProps ) => {
+	const { showInputFields } = attributes;
+	const { minPrice, maxPrice, formattedMinPrice, formattedMaxPrice } =
+		getFormattedPrice( context.collectionData );
+
+	const onChange = () => null;
+
+	const priceMin = showInputFields ? (
+		<input
+			className="min"
+			type="text"
+			value={ minPrice }
+			onChange={ onChange }
+		/>
+	) : (
+		<span>{ formattedMinPrice }</span>
+	);
+
+	const priceMax = showInputFields ? (
+		<input
+			className="max"
+			type="text"
+			value={ maxPrice }
+			onChange={ onChange }
+		/>
+	) : (
+		<span>{ formattedMaxPrice }</span>
+	);
+
+	return (
+		<>
+			<div className="range">
+				<div className="range-bar"></div>
+				<input
+					type="range"
+					className="min"
+					min={ minPrice }
+					max={ maxPrice }
+					value={ minPrice }
+					onChange={ onChange }
+				/>
+				<input
+					type="range"
+					className="max"
+					min={ minPrice }
+					max={ maxPrice }
+					value={ maxPrice }
+					onChange={ onChange }
+				/>
+			</div>
+			<div className="text">
+				{ priceMin }
+				{ priceMax }
+			</div>
+		</>
+	);
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/edit.tsx

@@ -2,38 +2,28 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import { useCollectionData } from '@woocommerce/base-context/hooks';
-import { Disabled } from '@wordpress/components';
-import FilterResetButton from '@woocommerce/base-components/filter-reset-button';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
-import { getFormattedPrice } from './utils';
 import { EditProps } from './types';
-import { PriceSlider } from './price-slider';
+import { PriceSlider } from './components/price-slider';
+import { Inspector } from './components/inspector';
 
 const Edit = ( props: EditProps ) => {
-	const blockProps = useBlockProps();
-	const { results } = useCollectionData( {
-		queryPrices: true,
-		isEditor: true,
-		queryState: {},
+	const { showInputFields, inlineInput } = props.attributes;
+
+	const blockProps = useBlockProps( {
+		className: classNames( {
+			'inline-input': inlineInput && showInputFields,
+		} ),
 	} );
 
 	return (
 		<div { ...blockProps }>
-			<Disabled>
-				<div className="controls">
-					<PriceSlider
-						{ ...props }
-						collectionData={ getFormattedPrice( results ) }
-					/>
-				</div>
-				<div className="actions">
-					<FilterResetButton onClick={ () => false } />
-				</div>
-			</Disabled>
+			<Inspector { ...props } />
+			<PriceSlider { ...props } />
 		</div>
 	);
 };

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/frontend.ts

@@ -37,10 +37,17 @@ store( {
 	state: {
 		filters: {
 			rangeStyle: ( { state }: StateProps ) => {
-				const { minPrice, maxPrice, maxRange } = state.filters;
+				const { minPrice, maxPrice, minRange, maxRange } =
+					state.filters;
 				return [
-					`--low: ${ ( 100 * minPrice ) / maxRange }%`,
-					`--high: ${ ( 100 * maxPrice ) / maxRange }%`,
+					`--low: ${
+						( 100 * ( minPrice - minRange ) ) /
+						( maxRange - minRange )
+					}%`,
+					`--high: ${
+						( 100 * ( maxPrice - minRange ) ) /
+						( maxRange - minRange )
+					}%`,
 				].join( ';' );
 			},
 			formattedMinPrice: ( { state }: StateProps ) => {

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/style.scss

@@ -1,5 +1,216 @@
-.wp-block-woocommerce-collection-price-filter {
-	.actions {
-		text-align: right;
+@mixin thumb {
+	background: $white;
+	background-position: 0 0;
+	box-sizing: content-box;
+	width: 12px;
+	height: 12px;
+	border: 2px solid $gray-900;
+	border-radius: 100%;
+	padding: 0;
+	margin: 0;
+	vertical-align: top;
+	cursor: pointer;
+	z-index: 20;
+	pointer-events: auto;
+	transition: transform 0.2s ease-in-out;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	&:hover {
+		@include thumbFocus;
+	}
+}
+
+@mixin thumbFocus {
+	background: $gray-900;
+	border-color: $white;
+}
+
+
+@mixin track {
+	cursor: default;
+	height: 1px;
+	/* Required for Samsung internet based browsers */
+	outline: 0;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+@mixin reset {
+	margin: 0;
+	/* Use !important to prevent theme input styles from breaking the component.
+	Reference https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/3902
+	*/
+	padding: 0 !important;
+	border: 0 !important;
+	outline: none;
+	background: transparent;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+.wp-block-woocommerce-collection-price-filter {
+	.range {
+		--low: 0%;
+		--high: 100%;
+		--range-color: currentColor;
+		--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
+
+		.rtl & {
+			--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
+		}
+
+		@include reset;
+		background: transparent;
+		border-radius: 4px;
+		clear: both;
+		flex-grow: 1;
+		height: 4px;
+		margin: 15px 0;
+		position: relative;
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: currentColor;
+			opacity: 0.2;
+		}
+
+		.range-bar {
+			position: relative;
+			height: 4px;
+			background: var(--track-background);
+		}
+
+		input[type="range"] {
+			@include reset;
+			width: 100%;
+			height: 0;
+			display: block;
+			pointer-events: none;
+			outline: none !important;
+			position: absolute;
+			left: 0;
+			top: 0;
+
+			&::-webkit-slider-thumb {
+				@include thumb;
+				margin: -5px 0 0 0;
+			}
+
+			&::-moz-range-thumb {
+				@include thumb;
+			}
+
+			&::-ms-thumb {
+				@include thumb;
+			}
+
+			&:focus {
+				&::-webkit-slider-thumb {
+					@include thumbFocus;
+				}
+				&::-moz-range-thumb {
+					@include thumbFocus;
+				}
+				&::-ms-thumb {
+					@include thumbFocus;
+				}
+			}
+
+			&::-webkit-slider-runnable-track {
+				@include track;
+			}
+
+			&::-moz-range-track {
+				@include track;
+			}
+
+			&::-webkit-slider-progress {
+				@include reset;
+			}
+
+			&::-moz-range-progress {
+				@include reset;
+			}
+
+			&::-moz-focus-outer {
+				border: 0;
+			}
+
+			&.min {
+				&::-webkit-slider-thumb {
+					margin-left: -2px;
+					background-position-x: left;
+				}
+				&::-moz-range-thumb {
+					background-position-x: left;
+					transform: translate(-2px, 2px);
+				}
+				&::-ms-thumb {
+					background-position-x: left;
+				}
+			}
+
+			&.max {
+				&::-webkit-slider-thumb {
+					background-position-x: right;
+					margin-left: 2px;
+				}
+				&::-moz-range-thumb {
+					background-position-x: right;
+					transform: translate(2px, 2px);
+				}
+				&::-ms-thumb {
+					background-position-x: right;
+				}
+			}
+		}
+
+		input[type="range" i] {
+			color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
+			padding: initial;
+		}
+	}
+
+	.text {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 16px 0;
+		gap: 8px;
+
+		input[type="text"] {
+			padding: 8px;
+			margin: 0;
+			width: auto;
+			max-width: 60px;
+			min-width: 0;
+			font-size: 0.875em;
+			border-width: 1px;
+			border-style: solid;
+			border-color: currentColor;
+			border-radius: 4px;
+		}
+	}
+
+	&.inline-input {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.text {
+			display: contents;
+		}
+
+		.text .min {
+			order: -1;
+		}
 	}
 }

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/types.ts

@@ -1,17 +1,25 @@
 /**
  * External dependencies
  */
-import { HTMLElementEvent } from '@woocommerce/types';
 import { BlockEditProps } from '@wordpress/blocks';
+import { HTMLElementEvent } from '@woocommerce/types';
 
-type PriceFilterState = {
+export type BlockAttributes = {
+	showInputFields: boolean;
+	inlineInput: boolean;
+};
+
+export interface EditProps extends BlockEditProps< BlockAttributes > {
+	context: {
+		collectionData: unknown[];
+	};
+}
+
+export type PriceFilterState = {
 	minPrice: number;
 	maxPrice: number;
 	minRange: number;
 	maxRange: number;
-	rangeStyle: string;
-	isMinActive: boolean;
-	isMaxActive: boolean;
 	formattedMinPrice: string;
 	formattedMaxPrice: string;
 };
@@ -22,16 +30,9 @@ export type StateProps = {
 	};
 };
 
-export type ActionProps = StateProps & {
+export interface ActionProps extends StateProps {
 	event: HTMLElementEvent< HTMLInputElement >;
-};
-
-export type BlockAttributes = {
-	showInputFields: boolean;
-	inlineInput: boolean;
-};
-
-export type EditProps = BlockEditProps< BlockAttributes >;
+}
 
 export type FilterComponentProps = BlockEditProps< BlockAttributes > & {
 	collectionData: Partial< PriceFilterState >;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/price-filter/utils.ts

@@ -13,18 +13,20 @@ import {
 	isString,
 } from '@woocommerce/types';
 
-const formatPriceInt = ( price: string | number, currency: Currency ) => {
+function formatPriceInt( price: string | number, currency: Currency ) {
 	const priceInt = typeof price === 'number' ? price : parseInt( price, 10 );
 	return priceInt / 10 ** currency.minorUnit;
-};
+}
 
-export const getFormattedPrice = ( results: unknown[] ) => {
+export function getFormattedPrice( results: unknown[] ) {
 	const currencyWithoutDecimal = getCurrency( { minorUnit: 0 } );
 
 	if ( ! objectHasProp( results, 'price_range' ) ) {
 		return {
 			minPrice: 0,
 			maxPrice: 0,
+			minRange: 0,
+			maxRange: 0,
 			formattedMinPrice: formatPrice( 0, currencyWithoutDecimal ),
 			formattedMaxPrice: formatPrice( 0, currencyWithoutDecimal ),
 		};
@@ -48,7 +50,9 @@ export const getFormattedPrice = ( results: unknown[] ) => {
 	return {
 		minPrice,
 		maxPrice,
+		minRange: minPrice,
+		maxRange: maxPrice,
 		formattedMinPrice: formatPrice( minPrice, currencyWithoutDecimal ),
 		formattedMaxPrice: formatPrice( maxPrice, currencyWithoutDecimal ),
 	};
-};
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/stock-filter/block.json

@@ -0,0 +1,46 @@
+{
+	"name": "woocommerce/collection-stock-filter",
+	"version": "1.0.0",
+	"title": "Stock Filter",
+	"description": "Enable customers to filter the product collection by stock status.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce", "filter", "stock" ],
+	"supports": {
+		"interactivity": true,
+		"html": false,
+		"multiple": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"showCounts": {
+			"type": "boolean",
+			"default": false
+		},
+		"displayStyle": {
+			"type": "string",
+			"default": "list"
+		},
+		"selectType": {
+			"type": "string",
+			"default": "multiple"
+		},
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		},
+		"queryParam": {
+			"type": "object",
+			"default": {
+				"calculate_stock_status_counts": "true"
+			}
+		}
+	},
+	"usesContext": [ "collectionData" ],
+	"ancestor": [ "woocommerce/collection-filters" ],
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/stock-filter/components/inspector.tsx

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { InspectorControls } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import {
+	PanelBody,
+	ToggleControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { EditProps } from '../types';
+
+export const Inspector = ( { attributes, setAttributes }: EditProps ) => {
+	const { showCounts, selectType, displayStyle } = attributes;
+
+	return (
+		<InspectorControls key="inspector">
+			<PanelBody
+				title={ __(
+					'Display Settings',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				<ToggleControl
+					label={ __(
+						'Display product count',
+						'woo-gutenberg-products-block'
+					) }
+					checked={ showCounts }
+					onChange={ () =>
+						setAttributes( {
+							showCounts: ! showCounts,
+						} )
+					}
+				/>
+				<ToggleGroupControl
+					label={ __(
+						'Allow selecting multiple options?',
+						'woo-gutenberg-products-block'
+					) }
+					value={ selectType || 'multiple' }
+					onChange={ ( value: string ) =>
+						setAttributes( {
+							selectType: value,
+						} )
+					}
+					className="wc-block-attribute-filter__multiple-toggle"
+				>
+					<ToggleGroupControlOption
+						value="multiple"
+						label={ __(
+							'Multiple',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+					<ToggleGroupControlOption
+						value="single"
+						label={ __( 'Single', 'woo-gutenberg-products-block' ) }
+					/>
+				</ToggleGroupControl>
+				<ToggleGroupControl
+					label={ __(
+						'Display Style',
+						'woo-gutenberg-products-block'
+					) }
+					value={ displayStyle }
+					onChange={ ( value ) =>
+						setAttributes( {
+							displayStyle: value,
+						} )
+					}
+					className="wc-block-attribute-filter__display-toggle"
+				>
+					<ToggleGroupControlOption
+						value="list"
+						label={ __( 'List', 'woo-gutenberg-products-block' ) }
+					/>
+					<ToggleGroupControlOption
+						value="dropdown"
+						label={ __(
+							'Dropdown',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+				</ToggleGroupControl>
+			</PanelBody>
+		</InspectorControls>
+	);
+};

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/collection-filters/inner-blocks/stock-filter/edit.tsx

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import classnames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronDown } from '@wordpress/icons';
+import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
+import { CheckboxList } from '@woocommerce/blocks-components';
+import Label from '@woocommerce/base-components/filter-element-label';
+import FormTokenField from '@woocommerce/base-components/form-token-field';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { getSetting } from '@woocommerce/settings';
+import {
+	useCollectionData,
+	useQueryStateByContext,
+} from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { BlockProps } from './types';
+import { Inspector } from './components/inspector';
+
+type CollectionData = {
+	// attribute_counts: null | unknown;
+	// price_range: null | unknown;
+	// rating_counts: null | unknown;
+	stock_status_counts: StockStatusCount[];
+};
+
+type StockStatusCount = {
+	status: string;
+	count: number;
+};
+
+const Edit = ( props: BlockEditProps< BlockProps > & { context: Context } ) => {
+	const blockProps = useBlockProps( {
+		className: classnames(
+			'wc-block-stock-filter',
+			props.attributes.className
+		),
+	} );
+
+	const { showCounts, displayStyle } = props.attributes;
+	const stockStatusOptions: Record< string, string > = getSetting(
+		'stockStatusOptions',
+		{}
+	);
+
+	const [ queryState ] = useQueryStateByContext();
+
+	const { results: filteredCounts } = useCollectionData( {
+		queryStock: true,
+		queryState,
+		isEditor: true,
+	} );
+
+	const listOptions = useMemo( () => {
+		return Object.entries( stockStatusOptions ).map( ( [ key, value ] ) => {
+			const count =
+				// @ts-expect-error - there is a fault with useCollectionData types, it can be non-array.
+				( filteredCounts as CollectionData )?.stock_status_counts?.find(
+					( item: StockStatusCount ) => item.status === key
+				)?.count;
+
+			return {
+				value: key,
+				label: (
+					<Label
+						name={ value }
+						count={ showCounts && count ? Number( count ) : null }
+					/>
+				),
+			};
+		} );
+	}, [ stockStatusOptions, filteredCounts, showCounts ] );
+
+	return (
+		<>
+			{
+				<div { ...blockProps }>
+					<Inspector { ...props } />
+					<Disabled>
+						<div
+							className={ classnames(
+								'wc-block-stock-filter',
+								`style-${ displayStyle }`,
+								{
+									'is-loading': false,
+								}
+							) }
+						>
+							{ displayStyle === 'dropdown' ? (
+								<>
+									<FormTokenField
+										className={ classnames( {
+											'single-selection': true,
+											'is-loading': false,
+										} ) }
+										suggestions={ [] }
+										placeholder={ __(
+											'Select stock status',
+											'woo-gutenberg-products-block'
+										) }
+										onChange={ () => null }
+										value={ [] }
+									/>
+									<Icon icon={ chevronDown } size={ 30 } />
+								</>
+							) : (
+								<CheckboxList
+									className={ 'wc-block-stock-filter-list' }
+									options={ listOptions }
+									checked={ [] }
+									onChange={ () => null }
+									isLoading={ false }
+									isDisabled={ true }
+								/>
+							) }
+						</div>
+					</Disabled>
+				</div>
+			}
+		</>
+	);
+};
+
+export default Edit;