Navigation Submenu: Improve color handling and inheritance logic

yogeshbhutkar · Dec 31, 2024 · 7d483df · 7d483df
1 parent 8cdd919
commit 7d483df
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -214,8 +214,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
-		// These properties for submenus should only be applied from context, clear previous values stored directly inside attributes.
-		unset( $attributes['textColor'], $attributes['backgroundColor'], $attributes['customTextColor'], $attributes['customBackgroundColor'] );
+		// These properties for submenus should only be applied from context.
+		// Values directly stored inside attributes should be applied to the parent block only.
+		unset(
+			$attributes['textColor'],
+			$attributes['backgroundColor'],
+			$attributes['customTextColor'],
+			$attributes['customBackgroundColor'],
+			$attributes['style']
+		);
 
 		// Copy some attributes from the parent block to this one.
 		// Ideally this would happen in the client when the block is created.
@@ -232,6 +239,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
 		}
 
+		// If there's no overlay color provided, then fallback to defaults.
+		// This is necessary to ensure parent block colors are not inherited.
+		if ( ! isset( $attributes['textColor'] ) && ! isset( $attributes['style']['color']['text'] ) ) {
+			$attributes['textColor'] = 'contrast';
+		}
+		if ( ! isset( $attributes['backgroundColor'] ) && ! isset( $attributes['style']['color']['background'] ) ) {
+			$attributes['backgroundColor'] = 'base';
+		}
+
 		// This allows us to be able to get a response from wp_apply_colors_support.
 		$block->block_type->supports['color'] = true;
 		$colors_supports                      = wp_apply_colors_support( $block->block_type, $attributes );

diff --git a/packages/block-library/src/navigation/edit/utils.js b/packages/block-library/src/navigation/edit/utils.js
@@ -61,29 +61,37 @@ export function getColors( context, isSubMenu ) {
 	} = context;
 
 	const colors = {};
+	const defaultColor = {
+		textColor: '#000',
+		backgroundColor: '#fff',
+	};
 
 	if ( isSubMenu && !! customOverlayTextColor ) {
 		colors.customTextColor = customOverlayTextColor;
 	} else if ( isSubMenu && !! overlayTextColor ) {
 		colors.textColor = overlayTextColor;
-	} else if ( !! customTextColor ) {
+	} else if ( ! isSubMenu && !! customTextColor ) {
 		colors.customTextColor = customTextColor;
-	} else if ( !! textColor ) {
+	} else if ( ! isSubMenu && !! textColor ) {
 		colors.textColor = textColor;
-	} else if ( !! style?.color?.text ) {
+	} else if ( ! isSubMenu && !! style?.color?.text ) {
 		colors.customTextColor = style.color.text;
+	} else {
+		colors.customTextColor = defaultColor.textColor;
 	}
 
 	if ( isSubMenu && !! customOverlayBackgroundColor ) {
 		colors.customBackgroundColor = customOverlayBackgroundColor;
 	} else if ( isSubMenu && !! overlayBackgroundColor ) {
 		colors.backgroundColor = overlayBackgroundColor;
-	} else if ( !! customBackgroundColor ) {
+	} else if ( ! isSubMenu && !! customBackgroundColor ) {
 		colors.customBackgroundColor = customBackgroundColor;
-	} else if ( !! backgroundColor ) {
+	} else if ( ! isSubMenu && !! backgroundColor ) {
 		colors.backgroundColor = backgroundColor;
-	} else if ( !! style?.color?.background ) {
+	} else if ( ! isSubMenu && !! style?.color?.background ) {
 		colors.customTextColor = style.color.background;
+	} else {
+		colors.customBackgroundColor = defaultColor.backgroundColor;
 	}
 
 	return colors;