WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 5 weeks ago

#46750 closed enhancement

Twenty Nineteen: Add styles to support the group block — at Version 4

Reported by: kjellr Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots
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 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.

Change History (4)

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


8 months ago

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


8 months ago

#4 @kjellr
8 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
Note: See TracTickets for help on using tickets.