WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 5 months ago

#46778 closed enhancement (fixed)

Twenty Thirteen: Add styles to support the group block

Reported by: kjellr Owned by: laurelfulford
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:
PR Number:

Description (last modified by 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:

https://cldup.com/bvCXLf3DGh-3000x3000.png


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/
  1. 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
  1. 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.

Attachments (4)

46778-Draft.patch (2.2 KB) - added by kjellr 8 months ago.
Draft (front-end styles only)
46778.patch (3.8 KB) - added by kjellr 7 months ago.
46778.1.patch (4.8 KB) - added by kjellr 5 months ago.
46778.2.patch (4.8 KB) - added by kjellr 5 months ago.

Download all attachments as: .zip

Change History (23)

@kjellr
8 months ago

Draft (front-end styles only)

#1 @kjellr
8 months ago

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

#2 @kjellr
8 months ago

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:

https://cldup.com/P6NJ8k5XdX-1200x1200.png

A few quick notes:

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

This ticket was mentioned in Slack in #core-editor by kjell. View the logs.


8 months ago

This ticket was mentioned in Slack in #design by kjell. View the logs.


8 months ago

#5 @kjellr
7 months ago

  • Description modified (diff)
  • Summary changed from Twenty Thirteen: Add styles to support the section block to Twenty Thirteen: Add styles to support the group block

@kjellr
7 months ago

#6 @kjellr
7 months ago

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.

#7 @kjellr
7 months ago

  • Description modified (diff)

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!

#8 @kjellr
7 months ago

  • Description modified (diff)

This ticket was mentioned in Slack in #core-themes by kjell. View the logs.


7 months ago

#10 @mapk
7 months ago

  • Keywords needs-testing removed

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!

#11 @kjellr
7 months ago

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
5 months ago

#12 @kjellr
5 months ago

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

#13 @laurelfulford
5 months ago

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):

https://cldup.com/UVAddMZRlk-3000x3000.png

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:

https://cldup.com/JLVzYEe7KB-3000x3000.png

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

Version 0, edited 5 months ago by laurelfulford (next)

#14 @kjellr
5 months ago

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:

https://cldup.com/WtgL0JMFqu-2000x2000.png

... 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.

#15 @kjellr
5 months ago

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. 🤔

https://cldup.com/k8i3AogQIW-1200x1200.png

I'll do some more digging.

@kjellr
5 months ago

#16 @kjellr
5 months ago

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.

#17 @kjellr
5 months ago

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!

#18 @laurelfulford
5 months ago

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

#19 @laurelfulford
5 months ago

  • Owner set to laurelfulford
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.