Fix group block width for news blog home.

[juanfra]

Description

Fixes #665

Screenshots

Screen.Recording.2024-11-05.at.10.54.40.mov

Testing Instructions

1. Go to the site editor.
2. Edit the home page.
3. Select the "News blog home" design.
4. Confirm that the main groups are full width, and that applying the section styles to them doesn't look broken.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.

Note

The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[jasmussen]

Confirmed, this improves it, thank you:

Should we apply block-spacing 0 to the wrapping Group block, to zero out the margin between colored sections? Zoom out can "punch through" the top level singular group wrapper and select the items inside. In fact this might also be a solution for #664. See screenshot above.

[juanfra]

Should we apply block-spacing 0 to the wrapping Group block, to zero out the margin between colored sections?

Sounds good, done ✅

Zoom out can "punch through" the top level singular group wrapper and select the items inside. In fact this might also be a solution for #664. See screenshot above.

It seems that in this context, it can. But it's not behaving like that in pages or posts; that was one of the reasons we ended up having multiple wrapping groups.

[jasmussen]

It seems that in this context, it can. But it's not behaving like that in pages or posts; that was one of the reasons we ended up having multiple wrapping groups.

It seems like this might thread the needle though: allow us to use includes to import the patterns, just wrap it in a single group that sets the block gap. In doing so, we won't need the redundant groups, and zoom out will still select the correct "top level" section for applying section styles. What do you think?

[juanfra]

@jasmussen Ok, so I checked and to get this behavior, the single group should have the <main> tag.

I definitely prefer to have the landing pages wrapped in a <main> than duplicating patterns. This would be the best option we have at this moment, in my opinion.

I'll open a PR with those changes for you to check out.

[jasmussen]

Thank you! And this PR seems good to go too!