[wp-trac] [WordPress Trac] #53389: Bundled Themes: Add styling for blocks added in 5.8

[WordPress Trac]

#53389: Bundled Themes: Add styling for blocks added in 5.8
---------------------------+---------------------
 Reporter:  desrosj        |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  5.8
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:
---------------------------+---------------------

Comment (by Joen):

 I created a PR in https://github.com/WordPress/wordpress-develop/pull/1372
 which I believe should fix both this ticket, and
 https://core.trac.wordpress.org/ticket/53398 as well, since both are
 related to margins not being output for blocks inside the query loop.

 I don't love how TT1 in general handles block margins. Because it targets
 only blocks that are descendants of a particular parent, it adds extra
 specificity which is likely going to blocks that shouldn't necessarily
 have top/bottom margins inside. But changing this would require a bit of a
 refactor at this point. Instead I've explored using the {{{:where}}}
 selector to keep specificity low.

 Here's before:

 https://cloudup.com/cwrO4SwqTG5

 Here's after:

 https://cloudup.com/cnQp2UzKRCB

 This is my first patch to TT1, so I'd appreciate a sanity check that I did
 it right. Running the build script for the SASS files generated a bunch of
 unrelated changes to whitespace in the CSS files — I included them for
 transparency, but I'm not entirely sure why they happened.

 Here's the core of the code change, made in assets/sass/03-generic
 /vertical-margins.scss:

 {{{
 .site-main > article > *, // apply vertical margins to article level
 .site-main > .not-found > *, // apply vertical margins to article level
 .entry-content > *,
 [class*="inner-container"] > *,
 .wp-block-template-part > *,
 .wp-block-post-template :where(li > *) { // using :where keeps specificity
 low.

         margin-top: calc(0.666 * var(--global--spacing-vertical));
         margin-bottom: calc(0.666 * var(--global--spacing-vertical));

         @include media(mobile) {
                 margin-top: var(--global--spacing-vertical);
                 margin-bottom: var(--global--spacing-vertical);
         }

         &:first-child {
                 margin-top: 0;
         }

         &:last-child {
                 margin-bottom: 0;
         }
 }
 }}}

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