[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:
---------------------------------------+---------------------

Comment (by dianeco):

 I'm testing the patch, I'm seeing small issues inside style.css:

 **1.** By default Core Gutenberg set the margin top and bottom to 0 when a
 background is set. This propery is overridden by Twenty Nineteen style.
 Commonly full-width section with background have no margins. To accomplish
 it we'd add:

 {{{
 .entry .entry-content .wp-block-group.has-background.alignfull{
  margin-top:0;
  margin-bottom: 0;
 }

 .entry .entry-content > .wp-block-group > .wp-block-group__inner-container
 > *:first-child {
   margin-top: 0;
 }

 .entry .entry-content > .wp-block-group > .wp-block-group__inner-container
 > *:last-child {
   margin-bottom: 0;
 }
 }}}


 **2.** In the patch the following line make the content touch the top and
 bottom edges:

 [[Image(https://i.imgur.com/STbenBE.png)]]

 {{{
 .entry .entry-content .wp-block-group.has-background.alignfull {
     padding: 0;
 }
 }}}

 It should be replaced by the following line which will leave a vertical
 padding of 1rem:
 {{{
 .entry .entry-content .wp-block-group.has-background.alignfull {
     padding-left: 0;
     padding-right: 0;
 }
 }}}

 **3.** Not sure of the utility of these lines which impact column inside
 columns and break their vertical alignment:
 {{{
 .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container
 > * > *:first-child,
 .entry .entry-content > .wp-block-group > .wp-block-group__inner-container
 > * > *:first-child {
   margin-top: 0;
 }

 .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container
 > * > *:last-child,
 .entry .entry-content > .wp-block-group > .wp-block-group__inner-container
 > * > *:last-child {
   margin-bottom: 0;
 }
 }}}

 I think they should be replaced by these lines which were in the previous
 patch:
 {{{
 .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container
 > *:first-child,
 .entry .entry-content > .wp-block-group > .wp-block-group__inner-container
 > *:first-child {
   margin-top: 0;
 }

 .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container
 > *:last-child,
 .entry .entry-content > .wp-block-group > .wp-block-group__inner-container
 > *:last-child {
   margin-bottom: 0;
 }
 }}}

 **4.** Finally the following lines which are inserted in this patch, but
 not related to group, break the image inside columns:
 {{{
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) >
 img {
     max-width: calc(8 * (100vw / 12) - 28px);
   }
 }

 @media only screen and (min-width: 1168px) {
   .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) >
 img {
     max-width: calc(6 * (100vw / 12) - 28px);
   }
 }
 }}}
 [[Image(https://i.imgur.com/OUqr2Wu.png)]]

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