Merge pull request #2763 from Automattic/fix/layout-block-mobile-headings

Seedlet/Spearhead: Fix mobile heading word-breaks and spacing rules in Jetpack layout block.

seedlet/assets/css/style-editor.css

@@ -121,7 +121,7 @@
 	--layout-grid--gutter-medium: var(--global--spacing-unit);
 	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2);
 	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);
-	--layout-grid--background-offset: calc( var(--global--spacing-unit));
+	--layout-grid--background-offset: var(--global--spacing-unit);
 	--list--font-family: var(--global--font-secondary);
 	--definition-term--font-family: var(--global--font-primary);
 	--pullquote--font-family: var(--global--font-primary);

seedlet/assets/sass/vendors/jetpack/blocks/layout-grid/_config.scss

@@ -6,5 +6,5 @@ $layout-gutter-sizes: "none", "small", "medium", "large", "huge";
 	--layout-grid--gutter-medium: var(--global--spacing-unit);           // 16px
 	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2); // 32px
 	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);  // 48px
-	--layout-grid--background-offset: calc( var(--global--spacing-unit)); // 16px
+	--layout-grid--background-offset: var(--global--spacing-unit);       // 16px
 }

seedlet/assets/sass/vendors/jetpack/blocks/layout-grid/_style.scss

@@ -1,10 +1,35 @@
 @import 'config';
 
 .wp-block-jetpack-layout-grid {
+	/* Grid gutter size options */
 	grid-gap: var(--layout-grid--gutter-large) !important;
 	padding-left: var(--layout-grid--gutter-large) !important;
 	padding-right: var(--layout-grid--gutter-large) !important;
 
+	&.wp-block-jetpack-layout-gutter__small {
+		grid-gap: var(--layout-grid--gutter-small) !important;
+		padding-left: var(--layout-grid--gutter-small) !important;
+		padding-right: var(--layout-grid--gutter-small) !important;
+	}
+
+	&.wp-block-jetpack-layout-gutter__medium {
+		grid-gap: var(--layout-grid--gutter-medium) !important;
+		padding-left: var(--layout-grid--gutter-medium) !important;
+		padding-right: var(--layout-grid--gutter-medium) !important;
+	}
+
+	&.wp-block-jetpack-layout-gutter__large {
+		grid-gap: var(--layout-grid--gutter-large) !important;
+		padding-left: var(--layout-grid--gutter-large) !important;
+		padding-right: var(--layout-grid--gutter-large) !important;
+	}
+
+	&.wp-block-jetpack-layout-gutter__huge {
+		grid-gap: var(--layout-grid--gutter-huge) !important;
+		padding-left: var(--layout-grid--gutter-huge) !important;
+		padding-right: var(--layout-grid--gutter-huge) !important;
+	}
+
 	/* Individual Column Options */
 	.wp-block-jetpack-layout-grid-column {
 		// Background Offset
@@ -75,4 +100,3 @@
 		}
 	}
 }
-

seedlet/style-rtl.css

@@ -187,7 +187,7 @@ Included in theme screenshot and in block patterns.
 	--layout-grid--gutter-medium: var(--global--spacing-unit);
 	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2);
 	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);
-	--layout-grid--background-offset: calc( var(--global--spacing-unit));
+	--layout-grid--background-offset: var(--global--spacing-unit);
 	--list--font-family: var(--global--font-secondary);
 	--definition-term--font-family: var(--global--font-primary);
 	--pullquote--font-family: var(--global--font-primary);
@@ -4176,12 +4176,37 @@ button[data-load-more-btn],
 }
 
 .wp-block-jetpack-layout-grid {
+	/* Grid gutter size options */
 	grid-gap: var(--layout-grid--gutter-large) !important;
 	padding-right: var(--layout-grid--gutter-large) !important;
 	padding-left: var(--layout-grid--gutter-large) !important;
 	/* Individual Column Options */
 }
 
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small {
+	grid-gap: var(--layout-grid--gutter-small) !important;
+	padding-right: var(--layout-grid--gutter-small) !important;
+	padding-left: var(--layout-grid--gutter-small) !important;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium {
+	grid-gap: var(--layout-grid--gutter-medium) !important;
+	padding-right: var(--layout-grid--gutter-medium) !important;
+	padding-left: var(--layout-grid--gutter-medium) !important;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large {
+	grid-gap: var(--layout-grid--gutter-large) !important;
+	padding-right: var(--layout-grid--gutter-large) !important;
+	padding-left: var(--layout-grid--gutter-large) !important;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge {
+	grid-gap: var(--layout-grid--gutter-huge) !important;
+	padding-right: var(--layout-grid--gutter-huge) !important;
+	padding-left: var(--layout-grid--gutter-huge) !important;
+}
+
 .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column[style^="background-color"] {
 	margin-right: calc(var(--layout-grid--background-offset) * -1) !important;
 	margin-left: calc(var(--layout-grid--background-offset) * -1) !important;

seedlet/style.css

@@ -187,7 +187,7 @@ Included in theme screenshot and in block patterns.
 	--layout-grid--gutter-medium: var(--global--spacing-unit);
 	--layout-grid--gutter-large: calc( var(--global--spacing-unit) * 2);
 	--layout-grid--gutter-huge: calc( var(--global--spacing-unit) * 3);
-	--layout-grid--background-offset: calc( var(--global--spacing-unit));
+	--layout-grid--background-offset: var(--global--spacing-unit);
 	--list--font-family: var(--global--font-secondary);
 	--definition-term--font-family: var(--global--font-primary);
 	--pullquote--font-family: var(--global--font-primary);
@@ -4197,12 +4197,37 @@ button[data-load-more-btn],
 }
 
 .wp-block-jetpack-layout-grid {
+	/* Grid gutter size options */
 	grid-gap: var(--layout-grid--gutter-large) !important;
 	padding-left: var(--layout-grid--gutter-large) !important;
 	padding-right: var(--layout-grid--gutter-large) !important;
 	/* Individual Column Options */
 }
 
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small {
+	grid-gap: var(--layout-grid--gutter-small) !important;
+	padding-left: var(--layout-grid--gutter-small) !important;
+	padding-right: var(--layout-grid--gutter-small) !important;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium {
+	grid-gap: var(--layout-grid--gutter-medium) !important;
+	padding-left: var(--layout-grid--gutter-medium) !important;
+	padding-right: var(--layout-grid--gutter-medium) !important;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__large {
+	grid-gap: var(--layout-grid--gutter-large) !important;
+	padding-left: var(--layout-grid--gutter-large) !important;
+	padding-right: var(--layout-grid--gutter-large) !important;
+}
+
+.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge {
+	grid-gap: var(--layout-grid--gutter-huge) !important;
+	padding-left: var(--layout-grid--gutter-huge) !important;
+	padding-right: var(--layout-grid--gutter-huge) !important;
+}
+
 .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column.has-background, .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column[style^="background-color"] {
 	margin-left: calc(var(--layout-grid--background-offset) * -1) !important;
 	margin-right: calc(var(--layout-grid--background-offset) * -1) !important;