Navigation: Try adding Links block

[noisysocks]

Currently, if you add a Search block to a Navigation block, this is the resultant markup displayed on the frontend:

<nav class="wp-block-navigation">
   <ul class="wp-block-navigation__container">
      <li class="wp-block-navigation-link"><a class="wp-block-navigation-link__content" href="/"><span class="wp-block-navigation-link__label">Home</span></a></li>
      <li class="wp-block-navigation-link"><a class="wp-block-navigation-link__content" href="/about"><span class="wp-block-navigation-link__label">About</span></a></li>
      <form role="search" method="get" action="http://localhost:8888/" class="wp-block-search"><label for="wp-block-search__input-2" class="wp-block-search__label">Search</label><input type="search" id="wp-block-search__input-2" class="wp-block-search__input" name="s" value="" placeholder="" required><button type="submit" class="wp-block-search__button">Search</button></form>
   </ul>
</nav>

Note that form appears within the ul which is invalid HTML.

The accessibility advice is that only links should appear within a navigation's ul. Other blocks should render within the nav.

To do implement this, let's explore adding a intermediary Links block which:

• Renders a ul around its inner blocks.
• Allows only Link as a child.
• Allows only Navigation as a parent.

When adding a Navigation, a Links block should already be added so as to minimise the number of clicks needed for a user to add a Link to a Navigation.

There is some previous exploration of this in the try/split-navigation-links-out-of-navigation branch.

See previous discussion in #24364 and #23915 for more context.

[noisysocks]

@talldan: I think this is where we landed. Does it sound right to you?

@shaunandrews: Any thoughts on minimising the user impact here?

[shaunandrews]

Any thoughts on minimising the user impact here?

Only that I wouldn't expect a user to have to understand any of these details; I'm not sure any of this should be exposed in the UI.

[noisysocks]

I think that we're forced to implement a container Links block because:

• We need to have only links appear in the <ul>.
• If we have the parent block render this additional markup, there may be issues with parsing, validation, deprecations, etc.

I agree that a container Links block is not an ideal user experience 😞

[draganescu]

I will move this to Needs Dev as the direction from Shaun is clear to expose in the UI as little as possible from this support "container" block.