Convert filter blocks to inner blocks

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

@@ -1,13 +1,14 @@
 {
 	"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

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

@@ -35,6 +35,8 @@ import {
 import ActiveAttributeFilters from './active-attribute-filters';
 import FilterPlaceholders from './filter-placeholders';
 import { Attributes } from './types';
+import metadata from './block.json';
+import { useSetWraperVisibility } from '../filter-wrapper/context';
 
 /**
  * Component displaying active filters.
@@ -50,6 +52,13 @@ const ActiveFiltersBlock = ( {
 	attributes: Attributes;
 	isEditor?: boolean;
 } ) => {
+	blockAttributes = {
+		...blockAttributes,
+		displayStyle:
+			blockAttributes?.displayStyle ||
+			metadata.attributes.displayStyle.default,
+	};
+	const setWrapperVisibility = useSetWraperVisibility();
 	const isMounted = useIsMounted();
 	const componentHasMounted = isMounted();
 	const filteringForPhpTemplate = getSettingWithCoercion(
@@ -259,6 +268,7 @@ const ActiveFiltersBlock = ( {
 	};
 
 	if ( ! shouldShowLoadingPlaceholders && ! hasFilters() && ! isEditor ) {
+    setWrapperVisibility( false );
 		return null;
 	}
 
@@ -284,9 +294,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 { UpgradeToolbarButton } 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 } )
-				}
+			<UpgradeToolbarButton
+				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/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/attribute-filter/block.json

@@ -1,16 +1,17 @@
 {
 	"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
 	},
 	"example": {
 		"attributes": {

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

@@ -12,7 +12,6 @@ import { Icon, category, external } from '@wordpress/icons';
 import { SearchListControl } from '@woocommerce/editor-components/search-list-control';
 import { sortBy } from 'lodash';
 import { getAdminLink, getSetting } from '@woocommerce/settings';
-import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
 import classnames from 'classnames';
 import { SearchListItemsType } from '@woocommerce/editor-components/search-list-control/types';
@@ -37,10 +36,16 @@ import {
 import Block from './block';
 import './editor.scss';
 import type { EditProps } from './types';
+import { UpgradeToolbarButton } from '../filter-wrapper/upgrade';
 
 const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
 
-const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
+const Edit = ( {
+	attributes,
+	setAttributes,
+	debouncedSpeak,
+	clientId,
+}: EditProps ) => {
 	const {
 		attributeId,
 		className,
@@ -91,15 +96,15 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
 			return;
 		}
 
-		const attributeName = productAttribute.attribute_label;
+		// const attributeName = productAttribute.attribute_label;
 
 		setAttributes( {
 			attributeId: selectedId as number,
-			heading: sprintf(
-				/* translators: %s attribute name. */
-				__( 'Filter by %s', 'woo-gutenberg-products-block' ),
-				attributeName
-			),
+			// heading: sprintf(
+			// 	/* translators: %s attribute name. */
+			// 	__( 'Filter by %s', 'woo-gutenberg-products-block' ),
+			// 	attributeName
+			// ),
 		} );
 	};
 
@@ -183,21 +188,6 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
 							} )
 						}
 					/>
-					<p>
-						{ __(
-							'Heading Level',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-					<HeadingToolbar
-						isCollapsed={ false }
-						minLevel={ 2 }
-						maxLevel={ 7 }
-						selectedLevel={ headingLevel }
-						onChange={ ( newLevel: number ) =>
-							setAttributes( { headingLevel: newLevel } )
-						}
-					/>
 					<ToggleGroupControl
 						label={ __(
 							'Allow selecting multiple options?',
@@ -412,6 +402,12 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
 		<div { ...blockProps }>
 			{ getBlockControls() }
 			{ getInspectorControls() }
+			<UpgradeToolbarButton
+				clientId={ clientId }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				filterType="attribute-filter"
+			/>
 			{ isEditing ? (
 				renderEditMode()
 			) : (
@@ -421,14 +417,16 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak }: EditProps ) => {
 						'wc-block-attribute-filter'
 					) }
 				>
-					<BlockTitle
-						className="wc-block-attribute-filter__title"
-						headingLevel={ headingLevel }
-						heading={ heading }
-						onChange={ ( value: string ) =>
-							setAttributes( { heading: value } )
-						}
-					/>
+					{ heading && (
+						<BlockTitle
+							className="wc-block-attribute-filter__title"
+							headingLevel={ headingLevel }
+							heading={ heading }
+							onChange={ ( value: string ) =>
+								setAttributes( { heading: value } )
+							}
+						/>
+					) }
 					<Disabled>
 						<Block attributes={ attributes } isEditor />
 					</Disabled>

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

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

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

@@ -17,11 +17,6 @@ import { blockAttributes } from './attributes';
 import metadata from './block.json';
 
 registerBlockType( metadata, {
-	title: __( 'Filter by Attribute', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Enable customers to filter the product grid by selecting one or more attributes, such as color.',
-		'woo-gutenberg-products-block'
-	),
 	icon: {
 		src: (
 			<Icon

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

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { parseAttributes } from './utils';
+
+const InnerBlockWrapper = ( props: Record< string, unknown > ) => {
+	return <Block isEditor={ false } attributes={ parseAttributes( props ) } />;
+};
+
+export default InnerBlockWrapper;

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

@@ -8,7 +8,12 @@ import {
 	PREFIX_QUERY_ARG_FILTER_TYPE,
 	PREFIX_QUERY_ARG_QUERY_TYPE,
 } from '@woocommerce/utils';
-import { AttributeObject } from '@woocommerce/types';
+import { AttributeObject, isString } from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
 
 interface Param {
 	attribute: string;
@@ -104,3 +109,34 @@ export const formatSlug = ( slug: string ) =>
 		.replace( /_/g, '-' )
 		.replace( /-+/g, '-' )
 		.replace( /[^a-zA-Z0-9-]/g, '' );
+
+export const parseAttributes = ( data: Record< string, unknown > ) => {
+	return {
+		className: isString( data?.className ) ? data.className : '',
+		attributeId: parseInt(
+			isString( data?.attributeId ) ? data.attributeId : '0',
+			10
+		),
+		showCounts:
+			data?.showCounts === 'true' ||
+			metadata.attributes.showCounts.default,
+		queryType:
+			( isString( data?.queryType ) && data.queryType ) ||
+			metadata.attributes.queryType.default,
+		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,
+		showFilterButton:
+			data?.showFilterButton === 'true' ||
+			metadata.attributes.showFilterButton.default,
+		selectType:
+			( isString( data?.selectType ) && data.selectType ) ||
+			metadata.attributes.selectType.default,
+		isPreview: false,
+	};
+};

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

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/filter-wrapper",
+	"version": "1.0.0",
+	"title": "Active Product Filters",
+	"description": "Show the currently active product filters. Works in combination with other filters blocks.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"attributes": {
+		"filterType": {
+			"type": "string",
+			"default": "active-filters"
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}