Skip to content

Prevent duplicate main HTML elements when using the HTML Element option #69890

Description

@carolinan

What problem does this address?

Originally suggested by @karmatosed in #68661
Please continue the discussion in this issue.

Using duplicate <main> elements in a HTML document is not valid HTML.
It also has a negative impact on accessibility.

Right now, there is no warning for duplicate main elements, and no limitation to how many main elements a user can add.
For example, the user can add multiple group blocks in the same post or page, and change them all to main by using the HTML Element option in the Advanced panel of the block settings.

What is your proposed solution?

Create a new component based on the SelectControl that both provides the option to change the HTML element, and validates that there is only one main element in the content and block template.

If a document (content and template combined) already has a main element, the option to change the block into a main should be disabled.

If a document already has more than one main element, selecting one of the blocks with this attribute should display a warning encouraging the user to change the HTML tag.

Note:
This change can only manage what a user can and can not do using the proposed control.
It is not capable of preventing what a user or developer may add when editing a template file directly, when using the code editor mode, or when using the custom HTML block, etc.

There are limitations for classic themes and hybrid themes with PHP template, and the validation is less useful in these themes, since there is no way to know wether the template has a main or not.
The check can be implemented for block themes though, as seen in the linked PR.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions