Classic menus are not selectable in existing Navigation block requiring user to create a new Navigation block

[hellofromtonya]

Description

User story: As a user, I expect to be able to select a classic menu within an existing navigation block.

The "Classic Menus" section does not appear in an existing Navigation's block "Select Menu". Rather, it only appears in adding a new nav block.

Why is this a problem?

How will a user know that they must first delete an existing nav block and then insert a new one in order to select one of their existing (classic) menu?

Think of the user who is first upgrading to WordPress 5.9, has existing menus, and then activates a block theme such as Twenty Twenty-Two (TT2). With say TT2, the header menu by default upon activation is a page listing. So the user does these steps:

• Step 1: Clicks on "Customize" button on the TT2 theme or Appearance > Editor (beta) menu item. Site Editor opens.
• Step 2: Clicks on the header navigation block either directly or via list view.
• Step 3: Clicks on "Select Menu". Notice the existing classic menu(s) are not there.

👉 How does the user know what to do next?

The next steps are:

• Step 4: Delete the existing header nav block (OR click on "Create new menu" which inserts a new nav block).
• Step 5: Insert a new nav block into the header.
• Step 6: Click on "Select Menu". Now the classic menus are there and selectable.

What happens if they select the wrong one?
Repeat steps 4-6.

The expected behavior is: Steps 1-3 and then classic menus are shown and selectable.

Step-by-step reproduction instructions

1. Activate a non-block theme. Let's use Twenty Twenty-One (TT1).
2. Add a "Main Menu" by going to Appearance > Menus and creating a new menu called "Main Menu" and set it as primary menu.
3. Activate the Twenty Twenty-Two (TT2) or any other block theme.
4. Open the Site Editor by clicking on "Customize" on the theme or clicking Appearance > Editor (beta).
5. Click on the navigation block in the header or open list view and then select the block.
6. Click on "Select Menu".

Screenshots, screen recording, code snippet

Environment info

• WordPress: 5.9 RC3
• OS: macOS Big Sur
• Browsers: Chrome, Edge, Firefox, Safari
• Plugins: none
• Theme: TT1 and then TT2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[hellofromtonya]

This issue was found after @m asked how to select existing (classic) menu in TT2's header after upgrading.

This issue is problematic for 5.9 in that users will be confused as to what to do next in order to select their existing menus. The UI does not guide them. How will they know?

Possible solution: add the Classic Menus section on existing Navigation blocks.

Severity: major blocker for existing users upon upgrading to 5.9 and using a block theme.

As this is severe, if fixable in the next 14-19 hours, a 5.9 RC4 is possible.

[kjellr]

Is there something that the theme can do to make this more automatic? For example, can Twenty Twenty-Two automatically pull in your classic "Primary" menu for the main nav if present? And fall back to the page list if not? Would that be a good idea?

[hellofromtonya]

can Twenty Twenty-Two automatically pull in your classic "Primary" menu for the main nav if present? And fall back to the page list if not?

@kjellr Yes, that would be a better experience IMO for users when first upgrading to TT2. It doesn't resolve the issue fixed in this ticket, but it does save users a step in their upgrade process.

[kjellr]

Yeah, I just don't think it's possible, unless there's markup I'm missing. 😅 cc @talldan for a gut check on that — I'll open up a separate issue if you don't know of anything.

[kjellr]

can Twenty Twenty-Two automatically pull in your classic "Primary" menu for the main nav if present? And fall back to the page list if not?

A quick followup on this: It looks like the "__unstableLocation" attribute was created for this purpose, so @jffng and I tried it out in WordPress/twentytwentytwo#348. It generally worked, but it didn't match up with what the Site Editor showed. 😕

[talldan]

@kjellr There's no current way to do this, unfortunately. The plan at the moment is to switch the Navigation block to using slugs for menus. I would hope it will then be possible for a theme to define the block like this:

<!-- wp:navigation { "ref": "header-navigation" } -->
    <!-- wp:page-list /-->
<!-- /wp:navigation -->

Then, if a 'header-navigation' menu already exists it'll be used instead of the predefined theme inner blocks. If not, the block will fallback to the inner blocks in the template.

I think we need a new issue for this, the previous discussion was in a closed issue - #36524. There is also a PR - #36522.

I'll make one.