The editor should not allow to save empty navigation links

[afercia]

Description

Discovered while working on #59370

Empty navigation links are less than ideal for accessibility and SEO.
The editor actually allows to save and render on the front end an empty link by leaving the navigation link label empty or by entering spaces. Worth noting the classic menu items work differently, for good reasons:

• A nenu item with empty label is not saved.
• A menu item with label made only of spaces is saved but in the front end a link text fallback is printed out: 'Untitled'.

Step-by-step reproduction instructions

• Go to the site editor and edit a navigation menu.
• Select a navigation link, empty its label and save.
• Observe savign is successful: no warnings or any ohter feedback about the empty link.
• Go to the front end and observe the link text is empty.
• In the editor, open the navigation panel and observe the list view displays only an icon for the empty link. This should be mitigated by Fix labeling of the navigation links in the list view. #59370

Screenshots, screen recording, code snippet

In the editor: an empty link doesn't have any fallback label in the list view:

On the front end, the link is empty and bareli visible. Only when focused it shows the focus style:

With classic menus, a link that only contains spaces is saved even though there's no label shown in the admin:

On the fron tend, classic menus do use a fallback text 'Untitled' for empty links:

Environment info

No response

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

[afercia]

I noticed this is similar to empty headings as well.

To recap:

LInks

It is possible to save a navigation link with a URL but with the label that only contains spaces. In this case, link is rendered on the fron tend with:

• the label that contains the spaces
• the hres attribute ie empty even though the value is saved in the editor

Rendered markup example:

<a class="wp-block-navigation-item__content" href="">
    <span class="wp-block-navigation-item__label">  </span>
</a>

This should be avoided entirely. No markup should be rendered for an empty link.

Headings

It is possible to save a Heading that is entirely empty (even without spaces). In this case, the rendered HTML is:

<h2 class="wp-block-heading"></h2>

This should be avoided entirely. No markup should be rendered for an empty heading.

I think the two problems are related as they both come from way a block content / label is retrieved.

• The inconsistency with sapces should be addressed. Ideally, all content strings should be trimmed and checked if empty after that.
• For all blocks: no HTML should be ever rendered when the block content is empty.

[krokodok]

For all blocks: no HTML should be ever rendered when the block content is empty.

What about blocks that don't have content, like the spacer?

Or what if I add an empty group with background color and height and / or padding? I think it would be confusing to the users, if this empty group would not show up visually.

[afercia]

@krokodok thanks for pointing out I was not very clear. I will rephrase:

For all blocks that are supposed to render some content: no HTML should be ever rendered when the block content is empty.

Besides that, I would argue the Spacer block is using HTML for presentational purposes, which brings us back to the era of the HTML soup where the HTML was full of presentational elements.