Site Editor/Navigation: Links to draft pages not showing up in site preview

[alaczek]

When I add a page link to the navigation block and select the option to create a draft page, the new nav menu item shows up in the editor but is not visible in the preview. I think this might be related to #29395 and #29397.

Steps to reproduce:

1. Open the site editor and start editing the site header.
2. Add navigation block, and add a new link inside. (or add a new item to the existing navigation block).
3. Start typing a page name and select the "Create draft page" option when it's offered.
4. The new link will be added to the menu in the editor.
5. Save and preview. The new link is not visible on the front end.

Expected behaviour

I expected the link to the draft page to show up in preview.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.6.2
• Gutenberg version: 10.0.2
• Are all plugins except Gutenberg deactivated? YES
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

• Device: Desktop
• Operating system: macOS 10.15.7
• Browser: Chrome 88.0

[annezazu]

@shaunandrews flagging for you to get your thoughts :) I imagine if you create a draft, you wouldn't expect it to show up in the menu on the front end so that aspect tracks for me and doesn't feel like a bug. However, it seems like there needs to be a way to visually show in the editor that the menu item won't yet be live on the front end of the site due to the draft state.

[jasmussen]

We could potentially show a "Draft" indicator. The font size is really small, but it would serve more as an indicator and could come with a tooltip:

[annezazu]

I like that but wonder if it's enough to communicate to the user that this still won't show up on the front end (including the DRAFT part). There likely needs to be some way to indicate to the user how to resolve this 🤔

[jasmussen]

Actually, a better option is probably to lean into Shaun's design for the Placeholder menu item state that we shipped recently:

To an extent, a draft page could be thought of as a placeholder, or at least sharing some DNA:

Edit: Or this one:

[annezazu]

Oh I love this!! Very much helps indicate this isn't a "live" item.

[shaunandrews]

This one seems like it'd be a great solution.

[getdave]

@jasmussen @shaunandrews Where are we with this one? I assumed Draft Pages should

• not show on the frontend
• not show up in the Link UI search

Is there a design above that is current enough to be worked on?

[jasmussen]

I think this PR meant to address this: #31716 CC: @vcanales

[vcanales]

I think this PR meant to address this: #31716 CC: @vcanales

It is, I'll try to wrap up ASAP — I got sidetracked while I was in the process of implementing some of the final suggestions.

[kathrynwp]

It looks like this did get wrapped up – draft menu items now say (Draft) in the editor, per the discussion above – so I'll go ahead and close this out.

If anyone thinks this should be reopened, please comment with what still needs to be done and I'll be glad to reopen it. Thanks!