Varia: Add consisten vertical margins to elements in Media & Text block

varia/sass/blocks/media-text/_editor.scss

@@ -1,7 +1,14 @@
 .wp-block-media-text {
+	.block-editor-inner-blocks {
+		padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+		padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 
-  &[style*="background-color"]:not(.has-background-background-color) {
-		.block-editor-inner-blocks {
+		@include media(tablet) {
+			padding-right: #{map-deep-get($config-global, "spacing", "vertical")};
+			padding-left: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+		&[style*="background-color"]:not(.has-background-background-color) {
 			a {
 				color: currentColor;
 			}

varia/sass/blocks/media-text/_style.scss

@@ -1,13 +1,20 @@
 .wp-block-media-text {
 
 	.wp-block-media-text__content {
+		padding: #{map-deep-get($config-global, "spacing", "horizontal")};
 
-		padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
-		padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+		@include media(tablet) {
+			padding: #{map-deep-get($config-global, "spacing", "vertical")};
+		}
+
+			& > * {
+				margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
+				margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 
-		h1, h2, h3, h4, h5, h6, p, hr {
-			margin-top: #{map-deep-get($config-global, "spacing", "unit")};
-			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+			@include media(mobile) {
+				margin-top: map-deep-get($config-global, "spacing", "vertical");
+				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+			}
 
 			&:first-child {
 				margin-top: 0;
@@ -33,14 +40,9 @@
 	 */
 
 	&.is-stacked-on-mobile .wp-block-media-text__content {
-		padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
-		padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
-	}
-
-	@include media(tablet) {
-
-		&.is-stacked-on-mobile .wp-block-media-text__content {
-			padding: 0 #{map-deep-get($config-global, "spacing", "horizontal")};
+		@include media(mobile) {
+			padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
+			padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 		}
 	}
 }

varia/style-editor.css

@@ -394,7 +394,19 @@ object {
 	padding-left: 0;
 }
 
-.wp-block-media-text[style*="background-color"]:not(.has-background-background-color) .block-editor-inner-blocks a {
+.wp-block-media-text .block-editor-inner-blocks {
+	padding-right: 16px;
+	padding-left: 16px;
+}
+
+@media only screen and (min-width: 640px) {
+	.wp-block-media-text .block-editor-inner-blocks {
+		padding-right: 32px;
+		padding-left: 32px;
+	}
+}
+
+.wp-block-media-text .block-editor-inner-blocks[style*="background-color"]:not(.has-background-background-color) a {
 	color: currentColor;
 }
 

varia/style-rtl.css

@@ -1578,20 +1578,32 @@ dd {
 }
 
 .wp-block-media-text .wp-block-media-text__content {
-	padding-right: 16px;
-	padding-left: 16px;
+	padding: 16px;
 }
 
-.wp-block-media-text .wp-block-media-text__content h1, .wp-block-media-text .wp-block-media-text__content h2, .wp-block-media-text .wp-block-media-text__content h3, .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5, .wp-block-media-text .wp-block-media-text__content h6, .wp-block-media-text .wp-block-media-text__content p, .wp-block-media-text .wp-block-media-text__content hr {
-	margin-top: 16px;
-	margin-bottom: 16px;
+@media only screen and (min-width: 640px) {
+	.wp-block-media-text .wp-block-media-text__content {
+		padding: 32px;
+	}
+}
+
+.wp-block-media-text .wp-block-media-text__content > * {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
 }
 
-.wp-block-media-text .wp-block-media-text__content h1:first-child, .wp-block-media-text .wp-block-media-text__content h2:first-child, .wp-block-media-text .wp-block-media-text__content h3:first-child, .wp-block-media-text .wp-block-media-text__content h4:first-child, .wp-block-media-text .wp-block-media-text__content h5:first-child, .wp-block-media-text .wp-block-media-text__content h6:first-child, .wp-block-media-text .wp-block-media-text__content p:first-child, .wp-block-media-text .wp-block-media-text__content hr:first-child {
+@media only screen and (min-width: 560px) {
+	.wp-block-media-text .wp-block-media-text__content > * {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
+}
+
+.wp-block-media-text .wp-block-media-text__content > *:first-child {
 	margin-top: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content h1:last-child, .wp-block-media-text .wp-block-media-text__content h2:last-child, .wp-block-media-text .wp-block-media-text__content h3:last-child, .wp-block-media-text .wp-block-media-text__content h4:last-child, .wp-block-media-text .wp-block-media-text__content h5:last-child, .wp-block-media-text .wp-block-media-text__content h6:last-child, .wp-block-media-text .wp-block-media-text__content p:last-child, .wp-block-media-text .wp-block-media-text__content hr:last-child {
+.wp-block-media-text .wp-block-media-text__content > *:last-child {
 	margin-bottom: 0;
 }
 
@@ -1599,14 +1611,10 @@ dd {
 	color: currentColor;
 }
 
-.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
-	padding-top: 32px;
-	padding-bottom: 32px;
-}
-
-@media only screen and (min-width: 640px) {
+@media only screen and (min-width: 560px) {
 	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
-		padding: 0 16px;
+		padding-top: 32px;
+		padding-bottom: 32px;
 	}
 }
 

varia/style.css

@@ -1578,20 +1578,32 @@ dd {
 }
 
 .wp-block-media-text .wp-block-media-text__content {
-	padding-left: 16px;
-	padding-right: 16px;
+	padding: 16px;
 }
 
-.wp-block-media-text .wp-block-media-text__content h1, .wp-block-media-text .wp-block-media-text__content h2, .wp-block-media-text .wp-block-media-text__content h3, .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5, .wp-block-media-text .wp-block-media-text__content h6, .wp-block-media-text .wp-block-media-text__content p, .wp-block-media-text .wp-block-media-text__content hr {
-	margin-top: 16px;
-	margin-bottom: 16px;
+@media only screen and (min-width: 640px) {
+	.wp-block-media-text .wp-block-media-text__content {
+		padding: 32px;
+	}
+}
+
+.wp-block-media-text .wp-block-media-text__content > * {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
 }
 
-.wp-block-media-text .wp-block-media-text__content h1:first-child, .wp-block-media-text .wp-block-media-text__content h2:first-child, .wp-block-media-text .wp-block-media-text__content h3:first-child, .wp-block-media-text .wp-block-media-text__content h4:first-child, .wp-block-media-text .wp-block-media-text__content h5:first-child, .wp-block-media-text .wp-block-media-text__content h6:first-child, .wp-block-media-text .wp-block-media-text__content p:first-child, .wp-block-media-text .wp-block-media-text__content hr:first-child {
+@media only screen and (min-width: 560px) {
+	.wp-block-media-text .wp-block-media-text__content > * {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
+}
+
+.wp-block-media-text .wp-block-media-text__content > *:first-child {
 	margin-top: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content h1:last-child, .wp-block-media-text .wp-block-media-text__content h2:last-child, .wp-block-media-text .wp-block-media-text__content h3:last-child, .wp-block-media-text .wp-block-media-text__content h4:last-child, .wp-block-media-text .wp-block-media-text__content h5:last-child, .wp-block-media-text .wp-block-media-text__content h6:last-child, .wp-block-media-text .wp-block-media-text__content p:last-child, .wp-block-media-text .wp-block-media-text__content hr:last-child {
+.wp-block-media-text .wp-block-media-text__content > *:last-child {
 	margin-bottom: 0;
 }
 
@@ -1599,14 +1611,10 @@ dd {
 	color: currentColor;
 }
 
-.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
-	padding-top: 32px;
-	padding-bottom: 32px;
-}
-
-@media only screen and (min-width: 640px) {
+@media only screen and (min-width: 560px) {
 	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
-		padding: 0 16px;
+		padding-top: 32px;
+		padding-bottom: 32px;
 	}
 }