Add create new overlay button to Navigation block #73919
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getdave
added
[Block] Navigation
Contributor
Author
|
As it stands this implementation is too complex. Looking to simplify |
|
Size Change: +649 B (+0.03%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Pull request overview
This PR adds the ability to create new Navigation Overlay template parts directly from the Navigation block's overlay panel in the sidebar. Users can click a "Create new?" link button that appears inline with the help text, which automatically creates a new overlay with a unique sequential name (e.g., "Overlay", "Overlay 2", "Overlay 3") and navigates to it for editing.
Key changes:
- Implements inline overlay creation using
createInterpolateElementwith a link button in the help text - Adds automatic unique name generation for new overlays using sequential numbering
- Includes comprehensive error handling with user-friendly notices
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
packages/block-library/src/navigation/edit/utils.js |
Adds utility functions getUniqueTemplatePartTitle and getCleanTemplatePartSlug copied from the fields package to support unique overlay naming |
packages/block-library/src/navigation/edit/use-create-overlay.js |
New custom hook that encapsulates the logic for creating overlay template parts with unique names |
packages/block-library/src/navigation/edit/overlay-template-part-selector.js |
Updates component to include a "Create new?" button in help text using createInterpolateElement, manages creation state, and handles errors |
packages/block-library/src/navigation/edit/test/use-create-overlay.js |
Comprehensive test suite for the new hook covering successful creation, unique naming, and error scenarios |
packages/block-library/src/navigation/edit/test/overlay-template-part-selector.js |
Updates existing tests and adds new tests for overlay creation functionality, including button states and error handling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/block-library/src/navigation/edit/overlay-template-part-selector.js
Show resolved
Hide resolved
packages/block-library/src/navigation/edit/use-create-overlay.js
Outdated
Show resolved
Hide resolved
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in 76bf934. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20265637957
|
jeryj
reviewed
Dec 15, 2025
Contributor
jeryj
left a comment
jeryj
left a comment
There was a problem hiding this comment.
Seems odd to have a dropdown saying None (default) with no other options, and then provide a link to create a new one. My quick thoughts:
- If there are no custom overlay options, remove the select field and just offer the explanation and create new overlay template button.
- Be clearer about how None does not mean NO Overlay, but No CUSTOM Overlay template. At the moment, it would be valid for someone to think they don't have ANY overlay as opposed to no Overlay templates. We'll sort this out later though.
Bugs
Create empty overlay template then go back
Steps:
- Create new?
- Save the empty template
- Click < Back from the Command Center
- Bug: You'll see the new page Select pattern modal
Creating a second template without reloading opens an empty template editor (no canvas visible)
- From the site editor, go through the Create new? flow above
- Click Create new? again
- The template editor will load without any canvas visible until you click
Screen.Recording.2025-12-15.at.12.13.58.PM.mov
Probably out of scope, but want to document it here in case you think it's connected:
Deleting overlay template doesn't sever connection
If I delete the current selected overlay template, I'll still get presented with the Edit button when I go to the navigation block overlay template selection
Comment on lines
178
to
188
| <Button | ||
| __next40pxDefaultSize | ||
| variant="link" | ||
| onClick={ handleCreateOverlay } | ||
| disabled={ isCreateButtonDisabled } | ||
| accessibleWhenDisabled | ||
| isBusy={ isCreating } | ||
| className="wp-block-navigation__overlay-create-link" | ||
| > | ||
| { __( 'Create new?' ) } | ||
| </Button> |
Contributor
There was a problem hiding this comment.
"Create new?" doesn't provide context about what will happen. I think "Create New Overlay Template" as a separate button will be clearer and provide more confidence for ATs, also it would simplify as you don't need to use all the createInterpolateElement pieces.
Especially if we're not focused on the exact UX for now but building the required tools, then having a simpler technical implementation would aid us in moving faster.
Contributor
Author
There was a problem hiding this comment.
I've revised the design to follow the pattern suggest by Design in #73957 (comment).
This addresses your concerns but may add new concerns (we'll see)!
Let's run with it and see how it feels. If it's not working we can update the visuals but I'd really like to land an implementation of "create" if possible 🙏
packages/block-library/src/navigation/edit/overlay-template-part-selector.js
Show resolved
Hide resolved
packages/block-library/src/navigation/edit/overlay-template-part-selector.js
Show resolved
Hide resolved
Contributor
Author
|
Thanks for review @jeryj. I'm looking at the bugs now.
I'll explain the rationale and perhaps we can come up with a better UX. If you have Custom Overlays we need to provide a means for a user to unset a Custom Overlay and return to just using the one we currently provide in Can you think of a UX that would consider that use case and still be clear in both scenarios (with/without existing overlays)? |
- Add 'Create new overlay' button to OverlayTemplatePartSelector component - Automatically generates unique sequential names (Overlay, Overlay 2, etc.) - Uses store state (isSavingEntityRecord) for tracking save state - Auto-selects newly created overlay and optionally navigates to it - Includes proper error handling and loading states
- Move 'Create new overlay' button into SelectControl help text using createInterpolateElement - Change button text to 'Create new?' to match prototype - Add template part utilities (parseTemplatePartId, getUniqueTemplatePartTitle, getCleanTemplatePartSlug) to utils.js - Copy utilities from fields package with reference comments - Use useCallback for handleCreateOverlay to optimize memoization - Fix hooks order by moving useMemo before early return - Add __next40pxDefaultSize prop to Button in help text
getdave
force-pushed
the
add/create-overlay-button
branch
from
79d5a64 to
76bf934
Compare
Contributor
Author
Turns out this is an existing bug and I've fixed it here #74037
Couldn't replicate this one @jeryj. I've rebased so maybe that solved it? If not can you isolate the conditions at all?
Good catch. The
|
When a selected overlay template part is deleted, the Edit button was still visible even though the template part no longer exists. This fix ensures the Edit button only appears when: - overlay attribute has a value - template parts have been resolved (hasResolved) - the selected template part exists in the resolved list This prevents the Edit button from appearing when the overlay selector correctly shows 'None (default)' after deletion.
- Change button text from 'Create new?' to 'Create New Overlay Template' for better clarity - Add aria-label='Create new overlay template' for screen reader support - Update tests to use the new accessible button name
- Move create button from help text to top-right position using absolute positioning - Change from text-based button to icon-only button with plus icon - Add tooltip using label prop with showTooltip - Remove createInterpolateElement usage and simplify help text - Add CSS positioning styles using SCSS variables for alignment
getdave
added a commit
that referenced
this pull request
Dec 16, 2025
Brings in fix from commit f4d87b4 (PR #73919). When a selected overlay template part is deleted, the Edit button was still visible even though the template part no longer exists. This fix ensures the Edit button only appears when: - overlay attribute has a value - template parts have been resolved (hasResolved) - the selected template part exists in the resolved list This prevents the Edit button from appearing when the overlay selector correctly shows 'None (default)' after deletion.
Contributor
It's not related to your PR. I can repro on trunk, so we don't need to resolve within this PR. I opened an issue for it. |
jeryj
approved these changes
Dec 16, 2025
Contributor
jeryj
left a comment
jeryj
left a comment
There was a problem hiding this comment.
Let's bring this in and iterate. I like this approach better than the previous.
| disabled={ isCreateButtonDisabled } | ||
| accessibleWhenDisabled | ||
| isBusy={ isCreating } | ||
| label={ __( 'Create new overlay template' ) } |
Contributor
There was a problem hiding this comment.
This doesn't work with the .show-icon-labels option, but that seems like a core component issue, not a blocking issue in this PR. I'll address that as a follow-up root fix.
Comment on lines
+658
to
+669
| .wp-block-navigation__overlay-selector { | ||
| position: relative; | ||
| } | ||
|
|
||
| .wp-block-navigation__overlay-create-button { | ||
| position: absolute; | ||
| // Align with SelectControl label by offsetting by button padding | ||
| // Small icon buttons have 0 padding, but we align with default button top padding (4px = $grid-unit-05) | ||
| top: -$grid-unit-05; | ||
| right: 0; | ||
| z-index: 1; | ||
| } |
Contributor
There was a problem hiding this comment.
Nit: I think this could be addressed with or components like the Styles -> Colors -> Edit Palette use of the + button.
Contributor
This is happening to me too. I created a new overlay first outside of this PR (testing your other PR). Every other Overlay I have created clicking on the icon added by this PR brings me to this: 
If I click on the grey canvas it shows me the block prompt, no need to reload, just to click Edit: I see this is a trunk issue, please ignore! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Adds the ability to create new Navigation Overlays directly from the Navigation block sidebar "Overlay" panel. Users can click "Create new?" in the SelectControl help text to automatically create a new overlay template part with a unique sequential name (e.g., "Overlay", "Overlay 2", "Overlay 3").
This PR addresses the overlay creation requirement from #73080, complementing the existing overlay selection functionality.
Why
This improves the workflow for creating navigation overlays by removing the need to navigate away from the Navigation block to create overlay template parts. It matches the pattern established in PR #73389 and provides a seamless inline creation experience, fulfilling part of the requirements outlined in #73080.
How
createInterpolateElementisSavingEntityRecord) for tracking save operations instead of local stateparseTemplatePartId,getUniqueTemplatePartTitle,getCleanTemplatePartSlug) toutils.jswith reference comments to original implementationsEditbutton. This can be handled in followups.Screenshots
Testing Instructions