{ ! isUpdating ? (
;
+```
+
+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
+
+#### `className`: `string`
+
+Additional class name to give to the notice.
+
+#### `onRemove`: `( noticeId ) => void`
+
+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.
+
+#### `notices`: `NoticeType[]`
+
+A list of notices to display as snackbars. Each notice must have an `id` and `content` prop.
+
+- The `id` prop is used to identify the notice and should be unique.
+- The `content` 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.
diff --git a/assets/js/base/components/snackbar-list/constants.ts b/assets/js/base/components/snackbar-list/constants.ts
new file mode 100644
index 00000000000..bdc1149a5d4
--- /dev/null
+++ b/assets/js/base/components/snackbar-list/constants.ts
@@ -0,0 +1 @@
+export const SNACKBAR_TIMEOUT = 10000;
diff --git a/assets/js/base/components/snackbar-list/index.tsx b/assets/js/base/components/snackbar-list/index.tsx
new file mode 100644
index 00000000000..af7e92e4f5f
--- /dev/null
+++ b/assets/js/base/components/snackbar-list/index.tsx
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { NoticeType } from '@woocommerce/types';
+import { useReducedMotion } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Snackbar from './snackbar';
+
+export type SnackbarListProps = {
+ // Class name to be added to the container.
+ className?: string | undefined;
+ // List of notices to be rendered.
+ notices: NoticeType[];
+ // Callback to be called when a notice is dismissed.
+ onRemove: ( id: string ) => void;
+};
+
+/**
+ * A temporary informational UI displayed at the bottom of store pages.
+ */
+const SnackbarList = ( {
+ notices,
+ className,
+ onRemove = () => void 0,
+}: SnackbarListProps ): JSX.Element => {
+ const listRef = useRef< HTMLDivElement | null >( null );
+ const isReducedMotion = useReducedMotion();
+
+ const removeNotice = ( notice: NoticeType ) => () =>
+ onRemove( notice?.id || '' );
+
+ return (
+ {
+ // Prevent focus loss by moving it to the list element.
+ if ( listRef && listRef.current ) {
+ listRef.current.focus();
+ }
+ onRemove();
+ } }
+ >
+ { children }
+
+ );
+};
+
+export default Snackbar;
diff --git a/assets/js/base/components/snackbar-list/stories/index.tsx b/assets/js/base/components/snackbar-list/stories/index.tsx
new file mode 100644
index 00000000000..9c8df331e5d
--- /dev/null
+++ b/assets/js/base/components/snackbar-list/stories/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import SnackbarList, { SnackbarListProps } from '../';
+
+export default {
+ title: 'WooCommerce Blocks/@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: 'List of notice objects to show as snackbar notices.',
+ disable: true,
+ },
+ onRemove: {
+ description: 'Function called when dismissing the notice(s).',
+ disable: true,
+ },
+ },
+ component: SnackbarList,
+} as Meta< SnackbarListProps >;
+
+const Template: Story< SnackbarListProps > = ( args ) => {
+ return
{ __(
'There are no payment methods available. This may be an error on our side. Please contact us if you need any help placing your order.',
'woo-gutenberg-products-block'
) }
-
+
);
};
diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/no-payment-methods/style.scss b/assets/js/blocks/cart-checkout-shared/payment-methods/no-payment-methods/style.scss
index e9b498492b2..b6e6c1fa156 100644
--- a/assets/js/blocks/cart-checkout-shared/payment-methods/no-payment-methods/style.scss
+++ b/assets/js/blocks/cart-checkout-shared/payment-methods/no-payment-methods/style.scss
@@ -1,25 +1,3 @@
-.components-placeholder.wc-block-checkout__no-payment-methods-placeholder {
- margin-bottom: $gap;
-
- * {
- pointer-events: all; // Overrides parent disabled component in editor context
- }
-
- .components-placeholder__fieldset {
- display: block;
-
- .components-button {
- background-color: $gray-900;
- color: $white;
- }
-
- .wc-block-checkout__no-payment-methods-placeholder-description {
- display: block;
- margin: 0.25em 0 1em 0;
- }
- }
-}
-
.components-notice.wc-block-checkout__no-payment-methods-notice {
- margin-bottom: $gap;
+ margin: 0 0 $gap;
}
diff --git a/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx b/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
index cf230490335..a429ce0a7d4 100644
--- a/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
+++ b/assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx
@@ -9,14 +9,12 @@ import {
import { addFilter, hasFilter } from '@wordpress/hooks';
import type { StoreDescriptor } from '@wordpress/data';
import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-components/sidebar-compatibility-notice';
-import {
- DefaultNotice,
- LegacyNotice,
-} from '@woocommerce/editor-components/default-notice';
+import { NoPaymentMethodsNotice } from '@woocommerce/editor-components/no-payment-methods-notice';
+import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
+import { DefaultNotice } from '@woocommerce/editor-components/default-notice';
import { IncompatiblePaymentGatewaysNotice } from '@woocommerce/editor-components/incompatible-payment-gateways-notice';
import { useSelect } from '@wordpress/data';
import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
-import { isWcVersion } from '@woocommerce/settings';
import { useState } from '@wordpress/element';
declare module '@wordpress/editor' {
let store: StoreDescriptor;
@@ -32,7 +30,11 @@ declare module '@wordpress/block-editor' {
const withSidebarNotices = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
- const { name: blockName, isSelected: isBlockSelected } = props;
+ const {
+ clientId,
+ name: blockName,
+ isSelected: isBlockSelected,
+ } = props;
const [
isIncompatiblePaymentGatewaysNoticeDismissed,
@@ -45,15 +47,8 @@ const withSidebarNotices = createHigherOrderComponent(
setIsIncompatiblePaymentGatewaysNoticeDismissed( isDismissed );
};
- const addressFieldOrAccountBlocks = [
- 'woocommerce/checkout-shipping-address-block',
- 'woocommerce/checkout-billing-address-block',
- 'woocommerce/checkout-contact-information-block',
- 'woocommerce/checkout-fields-block',
- ];
- const { clientId } = props;
- const { isCart, isCheckout, isAddressFieldBlock } = useSelect(
- ( select ) => {
+ const { isCart, isCheckout, isPaymentMethodsBlock, hasPaymentMethods } =
+ useSelect( ( select ) => {
const { getBlockParentsByBlockName, getBlockName } =
select( blockEditorStore );
const parent = getBlockParentsByBlockName( clientId, [
@@ -68,58 +63,61 @@ const withSidebarNotices = createHigherOrderComponent(
isCheckout:
parent.includes( 'woocommerce/checkout' ) ||
currentBlockName === 'woocommerce/checkout',
- isAddressFieldBlock:
- addressFieldOrAccountBlocks.includes(
- currentBlockName
- ),
+ isPaymentMethodsBlock:
+ currentBlockName ===
+ 'woocommerce/checkout-payment-block',
+ hasPaymentMethods:
+ select(
+ PAYMENT_STORE_KEY
+ ).paymentMethodsInitialized() &&
+ Object.keys(
+ select(
+ PAYMENT_STORE_KEY
+ ).getAvailablePaymentMethods()
+ ).length > 0,
};
- }
- );
- const MakeAsDefaultNotice = () => (
- <>
- { isWcVersion( '6.9.0', '>=' ) ? (
-
-
+
- ) }
+ { isPaymentMethodsBlock && ! hasPaymentMethods && (
+
- { addressComplete
- ? __(
+ { addressComplete ? (
+
+ { __(
'There are no shipping options available. Please check your shipping address.',
'woo-gutenberg-products-block'
- )
- : __(
- 'Add a shipping address to view shipping options.',
- 'woo-gutenberg-products-block'
- ) }
+ ) }
+
+ ) : (
+ __(
+ 'Add a shipping address to view shipping options.',
+ 'woo-gutenberg-products-block'
+ )
+ ) }
}
renderOption={ renderShippingRatesControlOption }
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx
index 005d5ee36e9..2ba5e0e462b 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx
@@ -8,10 +8,14 @@ import {
InspectorControls,
} from '@wordpress/block-editor';
import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { PanelBody, ToggleControl, Notice } from '@wordpress/components';
+import {
+ PanelBody,
+ ToggleControl,
+ Notice,
+ ExternalLink,
+} from '@wordpress/components';
import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
import { ADMIN_URL } from '@woocommerce/settings';
-import { Icon, external } from '@wordpress/icons';
/**
* Internal dependencies
@@ -36,6 +40,82 @@ export const Edit = ( {
return (
+ { /* Show this notice if a terms page or a privacy page is not setup. */ }
+ { ( ! TERMS_URL || ! PRIVACY_URL ) && (
+
+ { __(
+ "Link to your store's Terms and Conditions and Privacy Policy pages by creating pages for them.",
+ 'woo-gutenberg-products-block'
+ ) }
+
+ { ! TERMS_URL && ( + <> +
+
+ { __(
+ 'Setup a Terms and Conditions page',
+ 'woo-gutenberg-products-block'
+ ) }
+
+
+ ) }
+ { ! PRIVACY_URL && (
+ <>
+
+
+ { __(
+ 'Setup a Privacy Policy page',
+ 'woo-gutenberg-products-block'
+ ) }
+
+
+ ) }
+
+ ) }
+ { /* Show this notice if we have both a terms and privacy pages, but they're not present in the text. */ }
+ { TERMS_URL &&
+ PRIVACY_URL &&
+ ! (
+ currentText.includes( TERMS_URL ) &&
+ currentText.includes( PRIVACY_URL )
+ ) && (
+
+ setAttributes( {
+ text: '',
+ } ),
+ },
+ ]
+ : []
+ }
+ >
+
+ ) }
- { /* Show this notice if a terms page or a privacy page is not setup. */ }
- { ( ! TERMS_URL || ! PRIVACY_URL ) && (
-
- { __(
- 'Setup a Terms and Conditions page',
- 'woo-gutenberg-products-block'
- ) }
-
- ) }
- { /* Show this notice if we have both a terms and privacy pages, but they're not present in the text. */ }
- { TERMS_URL &&
- PRIVACY_URL &&
- ! (
- currentText.includes( TERMS_URL ) &&
- currentText.includes( PRIVACY_URL )
- ) && (
-
- setAttributes( { text: '' } ),
- },
- ]
- : []
- }
- >
-
- ) }
);
};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss
index d8de52ae25e..032d8f5a7cf 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/editor.scss
@@ -20,20 +20,14 @@
}
}
-.wc-block-checkout__terms_notice .components-notice__action {
- margin-left: 0;
-}
-
-.wc-block-checkout__terms_notice-button {
- display: flex;
- flex-direction: row;
- align-items: center;
-
- .wc-block-checkout__terms_notice-button__icon {
- margin-left: $gap-smallest;
+.wc-block-checkout__terms_notice {
+ margin: 0;
+ .components-notice__content {
+ margin: 4px 0;
+ }
+ .components-notice__actions {
+ button {
+ margin-left: 0;
+ }
}
-}
-
-.wc-block-checkout__terms_notice .components-notice__content {
- color: $black;
}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js
index 481ec50a6cf..8c4c1b9aebf 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/edit.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { render, findByRole, queryByText } from '@testing-library/react';
+import { render, queryByText } from '@testing-library/react';
/**
* Internal dependencies
@@ -12,6 +12,7 @@ const blockSettingsMock = jest.requireMock( '@woocommerce/block-settings' );
jest.mock( '@wordpress/block-editor', () => ( {
...jest.requireActual( '@wordpress/block-editor' ),
useBlockProps: jest.fn(),
+ InspectorControls: jest.fn( ( { children } ) => { skeletonLines }
+ );
+};
diff --git a/assets/js/base/components/skeleton/style.scss b/assets/js/base/components/skeleton/style.scss
new file mode 100644
index 00000000000..1f90808d705
--- /dev/null
+++ b/assets/js/base/components/skeleton/style.scss
@@ -0,0 +1,19 @@
+.wc-block-components-skeleton {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+
+}
+
+.wc-block-components-skeleton-text-line {
+ height: 0.8em;
+ width: 100%;
+ position: relative;
+ background: $gray-200;
+ border-radius: 2em;
+
+ &:last-child {
+ width: 80%;
+ }
+}
diff --git a/assets/js/base/components/snackbar-list/README.md b/assets/js/base/components/snackbar-list/README.md
new file mode 100644
index 00000000000..b3bc398b3ea
--- /dev/null
+++ b/assets/js/base/components/snackbar-list/README.md
@@ -0,0 +1,62 @@
+# SnackbarList Component
+
+A temporary informational UI displayed at the bottom of store pages.
+
+## Table of contents
+
+- [Design Guidelines](#design-guidelines)
+- [Development Guidelines](#development-guidelines)
+ - [Usage](#usage)
+ - [Props](#props)
+ - [`className`: `string`](#classname-string)
+ - [`onRemove`: `( noticeId ) => void`](#onremove--noticeid---void)
+ - [`notices`: `NoticeType[]`](#notices-noticetype)
+
+## Design Guidelines
+
+The buyer notice snackbar is temporary informational UI displayed at the bottom of store pages. WooCommerce blocks, themes, and plugins all use snackbar notices to indicate the result of a successful action.
+
+Snackbar notices work in the same way as the NoticeBanner component, and support the same statuses and styles.
+
+## Development Guidelines
+
+### Usage
+
+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,
+ }
+];
+
+
+ { isReducedMotion ? (
+ notices.map( ( notice ) => {
+ const { content, ...restNotice } = notice;
+ return (
+
+ { notice.content }
+
+ );
+ } )
+ ) : (
+
+ { notices.map( ( notice ) => {
+ const { content, ...restNotice } = notice;
+ return (
+
+
+ { content }
+
+
+ );
+ } ) }
+
+ ) }
+
+ );
+};
+
+export default SnackbarList;
diff --git a/assets/js/base/components/snackbar-list/snackbar.tsx b/assets/js/base/components/snackbar-list/snackbar.tsx
new file mode 100644
index 00000000000..41718d819cf
--- /dev/null
+++ b/assets/js/base/components/snackbar-list/snackbar.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import NoticeBanner, { NoticeBannerProps } from '../notice-banner';
+import { SNACKBAR_TIMEOUT } from './constants';
+
+const Snackbar = ( {
+ onRemove = () => void 0,
+ children,
+ listRef,
+ ...notice
+}: {
+ // A ref to the list that contains the snackbar.
+ listRef?: React.MutableRefObject< HTMLDivElement | null >;
+} & NoticeBannerProps ) => {
+ // Only set up the timeout dismiss if we're not explicitly dismissing.
+ useEffect( () => {
+ const timeoutHandle = setTimeout( () => {
+ onRemove();
+ }, SNACKBAR_TIMEOUT );
+
+ return () => clearTimeout( timeoutHandle );
+ }, [ onRemove ] );
+
+ return (
+
- { hasExpressPaymentMethods ? (
-
);
};
diff --git a/assets/js/blocks/checkout/block.json b/assets/js/blocks/checkout/block.json
index 01834cb41f6..fee7b6593c5 100644
--- a/assets/js/blocks/checkout/block.json
+++ b/assets/js/blocks/checkout/block.json
@@ -41,6 +41,10 @@
"requirePhoneField": {
"type": "boolean",
"default": false
+ },
+ "align": {
+ "type": "string",
+ "default": "wide"
}
},
"textdomain": "woo-gutenberg-products-block",
diff --git a/assets/js/blocks/checkout/edit.tsx b/assets/js/blocks/checkout/edit.tsx
index 98c1fc61f86..b3024027e9c 100644
--- a/assets/js/blocks/checkout/edit.tsx
+++ b/assets/js/blocks/checkout/edit.tsx
@@ -21,7 +21,6 @@ import {
} from '@wordpress/components';
import { SlotFillProvider } from '@woocommerce/blocks-checkout';
import type { TemplateArray } from '@wordpress/blocks';
-import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
/**
* Internal dependencies
@@ -134,7 +133,6 @@ export const Edit = ( {
/>
) }
-
- { hasExpressPaymentMethods ? (
-
);
};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
index 86f26557eed..c4b68bac929 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
@@ -21,7 +21,7 @@ import type {
} from '@woocommerce/types';
import { CART_STORE_KEY } from '@woocommerce/block-data';
import { useSelect } from '@wordpress/data';
-import type { ReactElement } from 'react';
+import NoticeBanner from '@woocommerce/base-components/notice-banner';
/**
* Internal dependencies
@@ -57,7 +57,7 @@ const renderShippingRatesControlOption = (
const Block = ( {
noShippingPlaceholder = null,
shippingCostRequiresAddress = false,
-} ): ReactElement | null => {
+} ): React.ReactElement | null => {
const { isEditor } = useEditorContext();
const {
@@ -126,15 +126,23 @@ const Block = ( {
+ { ! TERMS_URL && ( + <> +
+
+
+ { __( + 'Ensure you add links to your policy pages in this section.', + 'woo-gutenberg-products-block' + ) } +
+- { __( - "You don't have any Terms and Conditions and/or Privacy Policy pages set up.", - 'woo-gutenberg-products-block' - ) } -
-- { __( - 'Ensure you add links to your policy pages in this section.', - 'woo-gutenberg-products-block' - ) } -
-{ children }
),
} ) );
jest.mock( '@woocommerce/block-settings', () => ( {
@@ -32,7 +33,9 @@ describe( 'Edit', () => {
/>
);
- expect( await findByRole( container, 'checkbox' ) ).toBeTruthy();
+ expect(
+ queryByText( container, 'I agree to the terms and conditions' )
+ ).toBeTruthy();
} );
it( 'Renders a notice if either the terms and conditions or privacy url attribute are unset', async () => {
@@ -59,7 +62,7 @@ describe( 'Edit', () => {
expect(
queryByText(
container,
- "You don't have any Terms and Conditions and/or Privacy Policy pages set up."
+ "Link to your store's Terms and Conditions and Privacy Policy pages by creating pages for them."
)
).toBeInTheDocument();
} );
diff --git a/assets/js/blocks/classic-template/archive-product.ts b/assets/js/blocks/classic-template/archive-product.ts
index 0e6bdab955a..e9a6b4bb30f 100644
--- a/assets/js/blocks/classic-template/archive-product.ts
+++ b/assets/js/blocks/classic-template/archive-product.ts
@@ -21,16 +21,8 @@ import { VARIATION_NAME as productsVariationName } from '../product-query/variat
import { createArchiveTitleBlock, createRowBlock } from './utils';
import { type InheritedAttributes } from './types';
-const createProductsBlock = (
- inheritedAttributes: InheritedAttributes,
- templateInnerBlocks: BlockInstance[]
-) => {
- const innerBlocks = [
- ...templateInnerBlocks,
- ...createBlocksFromInnerBlocksTemplate( productsInnerBlocksTemplate ),
- ];
-
- return createBlock(
+const createProductsBlock = ( inheritedAttributes: InheritedAttributes ) =>
+ createBlock(
'core/query',
{
...productsQueryDefaultAttributes,
@@ -41,15 +33,14 @@ const createProductsBlock = (
inherit: true,
},
},
- innerBlocks
+ createBlocksFromInnerBlocksTemplate( productsInnerBlocksTemplate )
);
-};
const getBlockifiedTemplate = (
inheritedAttributes: InheritedAttributes,
withTermDescription = false
-) => {
- const templateInnerBlocks = [
+) =>
+ [
createBlock( 'woocommerce/breadcrumbs', inheritedAttributes ),
createArchiveTitleBlock( 'archive-title', inheritedAttributes ),
withTermDescription
@@ -63,11 +54,9 @@ const getBlockifiedTemplate = (
],
inheritedAttributes
),
+ createProductsBlock( inheritedAttributes ),
].filter( Boolean ) as BlockInstance[];
- return createProductsBlock( inheritedAttributes, templateInnerBlocks );
-};
-
const getBlockifiedTemplateWithTermDescription = (
inheritedAttributes: InheritedAttributes
) => getBlockifiedTemplate( inheritedAttributes, true );
diff --git a/assets/js/blocks/classic-template/product-search-results.ts b/assets/js/blocks/classic-template/product-search-results.ts
index 271e77e8ca6..8b1471a2bc1 100644
--- a/assets/js/blocks/classic-template/product-search-results.ts
+++ b/assets/js/blocks/classic-template/product-search-results.ts
@@ -72,23 +72,13 @@ const extendInnerBlocksWithNoResultsContent = (
];
};
-const createProductsBlock = (
- inheritedAttributes: InheritedAttributes,
- templateInnerBlocks: BlockInstance[]
-) => {
+const createProductsBlock = ( inheritedAttributes: InheritedAttributes ) => {
const productsInnerBlocksWithNoResults =
extendInnerBlocksWithNoResultsContent(
productsInnerBlocksTemplate,
inheritedAttributes
);
- const innerBlocks = [
- ...templateInnerBlocks,
- ...createBlocksFromInnerBlocksTemplate(
- productsInnerBlocksWithNoResults
- ),
- ];
-
return createBlock(
'core/query',
{
@@ -100,12 +90,12 @@ const createProductsBlock = (
inherit: true,
},
},
- innerBlocks
+ createBlocksFromInnerBlocksTemplate( productsInnerBlocksWithNoResults )
);
};
-const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) => {
- const templateInnerBlocks = [
+const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) =>
+ [
createArchiveTitleBlock( 'search-title', inheritedAttributes ),
createBlock( 'woocommerce/store-notices', inheritedAttributes ),
createRowBlock(
@@ -115,11 +105,9 @@ const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) => {
],
inheritedAttributes
),
+ createProductsBlock( inheritedAttributes ),
].filter( Boolean ) as BlockInstance[];
- return createProductsBlock( inheritedAttributes, templateInnerBlocks );
-};
-
const isConversionPossible = () => {
// Blockification is possible for the WP version 6.1 and above,
// which are the versions the Products block supports.
diff --git a/assets/js/blocks/product-query/variations/related-products.tsx b/assets/js/blocks/product-query/variations/related-products.tsx
index 2cc212a23d4..0e8f7ff58d3 100644
--- a/assets/js/blocks/product-query/variations/related-products.tsx
+++ b/assets/js/blocks/product-query/variations/related-products.tsx
@@ -1,11 +1,7 @@
/**
* External dependencies
*/
-import {
- InnerBlockTemplate,
- registerBlockVariation,
- unregisterBlockVariation,
-} from '@wordpress/blocks';
+import { BlockAttributes, InnerBlockTemplate } from '@wordpress/blocks';
import { Icon } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { stacks } from '@woocommerce/icons';
@@ -106,35 +102,36 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
];
registerBlockSingleProductTemplate( {
- registerBlockFn: () =>
- registerBlockVariation( QUERY_LOOP_ID, {
- description: __(
- 'Display related products.',
- 'woo-gutenberg-products-block'
- ),
- name: 'Related Products Controls',
- title: __(
- 'Related Products Controls',
- 'woo-gutenberg-products-block'
- ),
- isActive: ( blockAttributes ) =>
- blockAttributes.namespace === VARIATION_NAME,
- icon: (
-
+ { /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
+ { /* @ts-ignore */ }
+
+
+ { metadata.description }
+
+ ) : (
+
+
+ );
+};
+
+export default withProduct( Editor );
diff --git a/assets/js/blocks/single-product/edit/layout-editor.tsx b/assets/js/blocks/single-product/edit/layout-editor.tsx
new file mode 100644
index 00000000000..0f800bb2ad1
--- /dev/null
+++ b/assets/js/blocks/single-product/edit/layout-editor.tsx
@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import {
+ InnerBlockLayoutContextProvider,
+ ProductDataContextProvider,
+} from '@woocommerce/shared-context';
+import { createBlocksFromTemplate } from '@woocommerce/atomic-utils';
+import { PanelBody, Button } from '@wordpress/components';
+import { backup } from '@wordpress/icons';
+import { ProductResponseItem } from '@woocommerce/types';
+import {
+ InnerBlocks,
+ InspectorControls,
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ BlockContextProvider,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_INNER_BLOCKS, ALLOWED_INNER_BLOCKS } from '../constants';
+import metadata from '../block.json';
+
+interface LayoutEditorProps {
+ isLoading: boolean;
+ product: ProductResponseItem;
+ clientId: string;
+}
+
+const LayoutEditor = ( {
+ isLoading,
+ product,
+ clientId,
+}: LayoutEditorProps ) => {
+ const baseClassName =
+ '.wc-block-editor-single-product .wc-block-editor-layout';
+ const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
+
+ const resetInnerBlocks = useCallback( () => {
+ replaceInnerBlocks(
+ clientId,
+ createBlocksFromTemplate( DEFAULT_INNER_BLOCKS ),
+ false
+ );
+ }, [ clientId, replaceInnerBlocks ] );
+
+ return (
+
+
+
+
+
+
+
+
+
+ ) }
+
+
+
+
+
+ { /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ }
+
+ );
+};
+
+export default Save;
diff --git a/assets/js/blocks/single-product/types.ts b/assets/js/blocks/single-product/types.ts
new file mode 100644
index 00000000000..ea78bc31359
--- /dev/null
+++ b/assets/js/blocks/single-product/types.ts
@@ -0,0 +1,4 @@
+export interface Attributes {
+ className?: string;
+ productId?: number;
+}
diff --git a/assets/js/data/checkout/selectors.ts b/assets/js/data/checkout/selectors.ts
index 7cf19cb6745..9982215995e 100644
--- a/assets/js/data/checkout/selectors.ts
+++ b/assets/js/data/checkout/selectors.ts
@@ -77,7 +77,7 @@ export const isCalculating = ( state: CheckoutState ) => {
};
export const prefersCollection = ( state: CheckoutState ) => {
- if ( state.prefersCollection === undefined ) {
+ if ( typeof state.prefersCollection === 'undefined' ) {
const shippingRates = select( cartStoreKey ).getShippingRates();
if ( ! shippingRates || ! shippingRates.length ) {
return false;
@@ -85,6 +85,7 @@ export const prefersCollection = ( state: CheckoutState ) => {
const selectedRate = shippingRates[ 0 ].shipping_rates.find(
( rate ) => rate.selected
);
+
if (
objectHasProp( selectedRate, 'method_id' ) &&
isString( selectedRate.method_id )
diff --git a/assets/js/editor-components/default-notice/index.tsx b/assets/js/editor-components/default-notice/index.tsx
index 6e862690a3c..c3f85551118 100644
--- a/assets/js/editor-components/default-notice/index.tsx
+++ b/assets/js/editor-components/default-notice/index.tsx
@@ -1,19 +1,14 @@
/**
* External dependencies
*/
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
import { store as editorStore } from '@wordpress/editor';
import triggerFetch from '@wordpress/api-fetch';
import { store as coreStore } from '@wordpress/core-data';
import { Notice, Button } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { CHECKOUT_PAGE_ID, CART_PAGE_ID } from '@woocommerce/block-settings';
-import {
- useCallback,
- useState,
- createInterpolateElement,
-} from '@wordpress/element';
-import { getAdminLink } from '@woocommerce/settings';
+import { useCallback, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
@@ -156,36 +151,3 @@ export function DefaultNotice( { block }: { block: string } ) {
);
}
-
-export function LegacyNotice( { block }: { block: string } ) {
- return (
-
+ { noticeContent }{ ' ' }
+
+ { __(
+ 'Configure Payment Methods',
+ 'woo-gutenberg-products-block'
+ ) }
+
+
+ 
| 
|
+
+### Product SKU Block: Don't render the prefix when the SKU isn't defined. ([8837](https://github.com/woocommerce/woocommerce-blocks/pull/8837))
+
+1. Create a post/page.
+2. Add the `Products` block.
+3. Inside the `Products` block, add the Product SKU block.
+4. Save the post/page.
+5. Edit a Product that will be visible in `Products` block.
+6. Scroll down until you see the “Inventory” section. In that section, it is visible a field labeled “SKU.” Remove the SKU in that field, and then click on the “Update” button at the bottom of the page.
+7. On the front end, visit the saved post/page and check the `Products` block.
+8. Ensure that the edited product doesn't have the SKU prefix visible.
+
+| Before | After |
+|--------|--------|
+|||
+
+### Mini-cart: Add the option to change the style between 'Outline' and 'Fill' in all the buttons. ([8835](https://github.com/woocommerce/woocommerce-blocks/pull/8835))
+
+1. Add the `Mini cart` block to the header template of your site.
+2. Go to the `Site Editor` and edit the `Mini cart` template part.
+3. Open the `List view` and select the `Empty Mini Cart view`.
+4. Click on the `Start shopping` button, check that you can change the button style between `Default` and `Outline` in the sidebar settings and change it from the default and save.
+6. Go to the frontend and check the button has the style you just picked on the Site editor.
+7. Repeat the same steps for the `Filled Mini Cart view` and the `View my cart` and the `Go to checkout` buttons.
+
+### Product SKU: Make the block focusable in editor. ([8804](https://github.com/woocommerce/woocommerce-blocks/pull/8804))
+
+1. Create a new post
+2. Add Products block
+3. Add Product SKU block to Products
+4. Hover and click on the product
+5. **Expected:** Product SKU can be focused on and contextual menu is displayed. Block can be moved up and down to switch places with other blocks.
+
+| Before | After |
+| ------ | ----- |
+| 
| 
|
+
+
+### Add Fill & Outline styles, width settings & new typography controls for Product(Add to cart) button block. ([8781](https://github.com/woocommerce/woocommerce-blocks/pull/8781))
+
+
+- Add `Products block` to a page/post.
+- Select `Add to cart` inner block.
+- In the sidebar, confirm newly added controls work as expected:
+ - Styles: Default & Outline ( Feature plugin )
+ - Width Settings ( Feature Plugin + WooCommerce Core )
+ - Typography controls ( Feature plugin )
+- Confirm `Add to cart` works for cross-sells as well.
+
+
+
+
+### Add style to the `Mini Cart` buttons. ([8776](https://github.com/woocommerce/woocommerce-blocks/pull/8776))
+
+1. Add the `Mini cart` block to the header template of your site.
+2. Go to the `Site Editor` and edit the `Mini cart` template part.
+3. Open the `List view` and select the `Filled Mini Cart view`.
+4. Click on the `View my cart` button and check that you can change the background and text colors of the button.
+5. Click on the `Go to checkout` button and check that you can change the background and text colors of the button.
+7. Save, go to the frontend, and check the buttons have the colors you just picked on the Site editor.
+
+### Add the ability to change the background and text colors of the Mini Cart block "Start shopping" button. ([8766](https://github.com/woocommerce/woocommerce-blocks/pull/8766))
+
+1. Add the `Mini cart` block to the header template of your site.
+2. Go to the `Site Editor` and edit the `Mini cart` template part.
+3. Open the `List view` and select the `Empty Mini Cart view`.
+4. Click on the `Start shopping` button and check that you can change the background and text colors of the button.
+5. Change both of them and save.
+6. Go to the frontend and check the button has the colors you just picked on the Site editor.
+
+### Mini-cart: Add setting to not render the block on the cart & checkout pages. ([8700](https://github.com/woocommerce/woocommerce-blocks/pull/8700))
+
+#### Site Editor
+
+1. Go to the Site Editor > Template parts and edit the header template to add the `Mini Cart` block. Save.
+2. Edit the block and make sure you see the new setting:
+
+
+
+3. Make sure the default option is `Hide`.
+4. In the store, go to the Cart page and make sure the `Mini Cart` is rendered but invisible. Repeat but for the Checkout page.
+5. Go back to the Site Editor, change the `Mini Cart` setting to `Remove`, and save.
+6. In the store, go to the Cart page and make sure the `Mini Cart` markup is not rendered at all. Repeat but for the Checkout page.
+
+
+#### Post/page
+
+1. Create a new post or page.
+2. Insert the `Mini Cart`.
+3. Make sure the new `Mini Cart in cart and checkout pages` setting does not appear.
+
+
+### Ensure shipping rates do not show in the Checkout block if the "Hide shipping costs until an address is entered option is selected". ([8682](https://github.com/woocommerce/woocommerce-blocks/pull/8682))
+
+
+1. Go to `WooCommerce -> Settings -> Shipping -> Local Pickup`, enable Local Pickup and add a location.
+2. Go to the Checkout block in the Page editor, click on the Shipping Options block - in the block sidebar, enable the `Hide shipping costs until an address is entered` option.
+3. In WooCommerce -> Settings -> General change `Default customer location` to `No location by default`.
+4. In an incognito window, add an item to your cart and go to the Checkout block.
+5. Ensure no shipping rates are shown, and ensure the "Shipping" button for method selection says `calculated with an address`
+6. Enter an address (one that you have rates set up for) - as you fill in the address, be sure the rates don't populate until it's completely filled in. (address 1, city, state, country, postcode).
+7. Ensure you can change rates etc.
+8. Disable the `Hide shipping costs until an address is entered` in the Page editor and ensure the rates show as usual as soon as the country/state are entered and the rest of the address is empty. (note you should enter a country that you have rates for!).
+
+
+### Move option to hide shipping costs until an address is entered to the Checkout block. ([8680](https://github.com/woocommerce/woocommerce-blocks/pull/8680))
+
+
+1. Go to WooCommerce -> Settings -> Shipping -> Local Pickup, enable Local Pickup and add a location.
+2. Go to the Checkout block in the Page editor. Select the `Shipping Method` block
+3. See the `Hide shipping costs until an address is entered` option in the block sidebar.
+4. Toggle it and ensure it works. Remember the value you toggled it to.
+5. Select the `Shipping options` block, see the same option. Ensure the value is the same as what it was in step 4.
+6. If the option is `true` then you should see the text `Shipping options will be displayed here after entering your full shipping address.` instead of shipping options.
+7. Toggle the option and ensure the inner block changes to either shipping options or the text.
+8. Go back to the `Shipping Method` block and toggle the option there. View the `Shipping options` block while toggling and ensure it changes.
+
+
+| Before | After |
+| ------ | ----- |
+| 
| 
|
+
+
+### Remove certain Shipping settings from WooCommerce -> Settings -> Shipping -> Shipping Options when using the Cart or Checkout blocks, these have been moved to setting on the blocks. ([8679](https://github.com/woocommerce/woocommerce-blocks/pull/8679))
+
+1. Go to `WooCommerce -> Settings -> Advanced` - set the Cart and Checkout pages to pages containing the **shortcode** cart/checkout experience. Save.
+2. Go to `WooCommerce -> Settings -> Shipping -> Shipping Options` - observe the two options, `Hide shipping costs until an address is entered` and `Enable the shipping calculator on the cart page`.
+3. Go to `WooCommerce -> Settings -> Advanced` - set the **Cart** page to one containing the **Cart Block**. Save.
+4. Go to `WooCommerce -> Settings -> Shipping -> Shipping Options` - observe that where the two options were in step 2, only, `Hide shipping costs until an address is entered` remains. Ensure it displays correctly and looks OK.
+5. Go to `WooCommerce -> Settings -> Advanced` - set the **Checkout** page to one containing the **Checkout Block**. Save.
+6. Go to `WooCommerce -> Settings -> Shipping -> Shipping Options` - observe that where the two options were in step 2 nothing appears.
+7. Go to `WooCommerce -> Settings -> Advanced` - set the **Cart** page to one containing the **Shortcode cart**. Save.
+8. Go to `WooCommerce -> Settings -> Shipping -> Shipping Options` - observe that where the two options were in step 2 only `Enable the shipping calculator on the cart page` appears. Ensure it displays correctly.
+
+Expected results
+
+| | Shortcode Cart | Block Cart |
+|-|----------------|------------|
+| **Shortcode Checkout** | 
| 
|
+| **Block Checkout** | 
| 
|
+
+### Add spacing between Mini Cart title and products list when scrolled. ([8676](https://github.com/woocommerce/woocommerce-blocks/pull/8676))
+
+
+1. With a block theme, add the Mini Cart block to the header of your site.
+2. Add many products to your cart.
+3. Click on the Mini Cart button to open the drawer.
+4. Scroll down the list of products in the Mini Cart drawer and verify there is some space between the title and product list.
+5. Go to Appearance > Editor > Template parts and edit the Mini Cart template part.
+6. Change the background color to something different.
+7. Repeat steps 3 and 4 and verify the space between the Mini Cart title and the products list honors that color.
+
+Before | After | After (with custom background color)
+--- | --- | ---
+ |  | 
+
+
+### Add new ExperimentalOrderLocalPickupPackages Slot/Fill. ([8636](https://github.com/woocommerce/woocommerce-blocks/pull/8636))
+
+
+1. Go to WooCommerce -> Settings -> Shipping -> Local Pickup and activate Local Pickup. Ensure you have added a couple of locations.
+2. Add an item to your cart and go to the Checkout block.
+3. Select Local Pickup and ensure the options you set up in step 1 are visible.
+
+
+### Add client side postcode validation. ([8503](https://github.com/woocommerce/woocommerce-blocks/pull/8503))
+
+1. Add a product to the Cart and go to the Checkout block page.
+2. Select United Kingdom (UK) as country.
+3. Verify that the postcode `AA9A 9AA` passes the validation.
+4. Verify that the postcode `9999 999` fails the validation.
+5. Verify that it's not possible to have spaces before the postcode, .e.g. ` AA9A 9AA`.
+6. Verify that lowercase letters, e.g. `aa9A 9aa`, are automatically converted to uppercase letters, e.g. `AA9A 9AA`.
+
+
+### Display pickup location details in order confirmations. ([8727](https://github.com/woocommerce/woocommerce-blocks/pull/8727))
+
+1. Place an order using the Checkout block, selecting Local Pickup as your shipping method.
+2. Check the order confirmation page shows pickup details.
+3. Confirm the order confirmation page hides the "shipping address".
+4. Check the order email confirmation shows the same pickup details.
+
+
+
+### Local Pickup: Merge country and state into same field in location modal. ([8408](https://github.com/woocommerce/woocommerce-blocks/pull/8408))
+
+
+1. `Enable local pickup` in `WooCommerce -> Settings -> Shipping -> Local pickup -> General`.
+2. Under `Pickup locations`, click on `Add pickup location`. The `Pickup location` modal should open
+3. Choose a country with a state. Ensure it's displayed in one field
+4. Fill in the other fields of the modal form, click on `done`, then save changes
+5. Go to your store, add a product to the cart, then go to the Checkout Block page
+6. Under the `Shipping method` section, select `Local Pickup`
+7. Ensure the correct country and state you previously selected are correctly showing under `Pickup options`
+8. Go back to the local pickup settings from step 1. Follow the same steps from 2 to 7, but in step 3, choose a country without a state (e.g., Cameroon) and ensure that the `State` text field is displayed. Fill in the form and continue with the rest of the instructions.
+
+| Before | After |
+| ------ | ----- |
+| 
| 
|
+
+
+### Enable users to migrate to the blockified Single Product template. ([8324](https://github.com/woocommerce/woocommerce-blocks/pull/8324))
+
+1. Enter the `Single Product` template.
+2. Check that the placeholder description says "This block serves as a placeholder for your WooCommerce Single Product Block. We recommend upgrading to the Single Products block for more features to edit your products visually. Don't worry, you can always revert back.".
+3. Click the `Upgrade to Blockified Single Product Template` button.
+4. See new templates work in the Site Editor and on the front end.
+
+| Before | After |
+| ------ | ----- |
+| 
|