Custom block stylesheet for the core/navigation-submenu block is not enqueued #66786

Activity

1. germanfrelo

   added

   [Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

   on Nov 6, 2024
2. germanfrelo

   changed the title [-]Custom block stylesheet for the navigation-submenu block is not recognized[/-] [+]Custom block stylesheet for the `core/navigation-submenu` block is not enqueued[/+] on Nov 6, 2024
3. patil-vipul commented on Dec 27, 2024

   

   patil-vipul

   on Dec 27, 2024

   Last edited by patil-vipul

   More actions

   While reviewing the core functionality of enqueuing custom block stylesheets, I noticed that the stylesheets for core/navigation-submenu are successfully enqueued on the frontend. Here's the same code and CSS used for reference.

   function themeslug_block_stylesheets() {
   	// Add the block name (with namespace) for each style
   	$blocks = array(
   		//				'core/navigation',
   		'core/navigation-submenu',
   	);
   
   	// Loop through each block and enqueue its styles
   	foreach ( $blocks as $block ) {
   		// Replace slash with hyphen for filename
   		$slug = str_replace( '/', '-', $block );
   
   		wp_enqueue_block_style( $block, array(
   			'handle' => "test-block-core-navigation-submenu",
   			'src'    => get_theme_file_uri( "assets/css/blocks/core-navigation-submenu.css" ),
   			'path'   => get_theme_file_path( "assets/css/blocks/core-navigation-submenu.css" ),
   		) );
   	}
   }
   
   add_action( 'init', 'themeslug_block_stylesheets' );

   .wp-block-navigation{
   	background: #808080FF;
   }
   
   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
   	background: red;
   }

   Upon inspecting the page, the styles are present in the DOM after being enqueued for core/navigation-submenu. However, the changes are not visible on the frontend, as shown below.

   

   

   To apply the changes, I used !important, as demonstrated in the code below. In the preview we can see that the styles are now applied correctly.

   .wp-block-navigation{
   	background: #808080FF;
   }
   
   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
   	background: red!important;
   }

   

   Reason for the Issue

   The issue arises due to CSS specificity and how WordPress loads styles:

   When Enqueuing for core/navigation:

   -The styles are loaded at the navigation block level.
   -They naturally cascade to submenu elements, maintaining specificity through the parent-child relationship.

   When Enqueuing for core/navigation-submenu:

   • WordPress core loads its default submenu styles with a certain specificity.
   • Custom styles must compete with these default styles, which often have equal or greater specificity.
   • The cascade from the parent navigation block is lost, making custom styles less effective.

   Behavior Breakdown

   Core Navigation Enqueuing:

   wp_enqueue_block_style( 'core/navigation', ... );

   • Styles apply at the navigation block level.
   • They cascade naturally to submenu elements.
   • Specificity is maintained through the parent-child hierarchy.

   Submenu Enqueuing:

   wp_enqueue_block_style( 'core/navigation-submenu', ... );

   • Styles are scoped specifically to the submenu component.
   • They directly compete with WordPress's default submenu styles, which often have equal or higher specificity.
   • The cascade from the parent navigation block is lost.

   In case where not to rely on !important, we can increase the selector specificity of your custom styles.

   cc: @germanfrelo
4. patil-vipul commented on Dec 27, 2024

   

   patil-vipul

   on Dec 27, 2024

   Last edited by patil-vipul

   More actions

   @germanfrelo Let me know your thoughts on the above. As I think we should continue with the default behaviour here.
5. germanfrelo commented on Jan 9, 2025

   

   germanfrelo

   on Jan 9, 2025

   Author

   More actions

   Sorry for the delay. I will test it again in a few days.

   👍React with 👍1Reacted by Vipul Patil
6. germanfrelo commented on Feb 8, 2025

   

   germanfrelo

   on Feb 8, 2025

   Author

   More actions

   @patil-vipul I confirm that it works. I don't know why it didn't work for me before.
   I'm closing this issue.

   👍React with 👍1Reacted by Vipul Patil
7. germanfrelo

   closed this as completedon Feb 8, 2025