[wp-trac] [WordPress Trac] #46750: Twenty Nineteen: Add styles to support the group block

[WordPress Trac]

#46750: Twenty Nineteen: Add styles to support the group block
-----------------------------------------------------+---------------------
 Reporter:  kjellr                                   |       Owner:  (none)
     Type:  enhancement                              |      Status:  new
 Priority:  normal                                   |   Milestone:  5.3
Component:  Bundled Theme                            |     Version:
 Severity:  normal                                   |  Resolution:
 Keywords:  has-patch needs-testing has-screenshots  |     Focuses:
-----------------------------------------------------+---------------------

Old description:

> 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):
>
> [[Image(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.
>
> 2. 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!
>
> ----
>
> Props @get_dave for all the help getting this working initially.

New description:

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

 [[Image(https://cldup.com/-5A_Ni994H-3000x3000.png)]]

 ----

 **Testing: **

 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!

 ----

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

--

Comment (by kjellr):

 A heads up: Now that Gutenberg 5.5 is in plugin form, it's much easier to
 test this patch. In your dev environment:

 - Apply this patch
 - Install the Gutenberg plugin

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46750#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform