WhatsApp block: add missing classes in editor

See #40685 (review)
Automattic · Jan 9, 2025 · 899c7ee · 899c7ee
1 parent 634fa79
commit 899c7ee
Showing 1 changed file with 5 additions and 7 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js b/projects/plugins/jetpack/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -1,4 +1,4 @@
-import { BlockControls, InspectorControls, RichText } from '@wordpress/block-editor';
+import { BlockControls, InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { useEffect, useCallback } from '@wordpress/element';
 import clsx from 'clsx';
@@ -8,7 +8,9 @@ import '../view.scss';
 
 export default function WhatsAppButtonEdit( { attributes, setAttributes, className, clientId } ) {
 	const { countryCode, buttonText, colorClass, backgroundColor } = attributes;
-
+	const blockProps = useBlockProps( {
+		className: clsx( className, colorClass && `is-color-${ colorClass }` ),
+	} );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 
 	const getCountryCode = useCallback( async () => {
@@ -44,12 +46,8 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		}
 	}, [ clientId, countryCode, getCountryCode, selectBlock ] );
 
-	const getBlockClassNames = () => {
-		return clsx( className, colorClass ? 'is-color-' + colorClass : undefined );
-	};
-
 	return (
-		<div className={ getBlockClassNames() }>
+		<div { ...blockProps }>
 			<BlockControls>
 				<WhatsAppButtonConfiguration
 					context="toolbar"