Merge pull request #591 from WordPress/update/column-block-padding

Add front end padding to column blocks.
WordPress · Nov 16, 2018 · 45d79e2 · 45d79e2
2 parents 46da458 + 8b18341
commit 45d79e2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss
@@ -681,6 +681,11 @@
 	//! Columns
 	.wp-block-columns {
 
+		&.alignfull {
+			padding-left: $size__spacing-unit;
+			padding-right: $size__spacing-unit;
+		}
+
 		@include media(tablet) {
 			.wp-block-column > * {
 
@@ -700,6 +705,12 @@
 					margin-right: 0;
 				}
 			}
+
+			&.alignfull,
+			&.alignfull .wp-block-column {
+				padding-left: calc(2 * #{$size__spacing-unit});
+				padding-right: calc(2 * #{$size__spacing-unit});
+			}
 		}
 	}
 

diff --git a/style-rtl.css b/style-rtl.css
@@ -4368,6 +4368,11 @@ body.page .main-navigation {
   word-break: break-word;
 }
 
+.entry .entry-content .wp-block-columns.alignfull {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
     margin-top: 0;
@@ -4381,6 +4386,11 @@ body.page .main-navigation {
   .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
     margin-left: 0;
   }
+  .entry .entry-content .wp-block-columns.alignfull,
+  .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
+    padding-right: calc(2 * 1rem);
+    padding-left: calc(2 * 1rem);
+  }
 }
 
 .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {

diff --git a/style.css b/style.css
@@ -4380,6 +4380,11 @@ body.page .main-navigation {
   word-break: break-word;
 }
 
+.entry .entry-content .wp-block-columns.alignfull {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 @media only screen and (min-width: 768px) {
   .entry .entry-content .wp-block-columns .wp-block-column > *:first-child {
     margin-top: 0;
@@ -4393,6 +4398,11 @@ body.page .main-navigation {
   .entry .entry-content .wp-block-columns[class*='has-'] > *:last-child {
     margin-right: 0;
   }
+  .entry .entry-content .wp-block-columns.alignfull,
+  .entry .entry-content .wp-block-columns.alignfull .wp-block-column {
+    padding-left: calc(2 * 1rem);
+    padding-right: calc(2 * 1rem);
+  }
 }
 
 .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {