Every Group block translates to a <main> HTML tag

[asafm7]

Every Group block translates to a <main> HTML tag. This results in what is probably not a proper HTML document structure.

Screenshot:
​https://drive.google.com/file/d/1VJT9HOhDXA-RHmwgtdJ0MrltiXn-Rzc4/view?usp=drivesdk

I'm using the Twenty Twenty-Three theme, on a new, not customized, WordPress.

[poena]

Hi!

Maybe I misunderstood the report?, but I don't think this is a bug.

A group block can be set to use the <main> element, but new groups should be using a
<div> by default when they are inserted.
This is intentional because theme developers and site owners need to be able to use the main element for groups as part of their block themes and new page templates -to create the proper structure.
The option to change the group from a div to a main, header, section, footer etc, is in the Advanced panel in the block settings sidebar. It is placed there intentionally to reduce the risk that users adds more than one main element.

You may be interested in this issue, where I am suggesting that a warning is added to the editor if there is more than one main element: ​https://github.com/WordPress/gutenberg/issues/35354

[asafm7]

Thanks, @poena.

I'm not sure I understand.

You wrote:
"new groups should be using a <div> by default when they are inserted".

I agree. This is precisely my point. This is not currently the case though, and that's why I opened the ticket: New groups are using <main> by default, and not <div>.

Let me know if I misunderstood something.

Thanks,
Asaf

---

[poena]

I thought that might be the issue, so I tested inserting new groups, but I was not able to reproduce it. Can you provide any more details?

(If you copied and pasted the group, the attributes are copied too.)

[asafm7]

It seems to be less predictable than I thought.

For example, here, both the top-level wrapping Group element and the first nested Stack element are <main>:
​https://drive.google.com/file/d/1Bsle_ril2JFn8kYxGrH6gnNNG7NLMaFl/view?usp=drivesdk
​https://drive.google.com/file/d/1WGxhPmRy_2lNRe7gMHCBg9xtBzWgLQNk/view?usp=drivesdk

Regarding reproducing, everything is fresh, stock, and minimal. A fresh WordPress with Twenty Twenty-Three and no plugins.

(Also, should I be using a top-level Group element to warp everything on a page?)

Thanks

[poena]

Every template in Twenty Twenty-Three except for the "blank" page template already has a main element.

If you go to the template list and use "Add new" to create a new template, it copies the code from an existing theme template. The custom page template (the last option in the "Add new" template list) copies the code from the post template. These will already have a main element.

(For the second question it depends on the design and what you want to achieve.)

[asafm7]

Thanks, @poena.

So how did I end up with two nested <main>s as shown in the screenshot?

[asafm7]

Hi, @poena.

Just making sure you saw my last question.

Asaf

[poena]

I won't be able to answer that since I have no knowledge of how the block was added, that is why I asked the follow up question about how to reproduce it.

You may have copied a block with the attribute already added, or added a block pattern or template part that contained a block with the attribute.

[costdev]

Hi @asafm7, thanks for opening this ticket!

A few questions:

• What version of WordPress are you using?
• What browser are you using?
• Are you only seeing this issue on Twenty-Twenty Three, or on Twenty-Twenty Two as well?
• Can you provide step-by-step instructions for reproducing the issue (after installing WordPress)?

Thanks!

[asafm7]

Hi @costdev.

• Latest WordPress version
• Chrome
• Haven't tried Twenty Twenty-Two.
• Unfortunately not, as it seems unpredictable. Maybe you will have to take a different approach: going to the code and checking under what conditions a block is translated to a <main> HTML tag.

Thanks,
Asaf

[poena]

The HTML tag in the group block defaults to div and can be changed to a list of selected tags, main is one of them.

By copying an existing group which already uses the main tag
By duplicating an existing group which already uses the main tag
By adding a block pattern which uses a main tag
By adding a reusable block which uses a main tag
By inserting a custom block from a third party plugin, that uses the main tag for the group internally
By adding a group block and manually changing the HTML tag in the Advanced panel in the block settings sidebar
By manually editing the tagName block attribute in the block editor's code editing mode.

The code responsible for switching the tag:
​https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/edit.js

[poena]

I glanced through the block patterns that are included in WordPress core and in the theme and they do not use main.

[asafm7]

Thanks, @poena.

I don't think I've done any of those, not intentionally at least.

But I was unaware of the option to choose the HTML tag in the advanced section. It means that if the issue arises again, I can just manually change the HTML tag type.

Thanks for your reply.

Asaf

Replying to poena:

The HTML tag in the group block defaults to div and can be changed to a list of selected tags, main is one of them.

By copying an existing group which already uses the main tag
By duplicating an existing group which already uses the main tag
By adding a block pattern which uses a main tag
By adding a reusable block which uses a main tag
By inserting a custom block from a third party plugin, that uses the main tag for the group internally
By adding a group block and manually changing the HTML tag in the Advanced panel in the block settings sidebar
By manually editing the tagName block attribute in the block editor's code editing mode.

The code responsible for switching the tag:
​https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/edit.js

[poena]

If you had the Gutenberg plugin active, there is one more thing you could try but its a longshot.

If you go to the Site Editor and select the template where the duplicate main was found, in the right sidebar, in the Template panel, do you have a link that says Revisions?

If you do, you may be able to review your template changes and find when the main was added.
It wont say "added block pattern" and so on, it only shows what changed, not how it changed, but maybe that would help you retrace the steps.