fix test

woocommerce · Dec 29, 2021 · af20a74 · af20a74
1 parent 30503a5
commit af20a74
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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