Navigation: Apply color classes to the navigation container element (#…

…50968)

* Navigation: Apply color classes to the navigation container element

Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>

* Also apply styles to the container

* fix php linting

* remove trailing comma

---------

Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com>

packages/block-library/src/navigation/index.php

@@ -517,14 +517,43 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		'core/site-logo',
 	);
 
+	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
+	$style        = $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'];
+	$class        = implode( ' ', $classes );
+
+	// If the menu name has been used previously then append an ID
+	// to the name to ensure uniqueness across a given post.
+	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
+		$count         = $seen_menu_names[ $nav_menu_name ];
+		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class'      => $class,
+			'style'      => $style,
+			'aria-label' => $nav_menu_name,
+		)
+	);
+
+	$container_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => 'wp-block-navigation__container ' . $class,
+			'style' => $style,
+		)
+	);
+
 	$inner_blocks_html = '';
 	$is_list_open      = false;
 	foreach ( $inner_blocks as $inner_block ) {
 		$is_list_item = in_array( $inner_block->name, $list_item_nav_blocks, true );
 
 		if ( $is_list_item && ! $is_list_open ) {
 			$is_list_open       = true;
-			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
+			$inner_blocks_html .= sprintf(
+				'<ul %1$s>',
+				$container_attributes
+			);
 		}
 
 		if ( ! $is_list_item && $is_list_open ) {
@@ -546,23 +575,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$inner_blocks_html .= '</ul>';
 	}
 
-	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
-
-	// If the menu name has been used previously then append an ID
-	// to the name to ensure uniqueness across a given post.
-	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
-		$count         = $seen_menu_names[ $nav_menu_name ];
-		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
-	}
-
-	$wrapper_attributes = get_block_wrapper_attributes(
-		array(
-			'class'      => implode( ' ', $classes ),
-			'style'      => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
-			'aria-label' => $nav_menu_name,
-		)
-	);
-
 	$modal_unique_id = wp_unique_id( 'modal-' );
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,