Merge pull request #827 from Automattic/fix/issue-746

All style variations: Add a utility css class for spacer block

calm-business/sass/blocks/_blocks.scss

@@ -714,6 +714,17 @@
 		}
 	}
 
+	//! Spacer
+	.wp-block-spacer {
+		&.desktop-only {
+			display: none;
+
+			@include media(tablet) {
+				display: block;
+			}
+		}
+	}
+
 	//! Twitter Embed
 	.wp-block-embed-twitter {
 		word-break: break-word;

calm-business/style-rtl.css

@@ -4301,6 +4301,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

calm-business/style.css

@@ -4313,6 +4313,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

elegant-business/sass/blocks/_blocks.scss

@@ -680,10 +680,15 @@
 		}
 	}
 
-	//! Separator
+	//! Spacer
 	.wp-block-spacer {
-		margin-bottom: $size__vertical-spacing-unit;
-		margin-top: $size__vertical-spacing-unit;
+		&.desktop-only {
+			display: none;
+
+			@include media(tablet) {
+				display: block;
+			}
+		}
 	}
 
 	//! Twitter Embed

elegant-business/style-rtl.css

@@ -4105,9 +4105,14 @@ body.page .main-navigation {
   display: none;
 }
 
-.entry .entry-content .wp-block-spacer {
-  margin-bottom: 32px;
-  margin-top: 32px;
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
 }
 
 .entry .entry-content .wp-block-embed-twitter {

elegant-business/style.css

@@ -4117,9 +4117,14 @@ body.page .main-navigation {
   display: none;
 }
 
-.entry .entry-content .wp-block-spacer {
-  margin-bottom: 32px;
-  margin-top: 32px;
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
 }
 
 .entry .entry-content .wp-block-embed-twitter {

friendly-business/sass/blocks/_blocks.scss

@@ -635,6 +635,17 @@
 		}
 	}
 
+	//! Spacer
+	.wp-block-spacer {
+		&.desktop-only {
+			display: none;
+
+			@include media(tablet) {
+				display: block;
+			}
+		}
+	}
+
 	//! Twitter Embed
 	.wp-block-embed-twitter {
 		word-break: break-word;

friendly-business/style-rtl.css

@@ -3988,6 +3988,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

friendly-business/style.css

@@ -4000,6 +4000,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

modern-business/sass/blocks/_blocks.scss

@@ -805,6 +805,17 @@
 		}
 	}
 
+	//! Spacer
+	.wp-block-spacer {
+		&.desktop-only {
+			display: none;
+
+			@include media(tablet) {
+				display: block;
+			}
+		}
+	}
+
 	//! Twitter Embed
 	.wp-block-embed-twitter {
 		word-break: break-word;

modern-business/style-rtl.css

@@ -4255,6 +4255,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

modern-business/style.css

@@ -4267,6 +4267,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

professional-business/sass/blocks/_blocks.scss

@@ -681,6 +681,17 @@
 		}
 	}
 
+	//! Spacer
+	.wp-block-spacer {
+		&.desktop-only {
+			display: none;
+
+			@include media(tablet) {
+				display: block;
+			}
+		}
+	}
+
 	//! Twitter Embed
 	.wp-block-embed-twitter {
 		word-break: break-word;

professional-business/style-rtl.css

@@ -4114,6 +4114,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

professional-business/style.css

@@ -4126,6 +4126,16 @@ body.page .main-navigation {
   display: none;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

sophisticated-business/sass/blocks/_blocks.scss

@@ -746,6 +746,17 @@
 		}
 	}
 
+	//! Spacer
+	.wp-block-spacer {
+		&.desktop-only {
+			display: none;
+
+			@include media(tablet) {
+				display: block;
+			}
+		}
+	}
+
 	//! Twitter Embed
 	.wp-block-embed-twitter {
 		word-break: break-word;

sophisticated-business/style-rtl.css

@@ -4131,6 +4131,16 @@ body.page .main-navigation {
   padding-right: 0.88889em;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }

sophisticated-business/style.css

@@ -4143,6 +4143,16 @@ body.page .main-navigation {
   padding-left: 0.88889em;
 }
 
+.entry .entry-content .wp-block-spacer.desktop-only {
+  display: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-spacer.desktop-only {
+    display: block;
+  }
+}
+
 .entry .entry-content .wp-block-embed-twitter {
   word-break: break-word;
 }