POC: remove the title from filter block

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,11 +2,19 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	Warning,
+} 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';
+import { BlockEditProps, createBlock } from '@wordpress/blocks';
+import { getSettingWithCoercion } from '@woocommerce/settings';
+import { isBoolean } from '@woocommerce/types';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
+	Button,
 	Disabled,
 	PanelBody,
 	withSpokenMessages,
@@ -25,13 +33,20 @@ import type { Attributes } from './types';
 const Edit = ( {
 	attributes,
 	setAttributes,
+	clientId,
 }: BlockEditProps< Attributes > ) => {
 	const { className, displayStyle, heading, headingLevel } = attributes;
 
 	const blockProps = useBlockProps( {
 		className,
 	} );
 
+	const isHeadingRemoved = getSettingWithCoercion(
+		'isHeadingRemoved',
+		false,
+		isBoolean
+	);
+
 	const getInspectorControls = () => {
 		return (
 			<InspectorControls key="inspector">
@@ -88,17 +103,63 @@ const Edit = ( {
 		);
 	};
 
+	const { insertBlock } = useDispatch( 'core/block-editor' );
+	const currentBlockIndex = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getBlockIndex( clientId )
+	);
+
+	const updateBlock = () => {
+		const headingBlock = createBlock( 'core/heading', {
+			content: heading,
+			level: headingLevel,
+		} );
+		insertBlock( headingBlock, currentBlockIndex );
+		setAttributes( {
+			heading: '',
+		} );
+	};
+
+	const actions = [
+		<Button key="update" onClick={ updateBlock } variant="primary">
+			{ __( 'Update block', 'woo-gutenberg-products-block' ) }
+		</Button>,
+	];
+
 	return (
 		<div { ...blockProps }>
 			{ getInspectorControls() }
-			<BlockTitle
-				className="wc-block-active-filters__title"
-				headingLevel={ headingLevel }
-				heading={ heading }
-				onChange={ ( value: Attributes[ 'heading' ] ) =>
-					setAttributes( { heading: value } )
-				}
-			/>
+
+			{ isHeadingRemoved ? (
+				heading && (
+					<>
+						<Warning actions={ actions }>
+							{ __(
+								'This block has been updated!',
+								'woo-gutenberg-products-block'
+							) }
+						</Warning>
+						<Disabled>
+							<BlockTitle
+								className="wc-block-active-filters__title"
+								headingLevel={ headingLevel }
+								heading={ heading }
+								onChange={ ( value: Attributes[ 'heading' ] ) =>
+									setAttributes( { heading: value } )
+								}
+							/>
+						</Disabled>
+					</>
+				)
+			) : (
+				<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>

src/BlockTypes/ActiveFilters.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Package;
+
 /**
  * ActiveFilters class.
  */
@@ -11,4 +13,19 @@ class ActiveFilters extends AbstractBlock {
 	 * @var string
 	 */
 	protected $block_name = 'active-filters';
+
+	/**
+	 * Extra data passed through from server to client for block.
+	 *
+	 * @param array $attributes  Any attributes that currently are available from the block.
+	 *                           Note, this will be empty in the editor context when the block is
+	 *                           not in the post content on editor load.
+	 */
+	protected function enqueue_data( array $attributes = [] ) {
+		$this->asset_data_registry->add(
+			'isHeadingRemoved',
+			version_compare( Package::get_version(), '8.2.0', '>' ),
+			true
+		);
+	}
 }