Convert filter blocks to inner blocks (#6978)

* register filter wrapper block

* register block variation

* rename the active filters wrapper

* prevent 404 error

* Revert "prevent 404 error"

This reverts commit 8b6cb7c.

* render parent wrapper block

* support price filter block

* hide the active filter block from inserter

* swap the title of wrapper and inner filter block for active filters

* hide the legacy heading for the price filter

* update block title and description for active filters and price filter

* remove heading control for price filter

* remove heading control for active filters

* update pattern

* try: upgrade button

* limit the number of inner block to 2

* prevent removing the inner filter block

* Revert "prevent removing the inner filter block"

This reverts commit 83b7fee.

* convert stock filter to inner block

* refactor block upgrade button to share between filter blocks

* update default heading

* update pattern

* update icon and title

* Fix stock filter error by importing translations package

* Upgrade Active Filters name to Active Filter Controls

* Add upgrade support to price filter

* Convert attribute filter to inner block (#7101)

* wip: convert attribute filter to inner block

* fix: render inner attribute filter block on the front end

* refactor: inner block wrapper, extract the attribute parsing logic into a utility

Co-authored-by: Tom Cafferkey <[email protected]>

* Set correct attribute on the new filter blocks when they are upgraded

* Use the Warning component to display the upgrade message so it is consistent with Gutenberg

* address code review

* better detect legacy block to show the upgrade notice

* rename UpgradeToolbarButton to UpgradeNotice

* add upgrade notice to the stock filter block

* rename InnerBlockWrapper to BlockWrapper

* attribute-filter: control wrapper visibility

* passing block attributes down to inner active filters control block

* fix styling of inner attribute filter control block

* passing attribute to inner price filter control block

* passing down the attribute to inner stock filter control block

* remove unneccessary parsing

* use default scope for variations

* fix default attribute values

* use default block appender

* fix: lock control blocks

* remove dynamic title code from attribute filter block

* register active filters as variation and set it to the default that overrides the base block

* fix isActive for default variation

* fix: isActive logic for the active filters block

* register side effect

* fix ts error

* e2e: fix active filters block backend test

* e2e: fix frontend active filters test

* e2e: fix attribute filter test

* e2e: fix price filter test

* e2e: fix stock filter test

* e2e: update fixture

* e2e: fix attribute filter test

* remove invalid test

* e2e: update heading selector for price filter in backend test

* e2e: fixe backend price filter heading test

* fix: patterns i18n

* fix: heading level when upgrading the block

Co-authored-by: Tung Du <[email protected]>

assets/js/blocks/active-filters/block-wrapper.tsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { useColorProps } from '@woocommerce/base-hooks';
+import { isString } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { parseAttributes } from './utils';
+
+const BlockWrapper = ( props: Record< string, unknown > ) => {
+	const colorProps = useColorProps( props );
+
+	return (
+		<div
+			className={ isString( props.className ) ? props.className : '' }
+			style={ { ...colorProps.style } }
+		>
+			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+		</div>
+	);
+};
+
+export default BlockWrapper;

assets/js/blocks/active-filters/block.json

@@ -1,17 +1,19 @@
 {
 	"name": "woocommerce/active-filters",
 	"version": "1.0.0",
-	"title": "Active Product Filters",
+	"title": "Active Product Filter Controls",
 	"description": "Display the currently active product filters.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"supports": {
 		"html": false,
 		"multiple": false,
+		"inserter": false,
 		"color": {
 			"text": true,
 			"background": false
-		}
+		},
+		"lock": false
 	},
 	"attributes": {
 		"displayStyle": {

assets/js/blocks/active-filters/block.tsx

@@ -35,6 +35,7 @@ import {
 import ActiveAttributeFilters from './active-attribute-filters';
 import FilterPlaceholders from './filter-placeholders';
 import { Attributes } from './types';
+import { useSetWraperVisibility } from '../filter-wrapper/context';
 
 /**
  * Component displaying active filters.
@@ -50,6 +51,7 @@ const ActiveFiltersBlock = ( {
 	attributes: Attributes;
 	isEditor?: boolean;
 } ) => {
+	const setWrapperVisibility = useSetWraperVisibility();
 	const isMounted = useIsMounted();
 	const componentHasMounted = isMounted();
 	const filteringForPhpTemplate = getSettingWithCoercion(
@@ -178,9 +180,9 @@ const ActiveFiltersBlock = ( {
 			);
 		} );
 	}, [
-		componentHasMounted,
-		setIsLoading,
 		productAttributes,
+		componentHasMounted,
+		STORE_ATTRIBUTES,
 		blockAttributes.displayStyle,
 	] );
 
@@ -259,6 +261,7 @@ const ActiveFiltersBlock = ( {
 	};
 
 	if ( ! shouldShowLoadingPlaceholders && ! hasFilters() && ! isEditor ) {
+		setWrapperVisibility( false );
 		return null;
 	}
 
@@ -284,9 +287,12 @@ const ActiveFiltersBlock = ( {
 	);
 
 	if ( ! hasFilterableProducts ) {
+		setWrapperVisibility( false );
 		return null;
 	}
 
+	setWrapperVisibility( true );
+
 	const listClasses = classnames( 'wc-block-active-filters__list', {
 		'wc-block-active-filters__list--chips':
 			blockAttributes.displayStyle === 'chips',

assets/js/blocks/active-filters/edit.tsx

@@ -3,9 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
+import { BlockEditProps } from '@wordpress/blocks';
 import BlockTitle from '@woocommerce/editor-components/block-title';
-import type { BlockEditProps } from '@wordpress/blocks';
 import {
 	Disabled,
 	PanelBody,
@@ -22,10 +21,12 @@ import {
 import Block from './block';
 import type { Attributes } from './types';
 import './editor.scss';
+import { UpgradeNotice } from '../filter-wrapper/upgrade';
 
 const Edit = ( {
 	attributes,
 	setAttributes,
+	clientId,
 }: BlockEditProps< Attributes > ) => {
 	const { className, displayStyle, heading, headingLevel } = attributes;
 
@@ -70,21 +71,6 @@ const Edit = ( {
 							) }
 						/>
 					</ToggleGroupControl>
-					<p>
-						{ __(
-							'Heading Level',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-					<HeadingToolbar
-						isCollapsed={ false }
-						minLevel={ 2 }
-						maxLevel={ 7 }
-						selectedLevel={ headingLevel }
-						onChange={ ( newLevel: Attributes[ 'headingLevel' ] ) =>
-							setAttributes( { headingLevel: newLevel } )
-						}
-					/>
 				</PanelBody>
 			</InspectorControls>
 		);
@@ -93,14 +79,22 @@ const Edit = ( {
 	return (
 		<div { ...blockProps }>
 			{ getInspectorControls() }
-			<BlockTitle
-				className="wc-block-active-filters__title"
-				headingLevel={ headingLevel }
-				heading={ heading }
-				onChange={ ( value: Attributes[ 'heading' ] ) =>
-					setAttributes( { heading: value } )
-				}
+			<UpgradeNotice
+				attributes={ attributes }
+				clientId={ clientId }
+				setAttributes={ setAttributes }
+				filterType="active-filters"
 			/>
+			{ heading && (
+				<BlockTitle
+					className="wc-block-active-filters__title"
+					headingLevel={ headingLevel }
+					heading={ heading }
+					onChange={ ( value: Attributes[ 'heading' ] ) =>
+						setAttributes( { heading: value } )
+					}
+				/>
+			) }
 			<Disabled>
 				<Block attributes={ attributes } isEditor={ true } />
 			</Disabled>

assets/js/blocks/active-filters/frontend.ts

@@ -7,20 +7,11 @@ import { renderFrontend } from '@woocommerce/base-utils';
  * Internal dependencies
  */
 import Block from './block';
-import metadata from './block.json';
-import { blockAttributes } from './attributes';
+import { parseAttributes } from './utils';
 
 const getProps = ( el: HTMLElement ) => {
 	return {
-		attributes: {
-			displayStyle:
-				el.dataset.displayStyle ||
-				metadata.attributes.displayStyle.default,
-			heading: el.dataset.heading || blockAttributes.heading.default,
-			headingLevel: el.dataset.headingLevel
-				? parseInt( el.dataset.headingLevel, 10 )
-				: metadata.attributes.headingLevel.default,
-		},
+		attributes: parseAttributes( el.dataset ),
 		isEditor: false,
 	};
 };

assets/js/blocks/active-filters/index.tsx

@@ -17,7 +17,10 @@ import { blockAttributes } from './attributes';
 import { Attributes } from './types';
 
 registerBlockType( metadata, {
-	title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ),
+	title: __(
+		'Active Product Filter Controls',
+		'woo-gutenberg-products-block'
+	),
 	description: __(
 		'Display the currently active product filters.',
 		'woo-gutenberg-products-block'

assets/js/blocks/active-filters/utils.tsx

@@ -8,6 +8,12 @@ import Label from '@woocommerce/base-components/label';
 import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { changeUrl } from '@woocommerce/utils';
 import { Icon, closeSmall } from '@wordpress/icons';
+import { isString } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
 
 /**
  * Format a min/max price range to display.
@@ -277,3 +283,16 @@ export const urlContainsAttributeFilter = (
 
 	return filterIsInUrl;
 };
+
+export const parseAttributes = ( data: Record< string, unknown > ) => {
+	return {
+		heading: isString( data?.heading ) ? data.heading : '',
+		headingLevel:
+			( isString( data?.headingLevel ) &&
+				parseInt( data.headingLevel, 10 ) ) ||
+			metadata.attributes.headingLevel.default,
+		displayStyle:
+			( isString( data?.displayStyle ) && data.displayStyle ) ||
+			metadata.attributes.displayStyle.default,
+	};
+};

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

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { useColorProps } from '@woocommerce/base-hooks';
+import { isString } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { parseAttributes } from './utils';
+
+const BlockWrapper = ( props: Record< string, unknown > ) => {
+	const colorProps = useColorProps( props );
+
+	return (
+		<div
+			className={ isString( props.className ) ? props.className : '' }
+			style={ { ...colorProps.style } }
+		>
+			<Block isEditor={ false } attributes={ parseAttributes( props ) } />
+		</div>
+	);
+};
+
+export default BlockWrapper;

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

@@ -1,16 +1,18 @@
 {
 	"name": "woocommerce/attribute-filter",
 	"version": "1.0.0",
-	"title": "Filter by Attribute",
-	"description": "Enable customers to filter the product grid by selecting one or more attributes, such as color.",
+	"title": "Filter by Attribute Controls",
+	"description": "Allow customers to filter the grid by product attribute, such as color.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"supports": {
 		"html": false,
 		"color": {
 			"text": true,
 			"background": false
-		}
+		},
+		"inserter": false,
+		"lock": false
 	},
 	"example": {
 		"attributes": {

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

@@ -58,6 +58,7 @@ import {
 } from './utils';
 import { BlockAttributes, DisplayOption } from './types';
 import CheckboxFilter from './checkbox-filter';
+import { useSetWraperVisibility } from '../filter-wrapper/context';
 
 /**
  * Formats filter values into a string for the URL parameters needed for filtering PHP templates.
@@ -468,7 +469,10 @@ const AttributeFilterBlock = ( {
 		filteringForPhpTemplate,
 	] );
 
+	const setWrapperVisibility = useSetWraperVisibility();
+
 	if ( ! hasFilterableProducts ) {
+		setWrapperVisibility( false );
 		return null;
 	}
 
@@ -486,6 +490,7 @@ const AttributeFilterBlock = ( {
 				</Notice>
 			);
 		}
+		setWrapperVisibility( false );
 		return null;
 	}
 
@@ -513,6 +518,7 @@ const AttributeFilterBlock = ( {
 		( termsLoading || countsLoading ) && displayedOptions.length === 0;
 
 	if ( ! isLoading && displayedOptions.length === 0 ) {
+		setWrapperVisibility( false );
 		return null;
 	}
 
@@ -528,6 +534,8 @@ const AttributeFilterBlock = ( {
 		heading
 	);
 
+	setWrapperVisibility( true );
+
 	return (
 		<>
 			{ ! isEditor && blockAttributes.heading && filterHeading }