Skip to content

Navigation Block: Fix justification (space between) layout when overlay menu is off - #70645

Closed
BugReportOnWeb wants to merge 1 commit into
WordPress:trunkfrom
BugReportOnWeb:fix/navigation-block-layout
Closed

BugReportOnWeb wants to merge 1 commit into
WordPress:trunkfrom
BugReportOnWeb:fix/navigation-block-layout

Conversation

@BugReportOnWeb

Copy link
Copy Markdown
Contributor

What?

Closes #57517

This PR ensures that the navigation container spans the full width in the block editor when the overlay menu is disabled and 'Space between items' is selected for justification layout.

Why?

When the overlay menu is turned off in the Navigation block, layout justification options for space between have no visible effect in the editor because the container doesn't expand to the full width of the navigation block. This creates a mismatch between the editor and frontend

How?

A width: 100% style was added to .wp-block-navigation__container in editor.scss to ensure it stretches fully in non-overlay mode, matching frontend behavior.

Testing Instructions

  1. Add a Navigation block in the editor.
  2. Turn off the Overlay Menu setting in block settings.
  3. Under Layout settings, set Justify items to Space between.
  4. Add at least 3 navigation items.
  5. Confirm that the navigation items are now correctly spaced apart across the full width (as they are on the frontend).

Screenshots or screencast

Before After
Screenshot 2025-07-08 at 9 38 44 PM Screenshot 2025-07-08 at 9 39 23 PM

@BugReportOnWeb
BugReportOnWeb marked this pull request as ready for review July 8, 2025 16:56
@github-actions

github-actions Bot commented Jul 8, 2025

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: BugReportOnWeb <devasheeshkaul@git.wordpress.org>
Co-authored-by: jenniferfarhat <jennifarhat@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: iamtakashi <iamtakashi@git.wordpress.org>
Co-authored-by: NidhiDhandhukiya74 <nidhidhandhukiya@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Navigation Affects the Navigation Block labels Jul 9, 2025
@ntsekouras

Copy link
Copy Markdown
Contributor

Thanks for your work @BugReportOnWeb! I'm closing though since this was fixed in #78447, which restores the flex-grow on the container in the editor.

@ntsekouras ntsekouras closed this Sep 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Navigation block layout not applying when justify-content: space-between is choosen and overlay is "off"

3 participants