Twenty Thirteen: Add styles to support the group block

[kjellr]

Gutenberg has recently merged in a new "Group" block:

​https://github.com/WordPress/gutenberg/pull/13964
(Renamed "Group" here: ​https://github.com/WordPress/gutenberg/pull/14920)

This block acts as a container for other blocks. The Group block supports standard, wide and full alignments for both itself and its child blocks. The theme requires a patch for both the front end and the editor styles to ensure these alignments appear as indented.

The Group block is currently assigned to the Gutenberg 5.5 milestone. A patch should be merged into Twenty Nineteen alongside that release, to ensure that the Section block works as intended upon release.

In general, standard, wide and full-aligned blocks inside of Group blocks should appear consistent with the way they appear outside of Section blocks. Since Group blocks themselves can in turn be standard, wide, or full-aligned, the behavior of child elements should roughly correspond to the recommendation laid out here:

​https://github.com/WordPress/gutenberg/pull/13964#issuecomment-472562800

For reference, here's a mockup of the current state in Twenty Thirteen (front-end only, but the editor styles should match), compared to the way this should appear instead:

---

Testing + Dev Notes:

1. Gutenberg 5.5 is now in plugin form, so the easiest way to test this is to install the Gutenberg plugin on your dev environment: ​https://wordpress.org/plugins/gutenberg/

2. Once that's activated, add a new post, and switch to the code view. In that view, paste in this sample content to test a wide variety of Group block alignments, alongside various child blocks: ​https://cloudup.com/cYDmpgD08FU

3. Verify that all appears as expected, and that there is no horizontal scroll added to the page. Be sure to test across a wide range of breakpoints as well!

See also: #46750 which handles this change for Twenty Nineteen.

[kjellr]

Draft (front-end styles only)

[kjellr]

I added 46778-Draft.patch, which includes just front-end styles to get us started. This still needs a bit of cleanup, but it should work across all combinations and break points (using the sample block data described in the ticket at least).

I'll try to take a look at editor styles tomorrow as well. 👍

cc @laurelfulford

[kjellr]

Update: I've added got a new patch (46778.patch) that includes both the front end and editor styles. Here's a screenshot of the editor, before and after:

A few quick notes:

• The editor styles are much slimmer than the front end styles, because Gutenberg ships with editor styles for this block. It does not provide front end styles.
• The editor style selectors are a little unwieldy, but that's because they need to select direct children of the section block. Unfortunately, there's a lot of extra cruft in between blocks, and these styles are overriding fairly specific built-in selectors: ​https://github.com/WordPress/gutenberg/blob/ad7d183b493177992b720b66506f1cc71dd95b0a/packages/block-library/src/section/editor.scss#L21

I'd appreciate some testing + review whenever someone has a moment! Thanks.

[kjellr]

Minor update: I've uploaded a new version of 46778.patch that adjusts class names so that this works with the new "Group" name for the Section block instead:

​https://github.com/WordPress/gutenberg/pull/14920

I've also updated the title and description of this ticket to match.

[kjellr]

Now that Gutenberg 5.5 is in plugin form, it's easier than ever to test this patch. I've updated the instructions above, but I'm also posting them down here too:

1. Gutenberg 5.5 is now in plugin form, so the easiest way to test this is to install the Gutenberg plugin on your dev environment: ​https://wordpress.org/plugins/gutenberg/
2. Once that's activated, add a new post, and switch to the code view. In that view, paste in this sample content to test a wide variety of Group block alignments, alongside various child blocks: ​https://cloudup.com/cYDmpgD08FU
3. Verify that all appears as expected, and that there is no horizontal scroll added to the page. Be sure to test across a wide range of breakpoints as well!

[mapk]

I tested this patch and it works great in the editor. As mentioned above, the theme does not provide front-end styles, so it does not work as expected on the front-end. Thanks @kjellr, great work!

[kjellr]

I tested this patch and it works great in the editor. As mentioned above, the theme does not provide front-end styles, so it does not work as expected on the front-end. Thanks @kjellr, great work!

Ah, sorry — I may have misstated that above. This patch does include both front-end and back-end styles, so it should look near-identical in both.

[kjellr]

A recent change to Gutenberg has implemented a new wp-block-group__inner-container container inside of the Group block.

​https://github.com/WordPress/gutenberg/pull/15210

I've uploaded a new version of the patch that supports this change: 46778.1.patch​

This should be ready for review! Here's a new set of test blocks to make that easier:

​https://cloudup.com/cAKkp5zrRLe

[laurelfulford]

I forgot to mention in #46750, but thanks for the test data for testing these, @kjellr! It's been a huge time saver.

I took 46778.1.patch​ for a spin; overall it looks good! I just spotted a couple things that I also noted for Twenty Nineteen:

Full-width columns blocks appear indented when nested in standard and wide width blocks in the editor (they display as expected on the front-end):

The group doesn't "contain" floated elements; if it should, I'm not sure if that's a theme level thing or a block level thing:

Just let me know if you have questions about either of these!

[kjellr]

Thanks for the review, @laurelfulford!

Full-width columns blocks appear indented when nested in standard and wide width blocks in the editor (they display as expected on the front-end):

Good catch! I _think_ this is actually a bug in Gutenberg, because I'm seeing it in Twenty Nineteen, and even on a theme with no editor styles. So I think this should just be left as is for now.

The group doesn't "contain" floated elements; if it should, I'm not sure if that's a theme level thing or a block level thing

This is also inherited from Gutenberg for now. I think it seems like the sort of thing that should be handled there too — that way, if it's addressed there in the future, it'll flow into the theme cleanly.

I'm also seeing some issues with full-wide images:

... but I think it may have to do with a current Gutenberg bug:
​https://github.com/WordPress/gutenberg/issues/16284

We may need to wait for the resolution of that to double check this for sure.

[kjellr]

I'm also seeing the same full-wide issue for cover, gallery, and media + text that you mentioned for #46750. Which leads me to believe that may not be an issue with this patch either. 🤔

I'll do some more digging.

[kjellr]

I'm also seeing the same full-wide issue for cover, gallery, and media + text that you mentioned for #46750. Which leads me to believe that may not be an issue with this patch either. 🤔

46778.2.patch​ should solve that issue. I just added a width rule in addition to the max-width rule for full-width blocks inside of a group block with a colored background.

I think this is probably ready to go, pending the possible need to hold off and check this out after a fix to ​https://github.com/WordPress/gutenberg/issues/16284 lands.

[kjellr]

I think this is probably ready to go, pending the possible need to hold off and check this out after a fix to ​https://github.com/WordPress/gutenberg/issues/16284 lands.

Alright, that issue has been fixed in Gutenberg, and this patch is looking pretty solid to me. @laurelfulford would you mind giving it one more look?

Thanks!

[laurelfulford]

Thanks @kjellr! This looks good to me, too -- thanks for tackling this! I'll work on getting this update committed as well.

[laurelfulford]

In 45606:

Twenty Thirteen: Add styles for the new Group block.

Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments.

Props @kjellr.
Fixes #46778.