#198 update block utility.

pattern/utility/block/5-position.php

@@ -0,0 +1,9 @@
+<?php /*
+Title: Block top and bottom
+Class: .u-block-*
+Description: Append -top or -bottom to any block class to add padding to that side only.
+*/ ?>
+
+<div class="u-block-xl-top u-fill-neutral-lighter">
+    <p>Text inside block with only top padding</p>
+</div>

src/scss/utility/_block.scss

@@ -10,25 +10,53 @@
  */
 
 [class*="u-block"],
-%u-block {
+%u-block-base {
     display: block;
+
+    > *:last-child {
+        margin-bottom: 0;
+    }
 }
 
-[class*="u-block"] > *:last-child,
-%u-block > *:last-child {
-    margin-bottom: 0;
-}
 
 @each $key, $value in $spacing {
     @if $key == base {
         .u-block,
         %u-block {
-            padding: $value;
+            padding: $value !important;
+
+            &-top {
+                padding-top: $value !important;
+            }
+            &-bottom {
+                padding-bottom: $value !important;
+            }
+        }
+        %u-block {
+            &,
+            &-top,
+            &-bottom {
+                @extend %u-block-base;
+            }
         }
     } @else {
         .u-block-#{$key},
         %u-block-#{$key} {
-            padding: $value;
+            padding: $value !important;
+
+            &-top {
+                padding-top: $value !important;
+            }
+            &-bottom {
+                padding-bottom: $value !important;
+            }
+        }
+        %u-block-#{$key} {
+            &,
+            &-top,
+            &-bottom {
+                @extend %u-block-base;
+            }
         }
     }
-}
+}