Skip to content

Three options for navigation block overlay toggle - #79146

Open
prasadkarmalkar wants to merge 2 commits into
WordPress:trunkfrom
prasadkarmalkar:feat/navigation-overlay-open-button-display-mode
Open

Three options for navigation block overlay toggle#79146
prasadkarmalkar wants to merge 2 commits into
WordPress:trunkfrom
prasadkarmalkar:feat/navigation-overlay-open-button-display-mode

Conversation

@prasadkarmalkar

@prasadkarmalkar prasadkarmalkar commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

What?

Closes #79082

Why?

The previous model was a Boolean show-icon toggle that only supported icons or text. This change provides following options

  • Icon
  • Text
  • Both

How?

  • Created a seperate attribute overlayOpenButtonDisplay with enum values "icon", "text" and "both".
  • Updated overlay preview controls to use a Display Mode selector.
  • Kept legacy compatibility by deriving display mode from hasIcon when the new attribute is not set.
  • Updated responsive wrapper logic to render open/close button content from derived showIcon/showText flags.
  • Updated PHP renderer to mirror the same display-mode fallback and rendering logic used in JS.
  • Added alignment styling so icon and text are vertically aligned and spaced consistently.
  • OverlayMenuPreview status:
    The component in overlay-menu-preview.js is currently not rendered in the active UI flow and appears to be referenced only as the component identity passed to useInstanceId in index.js.
    I still updated it to match the current overlay button display-mode implementation so the logic remains consistent.

Testing Instructions

  1. Open the editor and insert a Navigation block.
  2. Enable overlay menu behavior (for example Mobile or Always).
  3. Open Overlay settings and find the open button display controls.
  4. Set Display Mode to Both.
  5. Verify that the
    • Open button shows icon + Menu text.
    • Close button shows icon + Close text.
    • Icon and text are vertically aligned.

Screenshots or screencast

Screen.Recording.2026-06-12.at.2.36.12.PM.mov

Use of AI Tools

Yes: Claude Code
Used for: Implementation support, and all the changes are manually verified.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jun 12, 2026
@prasadkarmalkar
prasadkarmalkar marked this pull request as ready for review June 12, 2026 10:08
@github-actions

github-actions Bot commented Jun 12, 2026

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @YourMark, @armandovias.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: YourMark, armandovias.

Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: Bovelett <annebovelett@git.wordpress.org>
Co-authored-by: hagege <hage@git.wordpress.org>
Co-authored-by: Drivingralle <drivingralle@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] Enhancement A suggestion for improvement. [Block] Navigation Affects the Navigation Block labels Jun 14, 2026
@t-hamano t-hamano changed the title Feature: Three options for navigation block overlay toggle Three options for navigation block overlay toggle Jun 14, 2026
@369work 369work mentioned this pull request Sep 9, 2026
Open
@sarthaknagoshe2002 sarthaknagoshe2002 mentioned this pull request Oct 16, 2026
Open

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner
@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Block] Navigation Affects the Navigation Block [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Three options for navigation block overlay toggle

2 participants

@prasadkarmalkar @t-hamano