Skip to content

Fix: Edit navigation links from the Extensible Site Editor Sidebar#77488

Open
yyppsk wants to merge 2 commits into
WordPress:trunkfrom
yyppsk:fix/edit-nav-links-in-popover-sidebar
Open

Fix: Edit navigation links from the Extensible Site Editor Sidebar#77488
yyppsk wants to merge 2 commits into
WordPress:trunkfrom
yyppsk:fix/edit-nav-links-in-popover-sidebar

Conversation

@yyppsk

@yyppsk yyppsk commented Apr 20, 2026

Copy link
Copy Markdown
Contributor

What?

Closes #77071

Implements the editing-only portion of the extensible Site Editor sidebar navigation work by allowing existing navigation items to be edited directly from list view.

This PR:

  • Adds an Edit link action to the sidebar item menu for core/navigation-link and core/navigation-submenu
  • Reuses the existing navigation LinkUI so existing items can be edited in a popover without switching to the canvas
  • Anchors the popover to the active sidebar row and applies sidebar-appropriate spacing/positioning
  • Preserves the current cleanup behavior for newly inserted empty placeholder links
  • Avoids removing existing navigation items when their edit popover is closed

See also: #77069, #75921, #76428, #77072

Why?

Today, users can reorder and remove items from the extensible Site Editor sidebar, but they cannot edit an existing navigation link from that surface. To update a link label or destination, they currently need to move back into the canvas.

That gap is tracked in #77071 and is part of the broader work in #77069. A related earlier PR, #76428, explored the same problem, but review feedback there asked for the editing behavior to stay separate from broader suggestionsQuery / search changes, which are better handled independently in #77072.

This PR keeps the scope narrow and focused on the in-place editing experience.

How?

The implementation threads sidebar edit state through the navigation menu list view and reuses the existing NavigationLinkUI for existing blocks, not just newly inserted ones.

More specifically, it:

  • Stores the currently edited block in the sidebar navigation screen
  • Adds an Edit link menu item in the sidebar row actions for navigation links and submenus
  • Updates NavigationLinkUI so it can operate on either:
    • a newly inserted navigation item, or
    • an existing navigation item selected from the sidebar menu
  • Keeps the existing cleanup behavior for auto-inserted empty links
  • Prevents accidental removal of existing links when the popover closes
  • Anchors the existing-item edit popover to the active list-view row and applies desktop sidebar spacing so the popover opens in the expected position

The PR intentionally remains focused on editing behavior and does not broaden link suggestion/search behavior beyond this scope.

Testing Instructions

  1. Start Gutenberg locally.
  2. Run npm run wp-env status.
  3. If the environment is not running, run npm run wp-env start.
  4. Open the Site Editor.
  5. Open the Navigation screen and choose a menu.
  6. Open the three-dot menu for an existing Navigation Link item.
  7. Confirm an Edit link option appears.
  8. Click Edit link.
  9. Confirm the link popover opens from the sidebar list view without switching to the canvas.
  10. Confirm the popover is positioned with normal spacing from the sidebar, rather than being flush against the left edge of the screen.
  11. Change the label and/or destination.
  12. Confirm the item updates correctly.
  13. Reopen the three-dot menu for an existing Navigation Submenu item.
  14. Click Edit link.
  15. Confirm the submenu link popover also opens correctly from list view.
  16. Close the popover for an existing item without making changes.
  17. Confirm the existing item is not removed.
  18. Add a new blank navigation link from the sidebar flow.
  19. Close its popover without entering a URL.
  20. Confirm the empty inserted block is still cleaned up and removed.

Testing Instructions for Keyboard

  1. Open the Site Editor and navigate to the Navigation screen using the keyboard only.
  2. Move focus to an existing navigation item in the sidebar list view.
  3. Tab to the item actions button and press Enter or Space.
  4. Use the arrow keys to move to Edit link.
  5. Press Enter.
  6. Confirm focus moves into the link editing popover.
  7. Use the keyboard to update the link label and/or destination.
  8. Confirm the item updates without requiring canvas interaction.
  9. Reopen the popover and press Esc.
  10. Confirm the popover closes and focus returns to the sidebar flow in a sensible place.
  11. Repeat for a Navigation Submenu item.
  12. Add a new blank navigation link from the sidebar and close it with the keyboard.
  13. Confirm the empty placeholder link is removed as expected.

Screenshots or screencast

  • Before: existing navigation items in the sidebar have no in-place edit action
Screenshot 2026-04-20 at 3 19 22 PM
  • After: Edit link opens an in-place popover from list view with correct spacing and no canvas switch
Screen.Recording.2026-04-20.at.3.08.20.PM.mov
Screen.Recording.2026-04-20.at.3.09.09.PM.mov
Before After
Existing navigation items cannot be edited directly from the extensible sidebar list view. Existing navigation items can be edited from the extensible sidebar list view via an anchored popover.
Screenshot 2026-04-20 at 3 19 05 PM Screenshot 2026-04-20 at 3 21 07 PM

Use of AI Tools

This pull request involved an AI-assisted review.

  • Codex and Claude to verify the patch & any possible improvements.

All generated output was manually reviewed, validated, and adjusted before submission.

@github-actions github-actions Bot added [Package] Block library /packages/block-library [Package] Edit Site /packages/edit-site First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository labels Apr 20, 2026
@github-actions

Copy link
Copy Markdown

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @yyppsk! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@yyppsk yyppsk marked this pull request as ready for review April 20, 2026 17:28
@github-actions

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library, First-time Contributor, [Package] Edit Site.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions

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: yyppsk <pranjalpratapsingh@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>

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

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

Labels

First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block library /packages/block-library [Package] Edit Site /packages/edit-site

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Edit navigation links in a popover from the Extensible Site Editor Sidebar

1 participant