Grow width in navigation is not working

[Pixelous]

Description

Hi,

Grow width in navigation is not working on front end.

Please see an attached video:

Header-.-Template-part-.-Barbara-Schmid-.-Editor-.-WordPress.webm

This is how it looks on front end, please see an attached screenshot:

Kind regards

[Rishit30G]

Thanks for raising this issue,

I was able to reproduce the issue, could find the grow-width working, sharing the screenshot for the same:

You can try to follow the order of components in my list view, hope that helps 🙇🏻

Thanks

[yogeshbhutkar]

Thank you, @Pixelous, for bringing up this issue! The problem occurs in your case because the social links block is being used inside a navigation block.

The width grow behavior is controlled by the wp-container-content-${id} class, which applies the flex-grow: 1 property. However, when social links are nested within a navigation block, the wp-container-content-${id} class gets assigned to the child of the navigation menu item. As a result, the flex-grow: 1 property doesn't take effect as intended.

Edit:
The social links block gets wrapped within the list item wrapper because of the following line:

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

Line 138 in be5ce8a

$needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );

It also makes sense to wrap it within the list item wrapper to keep the corresponding block markup organized. Implemented in this PR ( Issue )

[yogeshbhutkar]

I believe this qualifies as a bug for two key reasons:

1. Compatibility within core/navigation block:
   The social links block is allowed as a direct descendant of the core/navigation block. Therefore, features like width grow should work seamlessly without requiring the block to be moved out of the core/navigation block. These features should function as expected while nested within it.

2. Impact on blocks requiring a list item wrapper:
   Blocks that rely on a list item wrapper—such as those specified here:

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

   Lines 29 to 33 in be5ce8a

   	private static $needs_list_item_wrapper = array(
   	'core/site-title',
   	'core/site-logo',
   	'core/social-links',
   	);

   —or any custom block added later that needs a list item wrapper will encounter the same issue. If these blocks utilize flex-grow, the property won't work correctly due to being wrapped within the list item.

Also, the current implementation behaves differently within the editor and the frontend.

A potential fix would be to also apply the flex-grow: 1 style to the list item wrapper when self-stretch is set to fill. This should fix the bug in the Social Icons block as well as other custom blocks that might require a list item wrapper.