Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Query Loop Patterns: Use plain div for wrapper element #32867

Merged
merged 1 commit into from
Jun 23, 2021

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Jun 21, 2021

See https://core.trac.wordpress.org/ticket/53389#comment:14 — The Offset and Grid patterns for the Query Loop block use main as a content wrapper on the group block, but there can be at most one visible main on a page. Otherwise this is an invalid HTML page, and can be confusing for screen reader navigation.

This change removes the tagName on the Offset and Grid patterns, so it defaults to a plain div.

To test, insert different query loops into a post and make sure it works as expected. There should be no user-facing changes.

@ryelle ryelle added [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Block] Query Loop Affects the Query Loop Block labels Jun 21, 2021
@ryelle ryelle self-assigned this Jun 21, 2021
@youknowriad youknowriad added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jun 23, 2021
Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution @ryelle !

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<main class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, this mismatch with main and div has slipped through the introduction of the pattern 😄

@ntsekouras ntsekouras merged commit 84275c7 into trunk Jun 23, 2021
@ntsekouras ntsekouras deleted the update/query-pattern-remove-main branch June 23, 2021 12:52
@github-actions github-actions bot added this to the Gutenberg 11.0 milestone Jun 23, 2021
@youknowriad youknowriad removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jun 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Loop Affects the Query Loop Block [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants