Navigation Block expands to fill all available space, breaks justification.

[pbking]

Description

Seemingly due to this change the wp-block-navigation__responsive-container class now has a width:100% which causes the container to fill all available space. This breaks the justification of the menu layout, particularly right-aligned content such as Blockbase's header (as noted in this related issue).

Step-by-step reproduction instructions

Activate Blockbase theme. Configure menus in customizer. (Bonus points for applying social menus).

Note that the navigation block does not justify content to the right despite that block's right justification option:
<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->

Screenshots, screen recording, code snippet

Environment info

/trunk of Gutenberg

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jasmussen]

Thanks for the ticket. Can you try this against latest version of trunk? Just 5 hours ago I merged a change which I think might have fixed this: #35722

[pbking]

I pulled recent changes to /trunk and indeed the problem persists.

It is only an issue when the block is in a container with display:flex as illustrated here:

<!-- wp:group {"align":"wide","layout":{"type":"flex"}} -->
<div class="wp-block-group alignwide"><!-- wp:navigation -->
<!-- wp:navigation-link {"label":"A test","url":"http://inter.net","isTopLevelLink":true} /-->
<!-- /wp:navigation --></div>
<!-- /wp:group -->

The problem is coupled with an attribute that Blockbase applies to the header to achieve the design target:

.wp-site-blocks .site-header .wp-block-navigation {
    flex-grow: 1;
}

So the two things don't play nice together.

It may be that the same design target can be achieved using a between the menu and the rest of the content and giving that a flex-grow value via CSS instead. But it seems more appropriate to remove the forced 100% width to me.

[jasmussen]

I think I found steps to reproduce:

• Insert a row block
• Insert a navigation block inside the row block
• Justify the navigation block right

The navigation block will not be right aligned. In my testing using both Empty Theme and Blockbase, this was the case both in the editor and the frontend:

Also shown in the GIF, though, is that you can justify right on the Row block itself. Does that address the use case?

Let me know if I misunderstood the steps to reproduce. It would be helpful if I could have some full demo content showing the problem.

[pbking]

No, that doesn't address our use case in the Blockbase header. The content of the row can't be aligned right; some content is on the left (Site Title, logo, tagline) and some on the right (navigation). The elements in that header are dynamic though; there's no guarantee that any of them will be there so the layout mechanism has to take that into account.

[jasmussen]

Understood, and if you use space-between, the site logo and site title will be spaced out as well:

You could add an extra row wrapper around just the site logo and site title, combined with space-between on the topmost row:

Adding flex-grow: 1; back to the navigation block where it was would accomplish the first example shown, but it was intentionally scoped to only apply when set to space-between. It was interfering with patterns that added blocks other than menu items. For example this pattern, a few items and social links:

With flex-grow: 1; applied to the navigation portion, it would push the social icons to the right:

Even keeping flex-grow: 1; in the space-between state likely needs to be revisited, as even this state should account for other blocks, and arguably space out the social links as well.

---

TwentyTwentyTwo comes with a bunch of patterns that appear to accomplish a similar design. Would the approach taken there work for you?

Many of these appear to rely on the extra row block grouping site logo/title together on the left:

[pbking]

Closing this as the design can be achieved as noted above. Thank you!

[jasmussen]

Thank you! And thank you for the ticket, it's helpful as we explore getting the flex rules just right 👌