Skip to content

Navigation: Add draft status indicator and publish action - #83951

Open
sarthaknagoshe2002 wants to merge 1 commit into
WordPress:trunkfrom
sarthaknagoshe2002:fix/issue-67194
Open

sarthaknagoshe2002 wants to merge 1 commit into
WordPress:trunkfrom
sarthaknagoshe2002:fix/issue-67194

Conversation

@sarthaknagoshe2002

@sarthaknagoshe2002 sarthaknagoshe2002 commented Oct 1, 2026 •

Copy link
Copy Markdown
Contributor

What?

Closes #67194

This PR adds a clear UI indicator and a one click publish action to the Navigation block when it references a wp_navigation post that is in a draft state.

Why?

Users frequently experience a situation where they build a menu in the editor, but it mysteriously disappears on the frontend because the underlying wp_navigation post is still a draft. Since there is currently no feedback in the editor, users often assume their theme is broken or recreate menus unnecessarily. This PR prevents that confusion by clearly surfacing the draft status and providing an immediate way to publish it.

How?

  • Adds a passive, inline (Draft) text label next to the menu items in the editor canvas. It only renders when the parent block or a child inner-block is selected (isSelected || hasSelectedInnerBlock), avoiding layout flicker while users edit individual links.
  • Adds a standard warning <Notice> in the sidebar explaining the draft state.
  • Adds a one click "Publish" button inside the sidebar notice.
  • Introduces a custom usePublishNavigationMenu hook.
  • Uses speak() to announce the successful publication.

Design & Scope Decisions:

  • Sidebar Action: The one click Publish action is intentionally restricted to the Inspector Controls. Adding text buttons to the Block Toolbar crowded the layout.
  • Focus Loss: When a user clicks "Publish", the notice unmounts, causing focus to drop to the <body>, but the speak() function ensures the success state is properly announced to screen readers.

Testing Instructions

  1. In your terminal, use WP-CLI to create a draft menu:
    wp post create --post_type=wp_navigation --post_status=draft --post_title="Test Draft Menu"
  2. Open a post or the Site Editor.
  3. Insert a Navigation block and select "Test Draft Menu" from the sidebar settings.
  4. Select the block (or click into a child link). Verify the italicized (Draft) label appears safely next to the menu items without breaking the flex layout.
  5. Look at the block settings in the sidebar. Verify the warning notice appears with the "Publish" button.
  6. Click "Publish".
  7. Verify the UI updates immediately and the frontend now renders the menu.

Screenshots or screencast

Canvas Inspector panel
image image

Use of AI Tools

This PR was authored with assistance from Gemini for architectural analysis of Gutenberg data hooks. All generated code was manually verified and tested.

@github-actions

github-actions Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

🎉 Props

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: sarthaknagoshe2002 <sarthaknagoshe2002@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Oct 1, 2026
@sarthaknagoshe2002
sarthaknagoshe2002 marked this pull request as ready for review October 1, 2026 11:11

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

Labels

[Package] Block library /packages/block-library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show indicator on the Navigation block when the referenced Navigation Menu will not display on front of site

1 participant