diff --git a/assets/js/blocks/active-filters/edit.js b/assets/js/blocks/active-filters/edit.js
index b0e468c9a33..1b061d8a787 100644
--- a/assets/js/blocks/active-filters/edit.js
+++ b/assets/js/blocks/active-filters/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Disabled, PanelBody, withSpokenMessages } from '@wordpress/components';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
@@ -18,6 +18,10 @@ import { getTextColorClassAndStyleFromAttributeObject } from '../../utils/style-
 const Edit = ( { attributes, setAttributes } ) => {
 	const { className, displayStyle, heading, headingLevel } = attributes;
 
+	const blockProps = useBlockProps( {
+		className,
+	} );
+
 	const textColorClassAndStyle = getTextColorClassAndStyleFromAttributeObject(
 		attributes
 	);
@@ -81,7 +85,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 	};
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			{ getInspectorControls() }
 			<BlockTitle
 				className={ classNames(
diff --git a/assets/js/blocks/active-filters/index.js b/assets/js/blocks/active-filters/index.js
index d42b5b5d6ab..148101560df 100644
--- a/assets/js/blocks/active-filters/index.js
+++ b/assets/js/blocks/active-filters/index.js
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { Icon, toggle } from '@woocommerce/icons';
 import classNames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -62,9 +63,12 @@ registerBlockType( 'woocommerce/active-filters', {
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
 		};
+
 		return (
 			<div
-				className={ classNames( 'is-loading', className ) }
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
 				{ ...data }
 			>
 				<span