WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 7 weeks ago

#46750 new enhancement

Twenty Nineteen: 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 has-screenshots
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 original wide + full styles for Twenty Nineteen only work properly for direct children of entry-content, so the theme requires a patch to ensure proper compatibility with this new block.

The Group block is currently assigned to the Gutenberg 5.5 milestone. This patch (or a similar one) should be merged into Twenty Nineteen alongside that release, to ensure that the Group block works as intended upon release.

The attach patch includes styles for the Group block, in both the front end and the editor. In general, standard, wide and full-aligned blocks inside of Group blocks should appear consistent with the way they appear outside of Group 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

Here's a screenshot of what to expect in Twenty Nineteen (note that padding exists on the "Wide" block when the Section block has a background color in this screenshot):

https://cldup.com/-5A_Ni994H-3000x3000.png


Testing:

  1. Until there's a build for Gutenberg 5.5, the best way to test this is to compile the master branch of Gutenberg and run it on your core dev environment.
  1. 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!

Props @get_dave for all the help getting this working initially.

Attachments (1)

46750.patch (22.7 KB) - added by kjellr 8 weeks ago.

Download all attachments as: .zip

Change History (11)

#1 @kjellr
3 months ago

Until there's a build for Gutenberg 5.5, the best way to test this is to compile the master branch of Gutenberg and run it on your core dev environment.

In case it helps anyone, here's a version of 46750.patch that can be applied directly totwentynineteen's root directory, for easier testing in existing Gutenberg dev environments: https://cloudup.com/cPLGSt0QVGj

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

#4 @kjellr
2 months ago

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

#5 @kjellr
2 months ago

Minor update: I've uploaded a new version of 46750.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

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!

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


2 months ago

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


8 weeks ago

@kjellr
8 weeks ago

#10 @kjellr
8 weeks ago

Small update: I updated 46750.patch to allow .alignright blocks to extend beyond the width of the container like they do outside of the Group block:

Before:

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

After:

https://cldup.com/9Gn_YHjBXW-3000x3000.png

I also stumbled upon a small issue where non-aligned images were appearing too wide, so I fixed that too.

Note that depending on the outcome of this GitHub issue, this patch may need to be rewritten:

https://github.com/WordPress/gutenberg/issues/15042

#11 @mapk
7 weeks ago

  • Keywords needs-testing removed

I just tested this patch both in the editor and on the frontend and it works great! Excellent work!

Note: See TracTickets for help on using tickets.