NavigationMenu: set attributes rightly (#18150)

* navigation-menu: set attributes once

* navigation-menu: add CSS class as hook dependencies

* Update packages/block-library/src/navigation-menu/edit.js

Co-Authored-By: Enrique Piqueras <epiqueras@users.noreply.github.com>

packages/block-library/src/navigation-menu/edit.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	Fragment,
 	useMemo,
+	useEffect,
 } from '@wordpress/element';
 import {
 	InnerBlocks,
@@ -79,7 +80,7 @@ function NavigationMenu( {
 	 * Set the color type according to the given values.
 	 * It propagate the color values into the attributes object.
 	 * Both `backgroundColorValue` and `textColorValue` are
-	 * using the apply inline styles.
+	 * using the inline styles.
 	 *
 	 * @param {Object}  colorsData       Arguments passed by BlockColorsStyleSelector onColorChange.
 	 * @param {string}  colorsData.attr  Color attribute.
@@ -99,11 +100,13 @@ function NavigationMenu( {
 		}
 	};
 
-	// Set/Unset colors CSS classes.
-	setAttributes( {
-		backgroundColorCSSClass: backgroundColor.class ? backgroundColor.class : null,
-		textColorCSSClass: textColor.class ? textColor.class : null,
-	} );
+	useEffect( () => {
+		// Set/Unset colors CSS classes.
+		setAttributes( {
+			backgroundColorCSSClass: backgroundColor.class ? backgroundColor.class : null,
+			textColorCSSClass: textColor.class ? textColor.class : null,
+		} );
+	}, [ backgroundColor.class, textColor.class ] );
 
 	return (
 		<Fragment>