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

 > If it makes sense to you, I'd prefer to get this patch in as is, and
 then address those separately. I anticipate a lot of trial and error there

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

--

Comment (by laurelfulford):

 Thanks @kjellr! The patch is looking good! Following up on few comments
 from above:

 >>In the editor, the full-width image blocks bleed out of the group for me

 >I think this is actually just related to this Gutenberg issue... Should
 be all set as of Gutenberg v6.0 — would you mind giving those another
 test?

 Yes, looking good now!

 >>In the editor, full-width columns are slightly indented in the standard
 and wide-width groups (but display as expected in full-width groups)

 >Yeah, I think this is a core Gutenberg bug, as it's showing up all themes
 I've tried. I've filed a bug for it here...  In the meantime, I don't
 think we should make any adjustments for it here.

 Thanks for digging into that! I agree that it makes sense not to address
 that in the themes if it's happening in all.

 >> And this might be getting into the weeds, but Twenty Nineteen has
 styles that switch text to white when you set a darker background
 colour...

 > If it makes sense to you, I'd prefer to get this patch in as is, and
 then address those separately. I anticipate a lot of trial and error
 there.

 That makes sense to me! I hate issues like this, too, they're a pain to
 fix -- I agree it'll be easier to dig into/test separately.

 All my concerns have been addressed, so I'll work on getting this
 committed.

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