POC: remove the title from filter block

assets/js/base/components/filter-update-heading/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Warning } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+
+const UpdateFilterHeadingsPrompt = ( { onClick } ) => {
+	const actions = [
+		<Button key="upgrade" onClick={ onClick } variant="primary">
+			{ __( 'Upgrade block', 'woo-gutenberg-products-block' ) }
+		</Button>,
+	];
+
+	return (
+		<Warning
+			actions={ actions }
+			className="wc-block-components-filter-update-heading"
+		>
+			{ __(
+				'This block is outdated. Please upgrade to the latest version!',
+				'woo-gutenberg-products-block'
+			) }
+		</Warning>
+	);
+};
+
+export default UpdateFilterHeadingsPrompt;

assets/js/base/components/filter-update-heading/style.scss

@@ -0,0 +1,10 @@
+.wc-block-components-filter-update-heading {
+	background: transparent;
+	border-radius: 0;
+	border-width: 0 0 1px;
+	margin: 1px 0;
+
+	.block-editor-warning__actions {
+		margin-top: 0;
+	}
+}

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

@@ -18,6 +18,10 @@
 			"type": "string",
 			"default": "list"
 		},
+		"heading": {
+			"type": "string",
+			"default": ""
+		},
 		"headingLevel": {
 			"type": "number",
 			"default": 3

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
 import type { BlockEditProps } from '@wordpress/blocks';
@@ -21,16 +21,13 @@ import {
  */
 import Block from './block';
 import type { Attributes } from './types';
+import withTitleMigration from '../../hocs/with-title-migration';
 
 const Edit = ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) => {
-	const { className, displayStyle, heading, headingLevel } = attributes;
-
-	const blockProps = useBlockProps( {
-		className,
-	} );
+	const { displayStyle, heading, headingLevel } = attributes;
 
 	const getInspectorControls = () => {
 		return (
@@ -89,21 +86,23 @@ const Edit = ( {
 	};
 
 	return (
-		<div { ...blockProps }>
+		<>
 			{ getInspectorControls() }
-			<BlockTitle
-				className="wc-block-active-filters__title"
-				headingLevel={ headingLevel }
-				heading={ heading }
-				onChange={ ( value: Attributes[ 'heading' ] ) =>
-					setAttributes( { heading: value } )
-				}
-			/>
+			{ 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>
-		</div>
+		</>
 	);
 };
 
-export default withSpokenMessages( Edit );
+export default withSpokenMessages( withTitleMigration( Edit ) );

assets/js/blocks/active-filters/editor.scss

@@ -0,0 +1,19 @@
+.wp-block-woocommerce-active-filters {
+	&.has-upgrade-prompt {
+		border: 1px solid $gray-900;
+		padding: 0 $gap;
+		position: relative;
+
+		&::before {
+			background: rgba($white, 0.6);
+			bottom: 0;
+			content: "";
+			display: block;
+			left: 0;
+			position: absolute;
+			right: 0;
+			top: 0;
+			z-index: 1;
+		}
+	}
+}

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

@@ -8,15 +8,14 @@ import { renderFrontend } from '@woocommerce/base-utils';
  */
 import Block from './block';
 import metadata from './block.json';
-import { blockAttributes } from './attributes';
 
 const getProps = ( el: HTMLElement ) => {
 	return {
 		attributes: {
 			displayStyle:
 				el.dataset.displayStyle ||
 				metadata.attributes.displayStyle.default,
-			heading: el.dataset.heading || blockAttributes.heading.default,
+			heading: el.dataset.heading || metadata.attributes.heading.default,
 			headingLevel: el.dataset.headingLevel
 				? parseInt( el.dataset.headingLevel, 10 )
 				: metadata.attributes.headingLevel.default,

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

@@ -13,7 +13,6 @@ import { useBlockProps } from '@wordpress/block-editor';
  */
 import edit from './edit';
 import metadata from './block.json';
-import { blockAttributes } from './attributes';
 import { Attributes } from './types';
 
 registerBlockType( metadata, {
@@ -30,10 +29,6 @@ registerBlockType( metadata, {
 			/>
 		),
 	},
-	attributes: {
-		...metadata.attributes,
-		...blockAttributes,
-	},
 	transforms: {
 		from: [
 			{
@@ -60,19 +55,13 @@ registerBlockType( metadata, {
 	edit,
 	// Save the props to post content.
 	save( { attributes }: { attributes: Attributes } ) {
-		const { className, displayStyle, heading, headingLevel } = attributes;
-		const data = {
-			'data-display-style': displayStyle,
-			'data-heading': heading,
-			'data-heading-level': headingLevel,
-		};
+		const { className } = attributes;
 
 		return (
 			<div
 				{ ...useBlockProps.save( {
 					className: classNames( 'is-loading', className ),
 				} ) }
-				{ ...data }
 			>
 				<span
 					aria-hidden
@@ -81,4 +70,42 @@ registerBlockType( metadata, {
 			</div>
 		);
 	},
+	deprecated: [
+		{
+			attributes: {
+				...metadata.attributes,
+				heading: {
+					type: 'string',
+					default: __(
+						'Active filters',
+						'woo-gutenberg-products-block'
+					),
+				},
+			},
+
+			save( { attributes }: { attributes: Attributes } ) {
+				const { className, displayStyle, heading, headingLevel } =
+					attributes;
+				const data = {
+					'data-display-style': displayStyle,
+					'data-heading': heading,
+					'data-heading-level': headingLevel,
+				};
+
+				return (
+					<div
+						{ ...useBlockProps.save( {
+							className: classNames( 'is-loading', className ),
+						} ) }
+						{ ...data }
+					>
+						<span
+							aria-hidden
+							className="wc-block-active-product-filters__placeholder"
+						/>
+					</div>
+				);
+			},
+		},
+	],
 } );

assets/js/editor-components/block-title/index.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { PlainText } from '@wordpress/block-editor';
 import { withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { Disabled } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,9 +18,10 @@ const BlockTitle = ( {
 	onChange,
 	heading,
 	instanceId,
+	disabled = false,
 } ) => {
 	const TagName = `h${ headingLevel }`;
-	return (
+	const Component = () => (
 		<TagName className={ className }>
 			<label
 				className="screen-reader-text"
@@ -35,6 +37,16 @@ const BlockTitle = ( {
 			/>
 		</TagName>
 	);
+
+	if ( disabled ) {
+		return (
+			<Disabled>
+				<Component />
+			</Disabled>
+		);
+	}
+
+	return <Component />;
 };
 
 BlockTitle.propTypes = {
@@ -54,6 +66,10 @@ BlockTitle.propTypes = {
 	 * Level of the heading tag (1, 2, 3... will render <h1>, <h2>, <h3>... elements).
 	 */
 	headingLevel: PropTypes.number,
+	/**
+	 * If the title is a disabled element
+	 */
+	disabled: PropTypes.bool,
 };
 
 export default withInstanceId( BlockTitle );

assets/js/hocs/with-title-migration.tsx

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import UpdateFilterHeadingsPrompt from '@woocommerce/base-components/filter-update-heading';
+import { getSettingWithCoercion } from '@woocommerce/settings';
+import type { BlockEditProps } from '@wordpress/blocks';
+import { isBoolean } from '@woocommerce/types';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useUpdateFilterHeadings from '../shared/hooks/use-update-filter-headings';
+
+interface Attributes {
+	heading: string;
+	headingLevel: number;
+	className?: string;
+}
+
+const withTitleMigration = (
+	OriginalComponent: React.FunctionComponent< Record< string, unknown > >
+) => {
+	return ( props: BlockEditProps< Attributes > ): JSX.Element => {
+		const { attributes, setAttributes, clientId } = props;
+		const { className, heading, headingLevel } = attributes;
+
+		const blockProps = useBlockProps( {
+			className,
+		} );
+
+		/**
+		 * Since WooCommerce Blocks 8.2.0, we have decoupled the block title from the filter block itself.
+		 * So we need to prompt users who are already using the block with title to click update,
+		 * where we will create a title block for them.
+		 */
+		const shouldRemoveBlockTitle = getSettingWithCoercion(
+			'shouldRemoveBlockTitle',
+			false,
+			isBoolean
+		);
+
+		const updateBlockHeading = useUpdateFilterHeadings( {
+			heading,
+			headingLevel,
+			clientId,
+			setAttributes,
+		} );
+
+		return (
+			<div { ...blockProps }>
+				{ shouldRemoveBlockTitle && heading && (
+					<UpdateFilterHeadingsPrompt
+						onClick={ updateBlockHeading }
+					/>
+				) }
+				<OriginalComponent { ...props } />
+			</div>
+		);
+	};
+};
+
+export default withTitleMigration;