Move the usage of Notices from @wordpress/components from frontend to editor (Filter by Attribute)

assets/js/blocks/attribute-filter/block.tsx

@@ -19,7 +19,6 @@ import FilterResetButton from '@woocommerce/base-components/filter-reset-button'
 import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Notice } from 'wordpress-components';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import { getQueryArgs, removeQueryArgs } from '@wordpress/url';
 import {
@@ -56,7 +55,7 @@ import {
 	formatSlug,
 	generateUniqueId,
 } from './utils';
-import { BlockAttributes, DisplayOption } from './types';
+import { BlockAttributes, DisplayOption, GetNotice } from './types';
 import CheckboxFilter from './checkbox-filter';
 import { useSetWraperVisibility } from '../filter-wrapper/context';
 
@@ -66,13 +65,16 @@ import { useSetWraperVisibility } from '../filter-wrapper/context';
  * @param {Object}  props            Incoming props for the component.
  * @param {Object}  props.attributes Incoming block attributes.
  * @param {boolean} props.isEditor   Whether the component is being rendered in the editor.
+ * @param {boolean} props.getNotice  Get notice content if in editor.
  */
 const AttributeFilterBlock = ( {
 	attributes: blockAttributes,
 	isEditor = false,
+	getNotice = () => null,
 }: {
 	attributes: BlockAttributes;
 	isEditor?: boolean;
+	getNotice?: GetNotice;
 } ) => {
 	const hasFilterableProducts = getSettingWithCoercion(
 		'has_filterable_products',
@@ -483,33 +485,15 @@ const AttributeFilterBlock = ( {
 	// Short-circuit if no attribute is selected.
 	if ( ! attributeObject ) {
 		if ( isEditor ) {
-			return (
-				<Notice status="warning" isDismissible={ false }>
-					<p>
-						{ __(
-							'Please select an attribute to use this filter!',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-				</Notice>
-			);
+			return getNotice( 'noAttributes' );
 		}
 		setWrapperVisibility( false );
 		return null;
 	}
 
 	if ( displayedOptions.length === 0 && ! attributeTermsLoading ) {
 		if ( isEditor ) {
-			return (
-				<Notice status="warning" isDismissible={ false }>
-					<p>
-						{ __(
-							'There are no products with the selected attributes.',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-				</Notice>
-			);
+			return getNotice( 'noProducts' );
 		}
 	}
 

assets/js/blocks/attribute-filter/edit.tsx

@@ -23,6 +23,7 @@ import {
 	ToggleControl,
 	Button,
 	ToolbarGroup,
+	Notice,
 	withSpokenMessages,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -35,11 +36,31 @@ import {
  */
 import Block from './block';
 import './editor.scss';
-import type { EditProps } from './types';
+import type { EditProps, GetNotice } from './types';
 import { UpgradeNotice } from '../filter-wrapper/upgrade';
 
 const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
 
+const noticeContent = {
+	noAttributes: __(
+		'Please select an attribute to use this filter!',
+		'woo-gutenberg-products-block'
+	),
+	noProducts: __(
+		'There are no products with the selected attributes.',
+		'woo-gutenberg-products-block'
+	),
+};
+
+const getNotice: GetNotice = ( type ) => {
+	const content = noticeContent[ type ];
+	return content ? (
+		<Notice status="warning" isDismissible={ false }>
+			<p>{ content }</p>
+		</Notice>
+	) : null;
+};
+
 const Edit = ( {
 	attributes,
 	setAttributes,
@@ -416,7 +437,11 @@ const Edit = ( {
 						/>
 					) }
 					<Disabled>
-						<Block attributes={ attributes } isEditor={ true } />
+						<Block
+							attributes={ attributes }
+							isEditor={ true }
+							getNotice={ getNotice }
+						/>
 					</Disabled>
 				</div>
 			) }

assets/js/blocks/attribute-filter/types.ts

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import type { ReactElement } from 'react';
 import type { BlockEditProps } from '@wordpress/blocks';
 
 export interface BlockAttributes {
@@ -27,3 +28,6 @@ export interface DisplayOption {
 	textLabel: string;
 	formattedValue: string;
 }
+
+export type Notices = 'noAttributes' | 'noProducts';
+export type GetNotice = ( type: Notices ) => ReactElement | null;