Gutenberg: Allow blocks to render semantic tags for full-site editing

[kjellr]

As we've been working through themes in the theme-experiments repository, a few of us have quickly run into the fact that Gutenberg currently can't render semantic tags like <header>, <section>, <aside>, and <footer>.

Functionally, these would probably just be Group blocks but with different markup: they're just a place to put other blocks. So perhaps this would be some sort of option for that block, only available in full-site editing? Or maybe there's some way we can automate this to avoid confusion for users?

[mtias]

I have a few thoughts on this:

• We should allow an htmlTag attribute on the group block.
• Doesn't need to be exposed in the UI yet, but could be added to the Advanced tab in the inspector.

It'd be interesting to then register variations of the group block for <header>, <section>, <main>, <aside>, and <footer>. (cc @gziolo)

[chrisvanpatten]

I also wonder if @ellatrix's PR #19910 could contribute to solving this?

[gziolo]

I opened PR with proof of concept for Section variation for the Group block. Feel free to play and adjust https://github.com/WordPress/gutenberg/pull/20218 if necessary 😄

[carolinan]

It also raises question marks about how to prevent users from altering the tags and creating a mess for accessibility (and SEO).

[mtias]

An initial version shouldn't expose this in the UI, I recon. Whenever it becomes a user-facing feature of the group block, it should come with the corresponding analysis of content structure to indicate problems or help educate.