Block Bindings: empty state of custom field can cause SEO problem

[simonemanfre]

What problem does this address?

When a field in a bound block is empty, the empty markup is printed in the page.
It's not a very big problem with paragraph markup, but it can cause a SEO problem with the heading tag.

What is your proposed solution?

Remove the markup when a custom field is empty on a bound block.

[talldan]

Thanks for reporting this, it's an interesting one!

There was a similar comment about the button block in the forums - https://wordpress.org/support/topic/synced-patterns-override-dont-display-field-when-not-filled-in/. It turns out the button block already has this feature—it doesn't output any markup when there's no content (the behavior is not part of the block bindings feature but built into the block itself). There's some inconsistency across core blocks in what they output when there's no content, I think the button block is in the minority.

It might be that some blocks should work like the button block innately, but I don't know if it should be part of the block bindings feature, as that comes with some issues:

• Blocks can have several content attributes, and block bindings doesn't/shouldn't know which one represents the de facto content without coding it explicity for each block type.
• For some blocks, it might be important they still output something so that a visual layout is retained. I think it really depends on the specific use case for the content. It's difficult for block bindings to have a general rule around when to output no content vs outputting empty block markup given it shouldn't know what the content is.
• For pattern overrides, users can already define a fallback for empty content in the pattern source, and this isn't handled by the core block bindings implementation but by the pattern overrides code. It's difficult to interpret what every type of binding should output for empty content blocks. This is the relevant code:

  gutenberg/packages/editor/src/bindings/pattern-overrides.js

  Lines 22 to 27 in 55913fe

  	// If it has not been overriden, return the original value.
  	// Check undefined because empty string is a valid value.
  	if ( overridableValue === undefined ) {
  	overridesValues[ attributeName ] =
  	currentBlockAttributes[ attributeName ];
  	continue;

Perhaps something like block states is another future solution for this - #57719.

[SantosGuillamot]

Thanks for opening the issue! I agree with @talldan, and I am not sure if it is an issue specific to block bindings. If I am not mistaken, if you create an empty heading (without bindings), it is printed in the frontend. That's why I think it is an issue with the block itself, and not exactly with bindings. For the heading, we should probably add some logic to the PHP rendering here to handle that use case.

[simonemanfre]

Yes I think you are right, this issue should be about Gutenberg and not just block bindings.
For example an empty “image” or “featured image” block shows nothing in the HTML, while paragraphs and heading tags are shown empty.