diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php index 8d78e7f9d1175a..6c5e3da7a6ab13 100644 --- 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 index 943fc3b4cb4c11..60a8b3c831bc4e 100644 --- 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;