Skip to content

Navigation: Respect overlayMenu="always" in site view and isolated template part editing#76454

Closed
Copilot wants to merge 2 commits intotrunkfrom
copilot/fix-burger-icon-inconsistency
Closed

Navigation: Respect overlayMenu="always" in site view and isolated template part editing#76454
Copilot wants to merge 2 commits intotrunkfrom
copilot/fix-burger-icon-inconsistency

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 12, 2026

When the Navigation block's overlay is set to Always, the burger icon was only rendered correctly in the regular editor canvas — site view (preview panel) and isolated template part editing both showed the expanded navigation links instead.

Root cause

editorDisabledResponsive is true in preview mode and isolated editing mode, and it was unconditionally suppressing isResponsive:

// Before — ignores the user's explicit 'always' choice
const isResponsive = 'never' !== overlayMenu && ! editorDisabledResponsive;

This was intentional for overlayMenu === 'mobile' (viewport-based collapse shouldn't apply inside the editor canvas), but incorrectly extended to 'always', overriding an explicit user setting.

Change

// After — 'always' is respected regardless of editor context
const isResponsive =
    'never' !== overlayMenu &&
    ( 'always' === overlayMenu || ! editorDisabledResponsive );
  • overlayMenu === 'never' — no burger, unchanged
  • overlayMenu === 'mobile' in preview/isolated — no burger, unchanged (viewport breakpoints don't apply in the editor)
  • overlayMenu === 'always' — burger shown everywhere, including site view and isolated template part editing

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • translate.wordpress.org
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node i18n-cache/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>Navigation overlay: burger icon inconsistent between site view, edit view, isolated edit view</issue_title>
<issue_description>GIF recording, description after:

Image

  • Notice how in site view (nav on the left, preview on the right), the top right menu shows up as regular navigation.
  • Inside the editor, the nav shows up as a burger menu.
  • In isolated template part editing for the header, it shows up as a navigation menu again.
  • The menu is set to always show the menu.

</issue_description>

Comments on the Issue (you are @copilot in this section)

@jasmussen @getdave @talldan @jeryj in case any of you have instincts what might be at play here. @getdave @jasmussen Thanks for sharing. I do find it quite hard to follow as a GIF. I can't scrub through or pause. You move quite quickly here. Any chance you could re-share as a true video?

It would also be really helpful to explain the problem a little more in prose if possible 🙏 </comment_new>
<comment_new>@jasmussen
I was unclear, sorry, and it's easier to show in static images. Consider that I have set my menu to be always collapsed. This is my site view, which should show a burger, but does not:

Image

This is edit view, which should and does show a burger:

Image

This is my header template part in isolated editing view, which should show a burger, but does not:

Image

The step to try and reproduce is to edit your header template part, set your navigation to always be collapse:

Image

Then check all the various views: it should be a burger in all. </comment_new>
<comment_new>@jasmussen
Noting a curious datapoint: this issue is not present in 7.0 beta 4 without Gutenberg trunk active. As soon as I activate the trunk plugin, the issue appears.</comment_new>


💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

…editing modes

When overlayMenu is set to 'always', the burger icon should always
be shown including in site view (preview mode) and isolated template
part editing. Previously, editorDisabledResponsive suppressed the
responsive wrapper for all overlay modes in preview/isolated contexts,
but this should only apply to 'mobile' (viewport-based) mode, not
'always' (explicit user choice).

Co-authored-by: scruffian <275961+scruffian@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix burger icon inconsistency in navigation overlay Navigation: Respect overlayMenu="always" in site view and isolated template part editing Mar 12, 2026
// This flag is intentionally ignored when overlayMenu is 'always', since that
// is an explicit user choice to always show the hamburger menu.
editorDisabledResponsive:
settings.isPreviewMode || !! settings?.[ isIsolatedEditorKey ],
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is here.

  1. settings.isPreviewMode isn't the right check
  2. !! settings?.[ isIsolatedEditorKey ] returns true for any isolated editor, not just the navigation isolated editor.

@scruffian scruffian closed this Mar 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Navigation overlay: burger icon inconsistent between site view, edit view, isolated edit view

3 participants