Navigation Submenu: Fix color handling and inheritance

WordPress · Dec 27, 2024 · 8cdd919 · 8cdd919
1 parent 5af740f
commit 8cdd919
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
@@ -283,23 +283,30 @@ export default function NavigationSubmenuEdit( {
 		}
 	}
 
+	const _textColor = attributes.textColor ?? textColor;
+	const _customTextColor = attributes.style?.color?.text ?? customTextColor;
+	const _backgroundColor = attributes.backgroundColor ?? backgroundColor;
+	const _customBackgroundColor =
+		attributes.style?.color?.background ?? customBackgroundColor;
+
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
 		className: clsx( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
 			'has-child': hasChildren,
-			'has-text-color': !! textColor || !! customTextColor,
-			[ getColorClassName( 'color', textColor ) ]: !! textColor,
-			'has-background': !! backgroundColor || customBackgroundColor,
-			[ getColorClassName( 'background-color', backgroundColor ) ]:
-				!! backgroundColor,
+			'has-text-color': !! _textColor || !! _customTextColor,
+			[ getColorClassName( 'color', _textColor ) ]:
+				!! _textColor && ! _customTextColor,
+			'has-background': !! _backgroundColor || !! _customBackgroundColor,
+			[ getColorClassName( 'background-color', _backgroundColor ) ]:
+				!! _backgroundColor && ! _customBackgroundColor,
 			'open-on-click': openSubmenusOnClick,
 		} ),
 		style: {
-			color: ! textColor && customTextColor,
-			backgroundColor: ! backgroundColor && customBackgroundColor,
+			color: _customTextColor,
+			backgroundColor: _customBackgroundColor,
 		},
 		onKeyDown,
 	} );

diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -99,6 +99,17 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] &&
 		$show_submenu_indicators;
 
+	$block->block_type->supports['color'] = true;
+	$colors_supports                      = wp_apply_colors_support( $block->block_type, $attributes );
+	if ( array_key_exists( 'class', $colors_supports ) ) {
+		$css_classes .= ' ' . $colors_supports['class'];
+	}
+
+	$style_attribute = '';
+	if ( array_key_exists( 'style', $colors_supports ) ) {
+		$style_attribute = $colors_supports['style'];
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
@@ -203,6 +214,9 @@ 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'] );
+
 		// Copy some attributes from the parent block to this one.
 		// Ideally this would happen in the client when the block is created.
 		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
@@ -244,11 +258,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html = $tag_processor->get_updated_html();
 		}
 
-		$wrapper_attributes = get_block_wrapper_attributes(
-			array(
-				'class' => $css_classes,
-				'style' => $style_attribute,
-			)
+		$wrapper_attributes = sprintf(
+			'class="%s" style="%s"',
+			$css_classes,
+			$style_attribute
 		);
 
 		$html .= sprintf(