WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 7 weeks ago

#46778 new enhancement

Twenty Thirteen: Add styles to support the group block

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

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 (2)

46778-Draft.patch (2.2 KB) - added by kjellr 3 months ago.
Draft (front-end styles only)
46778.patch (3.8 KB) - added by kjellr 2 months ago.

Download all attachments as: .zip

Change History (13)

@kjellr
3 months ago

Draft (front-end styles only)

#1 @kjellr
3 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
2 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.


2 months ago

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


2 months ago

#5 @kjellr
2 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
2 months ago

#6 @kjellr
2 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
2 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
2 months ago

  • Description modified (diff)

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


2 months ago

#10 @mapk
7 weeks 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 weeks 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.

Note: See TracTickets for help on using tickets.