Audit all the blocks output when the block is 'empty'

[afercia]

Description

Noticed while working on #59370 where investigating the names of the blocks used for the List VIew it turned out there's some inconsistency about what an 'empty' block is, and how to deal with it.

This issue aims to discuss what should be rendered on the front end when a block is 'empty'.
Cc @getdave @Mamaduka

Historically, WordPress always aimed to output high quality, semantic, and SEO friendly content. I'd like to add it also aims to output accessible content.

Rendering some 'empty markup' on the front end may not be a big deal, depending on the actual output. But, for some blocks, rendering empty HTML tags that are very relevant for the content quality is less than ideal. Some empty HTML tags do impact SEO and accessibility and must be avoided.

At the very least, the editor should never, ever, render the following empty markup:

• Empty headings.
• Empty links.
• Empty buttons (the Button block actually renders an <a> tag).
• Possibly more cases.

All the cases above are extremely impacting for SEO and accessibility and far from ideal.

The block output on the front end is generated by each block render callback but, first, it is determined by what each block save function actually does.

Going through the blocks, it turns out there's large inconsistency on how blocks treat 'empty content'. Note: in this context, I'd like to use the term 'empty' not much as a programming language concept or philosophical concept. Rather, I'd suggest to use the concept of 'empty' as in what makes much sense to provide high quality content. For example, I'm nnot sure whether it's important to distinguish a 'truly' empty string from a string that only contains spaces when the actual result in terms of output is the same e.g. an empty heading.

Here's a few examples of what a few blocks do. Note: more complex blocks that use InnerBlocks should be audited as well.

To better understand what is below, it is worth reminding that some blocks use the RichText component. The Richtext isEmpty function doesn't trim the content so that a block with only spaces is not considered 'empty'.

https://github.com/WordPress/gutenberg/blob/dbfed70b2301f1f8b7296545354f3d62ada4d47b/packages/rich-text/src/is-empty.js

It is also worth noting that some blocks do check for Richtext isEmpty but others don't, not sure I understand why.

Heading

There is no check for RichText.isEmpty: when it's completely empty, it still renders an empty heading:
<h2 class="wp-block-heading"></h2>
when it only contains spaces, it renders an empty heading:
<h2 class="wp-block-heading"> </h2>

Navigation-link or submenu

When it only contains spaces, it renders an empty link:
<a class="wp-block-navigation-item__content" href="http://wordpresslala.org"><span class="wp-block-navigation-item__label"> </span></a>

Button

It does check for RichText.isEmpty so that when it's completely empty it will not render a link, but it will still render the wp-block-buttons wrapper. See

gutenberg/packages/block-library/src/button/save.js

Lines 34 to 36 in f3c0586

	if ( RichText.isEmpty( text ) ) {
	return null;
	}

When it only contains spaces, it will render an empty link e.g.:
<a class="wp-block-button__link wp-element-button" href="https://wordpress.org"> </a>

Code block

When it's completely empty it still renders useless, empty markup:
<pre class="wp-block-code"><code></code></pre>

Audio

It does check for the src prop so that when there's no audio file it doesn't render anything

gutenberg/packages/block-library/src/audio/save.js

Lines 13 to 15 in 19a46dd

	return (
	src && (
	<figure { ...useBlockProps.save() }>

Embed

It does check for the url prop so that when there's no audio file it doesn't render anything

gutenberg/packages/block-library/src/embed/save.js

Lines 18 to 20 in f3c0586

	if ( ! url ) {
	return null;
	}

List

An empty list item renders an empty <li> tag:
<li></li>

Quote

When empty it still renders the entire markup:

<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p></p>
</blockquote>

Pullquote

When empty it still renders the entire markup:
<figure class="wp-block-pullquote"><blockquote><p></p></blockquote></figure>

Social link

When there is no url, it will not render anything

Verse

When empty, it will render empty markup:
<pre class="wp-block-verse"></pre>

Video

it does check for the url prop so that it will not render video markup but it will still render an empty figure element and a caption, if set.
<figure class="wp-block-video"></figure>

Recap

Overall, all the above looks largely inconsistent. It seems there's no established behavior about what 'empty' blocks should output and I'm not even sure there has been a well thought consideration of what the concept of 'empty' means when it comes to content.

Step-by-step reproduction instructions

• Create a enw post.
• Add all the blocks mentioned in this issue description, either by leaging them completely empty or by adding only spaces as their content.
• Publish the post.
• Go on the front end.
• Inspect the source and observe the actual markup output.

Screenshots, screen recording, code snippet

No response

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]

See also #55543