Simplify Custom margin (#4556)

* Eliminated post-content margin custom CSS variable and used custom-gap-horizontal throughout instead

* refactored references from custom post-content padding to custom-margin in child themes

* refactored and simplified styles that were leveraging custom-post-content padding values

* Remove unused custom variables.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

blockbase/assets/ponyfill.css

@@ -56,35 +56,35 @@ img {
  * These are default block editor widths in case the theme doesn't provide them.
  */
 .wp-site-blocks {
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
 }
 
 .wp-site-blocks .alignfull {
-	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
-	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
+	margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
+	margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
 	width: unset;
 }
 
 .wp-site-blocks .alignfull.wp-block-template-part, .wp-site-blocks .alignfull.wp-block-columns, .wp-site-blocks .alignfull.wp-block-group {
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
 }
 
 .is-root-container {
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
 }
 
 .is-root-container .wp-block[data-align="full"] {
-	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
-	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
+	margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
+	margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
 	width: unset;
 }
 
 .is-root-container .wp-block[data-align="full"] > .wp-block-group {
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
 }
 
 @media (min-width: 480px) {
@@ -152,8 +152,8 @@ body.admin-bar .wp-site-blocks {
 }
 
 p {
-	margin-top: var(--wp--custom--margin--vertical);
-	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--gap--vertical);
+	margin-bottom: var(--wp--custom--gap--vertical);
 }
 
 .wp-block-column :first-child, .wp-block-group :first-child {
@@ -413,7 +413,7 @@ p.has-background {
 }
 
 .wp-block-post-comments .reply {
-	margin-top: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--gap--vertical);
 	margin-bottom: 0;
 }
 
@@ -455,7 +455,7 @@ p.has-background {
 
 .wp-block-post-comments form p {
 	margin-top: 0;
-	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-bottom: var(--wp--custom--gap--vertical);
 }
 
 .wp-block-post-comments form .comment-notes {
@@ -545,8 +545,8 @@ p.has-background {
 .wp-block-post-comments .commentlist .comment p {
 	font-size: var(--wp--custom--post-comment--typography--font-size);
 	line-height: var(--wp--custom--post-comment--typography--line-height);
-	margin-bottom: var(--wp--custom--margin--vertical);
-	margin-top: var(--wp--custom--margin--vertical);
+	margin-bottom: var(--wp--custom--gap--vertical);
+	margin-top: var(--wp--custom--gap--vertical);
 }
 
 .wp-block-post-comments .comment-body {
@@ -561,7 +561,7 @@ p.has-background {
 .wp-block-post-comments .comment-awaiting-moderation {
 	display: inline-block;
 	font-size: var(--wp--preset--font-size--small);
-	margin-bottom: var(--wp--custom--margin--baseline);
+	margin-bottom: var(--wp--custom--gap--baseline);
 }
 
 .wp-block-pullquote.is-style-solid-color,
@@ -655,7 +655,7 @@ p.has-background {
 }
 
 .wp-block-search {
-	margin-top: var(--wp--custom--margin--baseline);
+	margin-top: var(--wp--custom--gap--baseline);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
@@ -787,7 +787,7 @@ p.has-background {
 .wp-block-table td,
 .wp-block-table th {
 	border: 1px solid;
-	padding: calc(0.5*var(--wp--custom--margin--vertical)) calc(0.5*var(--wp--custom--margin--horizontal));
+	padding: calc(0.5*var(--wp--custom--gap--vertical)) calc(0.5*var(--wp--custom--gap--horizontal));
 }
 
 .wp-block-video figcaption {
@@ -813,7 +813,7 @@ p.has-background {
 	align-self: center;
 	content: '';
 	display: inline-block;
-	margin-right: calc(0.5 * var(--wp--custom--margin--baseline));
+	margin-right: calc(0.5 * var(--wp--custom--gap--baseline));
 	height: 16px;
 	width: 16px;
 	mask-size: contain;

blockbase/block-template-parts/header.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}},"className":"site-header","layout":{"type":"flex"}} -->
-<div class="wp-block-group alignfull site-header" style="padding-top:40px;padding-bottom:40px">
+<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}},"className":"site-header","layout":{"type":"flex"}} -->
+<div class="wp-block-group site-header" style="padding-top:40px;padding-bottom:40px">
 	<!-- wp:site-title /-->
 	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
 </div>

blockbase/sass/base/_alignment.scss

@@ -1,19 +1,19 @@
 //FRONTEND
 .wp-site-blocks { // top level of the view
 	//In this situation we want to introduce a standardized gap between content and the edge of the screen.
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
 	.alignfull {
 		// these elements we want to "bust out" of the gap created above 
-		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
-		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
+		margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
+		margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
 		width: unset;
 		// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
 		&.wp-block-template-part,
 		&.wp-block-columns,
 		&.wp-block-group {
-	 		padding-left: var(--wp--custom--post-content--padding--left);
-	 		padding-right: var(--wp--custom--post-content--padding--right);
+	 		padding-left: var(--wp--custom--gap--horizontal);
+	 		padding-right: var(--wp--custom--gap--horizontal);
 		}
 	}
 }
@@ -21,15 +21,15 @@
 // EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet.  However the selectors are quite different
 // and it's a lot easier to understand and ensure intent separated in this way.
 .is-root-container { //top level of the editor
-	padding-left: var(--wp--custom--post-content--padding--left);
-	padding-right: var(--wp--custom--post-content--padding--right);
+	padding-left: var(--wp--custom--gap--horizontal);
+	padding-right: var(--wp--custom--gap--horizontal);
 	.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
-		margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
-		margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
+		margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
+		margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
 		width: unset;
 		>.wp-block-group {
-	 		padding-left: var(--wp--custom--post-content--padding--left);
-	 		padding-right: var(--wp--custom--post-content--padding--right);
+	 		padding-left: var(--wp--custom--gap--horizontal);
+	 		padding-right: var(--wp--custom--gap--horizontal);
 		}
 	}
 }

blockbase/sass/base/_mixins.scss

@@ -19,7 +19,7 @@
 		align-self: center;
 		content: '';
 		display: inline-block;
-		margin-right: calc(0.5 * var(--wp--custom--margin--baseline) );
+		margin-right: calc(0.5 * var(--wp--custom--gap--baseline) );
 		height: 16px;
 		width: 16px;
 		mask-size: contain;

blockbase/sass/base/_text.scss

@@ -8,8 +8,8 @@
 }
 
 p {
-	margin-top: var(--wp--custom--margin--vertical);
-	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--gap--vertical);
+	margin-bottom: var(--wp--custom--gap--vertical);
 }
 
 .wp-block-column, .wp-block-group {

blockbase/sass/blocks/_post-comments.scss

@@ -4,7 +4,7 @@
 	}
 
 	.reply {
-		margin-top: var(--wp--custom--margin--vertical);
+		margin-top: var(--wp--custom--gap--vertical);
 		margin-bottom: 0;
 
 		a {
@@ -50,7 +50,7 @@
 
 		p {
 			margin-top: 0;
-			margin-bottom: var(--wp--custom--margin--vertical);
+			margin-bottom: var(--wp--custom--gap--vertical);
 		}
 
 		.comment-notes {
@@ -131,8 +131,8 @@
 			p {
 				font-size: var(--wp--custom--post-comment--typography--font-size);
 				line-height: var(--wp--custom--post-comment--typography--line-height);
-				margin-bottom: var(--wp--custom--margin--vertical);
-				margin-top: var(--wp--custom--margin--vertical);	
+				margin-bottom: var(--wp--custom--gap--vertical);
+				margin-top: var(--wp--custom--gap--vertical);	
 			}
 		}
 	}
@@ -149,7 +149,7 @@
 	.comment-awaiting-moderation {
 		display: inline-block;
 		font-size: var(--wp--preset--font-size--small);
-		margin-bottom: var(--wp--custom--margin--baseline);
+		margin-bottom: var(--wp--custom--gap--baseline);
 	}
 
 }

blockbase/sass/blocks/_search.scss

@@ -1,7 +1,7 @@
 @import 'button-mixins';
 
 .wp-block-search {
-	margin-top: var(--wp--custom--margin--baseline);
+	margin-top: var(--wp--custom--gap--baseline);
 
 	&.wp-block-search__button-inside {
 		.wp-block-search__inside-wrapper{

blockbase/sass/blocks/_table.scss

@@ -9,7 +9,7 @@
 	td, th {
 		// See https://github.com/WordPress/gutenberg/issues/31261
 		border: 1px solid;
-		padding: calc(0.5*var(--wp--custom--margin--vertical)) calc(0.5*var(--wp--custom--margin--horizontal));
+		padding: calc(0.5*var(--wp--custom--gap--vertical)) calc(0.5*var(--wp--custom--gap--horizontal));
 	}
 
 	margin-bottom: 1em; // See https://github.com/WordPress/gutenberg/issues/34652

blockbase/theme.json

@@ -151,7 +151,7 @@
 				}
 			],
 			"form": {
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"padding": "calc( 0.5 * var(--wp--custom--gap--horizontal) )",
 				"border": {
 					"color": "#EFEFEF",
 					"radius": "0",
@@ -191,7 +191,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -234,14 +234,14 @@
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 					}
 				}
 			},
-			"margin": {
+			"gap": {
 				"baseline": "10px",
-				"horizontal": "30px",
-				"vertical": "30px"
+				"horizontal": "min(30px, 5vw)",
+				"vertical": "min(30px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -263,12 +263,6 @@
 					"lineHeight": "var(--wp--custom--body--typography--line-height)"
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "20px",
-					"right": "20px"
-				}
-			},
 			"pullquote": {
 				"citation": {
 					"typography": {
@@ -278,7 +272,7 @@
 					},
 					"spacing": {
 						"margin": {
-							"top": "var(--wp--custom--margin--vertical)"
+							"top": "var(--wp--custom--gap--vertical)"
 						}
 					}
 				},
@@ -300,7 +294,7 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "var(--wp--custom--margin--vertical) auto",
+				"margin": "var(--wp--custom--gap--vertical) auto",
 				"width": "150px"
 			},
 			"table": {
@@ -313,7 +307,7 @@
 			"video": {
 				"caption": {
 					"textAlign": "center",
-					"margin": "var(--wp--custom--margin--vertical) auto"
+					"margin": "var(--wp--custom--gap--vertical) auto"
 				}
 			}
 		},
@@ -391,10 +385,10 @@
 			"core/code": {
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"border": {
@@ -436,10 +430,10 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--horizontal)",
-						"bottom": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--horizontal)",
+						"bottom": "var(--wp--custom--gap--horizontal)"
 					}
 				}
 			},
@@ -467,7 +461,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)"
 					}
 				},
 				"typography": {
@@ -490,8 +484,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -504,8 +498,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -518,8 +512,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -532,8 +526,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -546,8 +540,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -560,8 +554,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -572,7 +566,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--margin--vertical)"
+			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

geologist/assets/theme.css

@@ -296,7 +296,7 @@ ul ul {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	padding: var(--wp--custom--margin--horizontal);
+	padding: var(--wp--custom--gap--horizontal);
 }
 
 .has-primary-background-color {
@@ -342,16 +342,11 @@ textarea:focus {
 
 .site-header {
 	overflow: inherit;
-}
-
-@media (min-width: 782px) {
-	.site-header {
-		padding: var(--wp--custom--post-content--padding--left);
-	}
+	padding-top: var(--wp--custom--gap--vertical);
 }
 
 .site-header .wp-block-site-logo {
-	margin-right: var(--wp--custom--margin--horizontal);
+	margin-right: var(--wp--custom--gap--horizontal);
 }
 
 @media (max-width: 599px) {
@@ -437,7 +432,7 @@ textarea:focus {
 }
 
 .wp-block-query .wp-block-post-featured-image {
-	margin-top: calc( var(--wp--custom--margin--vertical) / 2);
+	margin-top: calc( var(--wp--custom--gap--vertical) / 2);
 }
 
 /*# sourceMappingURL=theme.css.map */

geologist/child-theme.json

@@ -174,9 +174,9 @@
 			"line-height": {
 				"body": 1.7
 			},
-			"margin": {
-				"horizontal": "20px",
-				"vertical": "30px"
+			"gap": {
+				"horizontal": "min(20px, 5vw)",
+				"vertical": "min(30px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -187,12 +187,6 @@
 					}
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",
-					"right": "min( var(--wp--custom--margin--horizontal), 5vw)"
-				}
-			},
 			"quote": {
 				"citation": {
 					"typography": {
@@ -307,7 +301,7 @@
 			},
 			"list": {
 				"padding": {
-					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+					"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 				}
 			},
 			"core/quote": {
@@ -322,7 +316,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "calc( var(--wp--custom--margin--horizontal) * 3 )"
+						"left": "calc( var(--wp--custom--gap--horizontal) * 3 )"
 					}
 				},
 				"typography": {

geologist/sass/blocks/_pullquote.scss

@@ -1,3 +1,3 @@
 .wp-block-pullquote.is-style-solid-color {
-	padding: var(--wp--custom--margin--horizontal);
+	padding: var(--wp--custom--gap--horizontal);
 }

geologist/sass/templates/_header.scss

@@ -4,13 +4,10 @@
 
 .site-header {
 	overflow: inherit;
-
-	@include break-medium() {
-		padding: var(--wp--custom--post-content--padding--left);
-	}
+	padding-top: var(--wp--custom--gap--vertical);
 
 	.wp-block-site-logo {
-		margin-right: var(--wp--custom--margin--horizontal);
+		margin-right: var(--wp--custom--gap--horizontal);
 
 		@include break-small-only(){
 			flex-basis: 100%;

geologist/sass/templates/_query.scss

@@ -1,5 +1,5 @@
 .wp-block-query {
 	.wp-block-post-featured-image {
-		margin-top: calc( var(--wp--custom--margin--vertical) / 2 );
+		margin-top: calc( var(--wp--custom--gap--vertical) / 2 );
 	}
 }

geologist/theme.json

@@ -242,7 +242,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -285,14 +285,14 @@
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 					}
 				}
 			},
-			"margin": {
+			"gap": {
 				"baseline": "10px",
-				"horizontal": "20px",
-				"vertical": "30px"
+				"horizontal": "min(20px, 5vw)",
+				"vertical": "min(30px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -314,12 +314,6 @@
 					"lineHeight": "var(--wp--custom--body--typography--line-height)"
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",
-					"right": "min( var(--wp--custom--margin--horizontal), 5vw)"
-				}
-			},
 			"pullquote": {
 				"citation": {
 					"typography": {
@@ -330,7 +324,7 @@
 					},
 					"spacing": {
 						"margin": {
-							"top": "var(--wp--custom--margin--vertical)"
+							"top": "var(--wp--custom--gap--vertical)"
 						}
 					}
 				},
@@ -352,7 +346,7 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "var(--wp--custom--margin--vertical) auto",
+				"margin": "var(--wp--custom--gap--vertical) auto",
 				"width": "150px"
 			},
 			"table": {
@@ -365,7 +359,7 @@
 			"video": {
 				"caption": {
 					"textAlign": "center",
-					"margin": "var(--wp--custom--margin--vertical) auto"
+					"margin": "var(--wp--custom--gap--vertical) auto"
 				}
 			},
 			"line-height": {
@@ -452,10 +446,10 @@
 			"core/code": {
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"border": {
@@ -510,8 +504,8 @@
 					"padding": {
 						"left": "0px",
 						"right": "0px",
-						"top": "var(--wp--custom--margin--horizontal)",
-						"bottom": "var(--wp--custom--margin--horizontal)"
+						"top": "var(--wp--custom--gap--horizontal)",
+						"bottom": "var(--wp--custom--gap--horizontal)"
 					}
 				}
 			},
@@ -543,7 +537,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "calc( var(--wp--custom--margin--horizontal) * 3 )"
+						"left": "calc( var(--wp--custom--gap--horizontal) * 3 )"
 					}
 				},
 				"typography": {
@@ -567,7 +561,7 @@
 			},
 			"list": {
 				"padding": {
-					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+					"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 				}
 			},
 			"core/post-template": {
@@ -600,8 +594,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -614,8 +608,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -628,8 +622,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -642,8 +636,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -656,8 +650,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -670,8 +664,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -682,7 +676,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--margin--vertical)"
+			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

mayland-blocks/assets/theme.css

@@ -22,8 +22,8 @@ body {
 @media screen and (min-width: 1290px) {
 	.site-header .wp-block-column,
 	.site-footer .wp-block-column {
-		padding-left: var(--wp--custom--margin--horizontal);
-		padding-right: var(--wp--custom--margin--horizontal);
+		padding-left: var(--wp--custom--gap--horizontal);
+		padding-right: var(--wp--custom--gap--horizontal);
 	}
 }
 

mayland-blocks/block-template-parts/footer.html

@@ -2,8 +2,8 @@
 <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
-<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+<!-- wp:columns {"verticalAlignment":"center"} -->
+<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
 <div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title {"textColor":"foreground-light","fontSize":"small"} /--></div>
 <!-- /wp:column -->
 

mayland-blocks/block-template-parts/header.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"32px","bottom":"32px"}}},"className":"site-header","layout":{"type":"flex"}} -->
-<div class="wp-block-group alignfull site-header" style="padding-top:32px;padding-bottom:32px">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"32px","bottom":"32px"}}},"className":"site-header","layout":{"type":"flex"}} -->
+<div class="wp-block-group site-header" style="padding-top:32px;padding-bottom:32px">
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
 <!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small","isResponsive":true,"__unstableLocation":"primary"} -->

mayland-blocks/child-theme.json

@@ -78,8 +78,8 @@
 				"background": "var(--wp--preset--color--background)",
 				"selection": "var(--wp--preset--color--selection)"
 			},
-			"margin": {
-				"horizontal": "32px"
+			"gap": {
+				"horizontal": "min(32px, 5vw)"
 			},
 			"width": {
 				"default": "750px",

mayland-blocks/sass/theme.scss

@@ -23,8 +23,8 @@ body {
 @media screen and (min-width: 1290px) {
 	.site-header .wp-block-column,
 	.site-footer .wp-block-column {
-		padding-left: var(--wp--custom--margin--horizontal);
-		padding-right: var(--wp--custom--margin--horizontal);
+		padding-left: var(--wp--custom--gap--horizontal);
+		padding-right: var(--wp--custom--gap--horizontal);
 	}
 }
 

mayland-blocks/theme.json

@@ -159,7 +159,7 @@
 				}
 			],
 			"form": {
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"padding": "calc( 0.5 * var(--wp--custom--gap--horizontal) )",
 				"border": {
 					"color": "#EFEFEF",
 					"radius": "0",
@@ -199,7 +199,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -242,14 +242,14 @@
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 					}
 				}
 			},
-			"margin": {
+			"gap": {
 				"baseline": "10px",
-				"horizontal": "32px",
-				"vertical": "30px"
+				"horizontal": "min(32px, 5vw)",
+				"vertical": "min(30px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -271,12 +271,6 @@
 					"lineHeight": "var(--wp--custom--body--typography--line-height)"
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "20px",
-					"right": "20px"
-				}
-			},
 			"pullquote": {
 				"citation": {
 					"typography": {
@@ -286,7 +280,7 @@
 					},
 					"spacing": {
 						"margin": {
-							"top": "var(--wp--custom--margin--vertical)"
+							"top": "var(--wp--custom--gap--vertical)"
 						}
 					}
 				},
@@ -308,7 +302,7 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "var(--wp--custom--margin--vertical) auto",
+				"margin": "var(--wp--custom--gap--vertical) auto",
 				"width": "150px"
 			},
 			"table": {
@@ -321,7 +315,7 @@
 			"video": {
 				"caption": {
 					"textAlign": "center",
-					"margin": "var(--wp--custom--margin--vertical) auto"
+					"margin": "var(--wp--custom--gap--vertical) auto"
 				}
 			},
 			"width": {
@@ -420,10 +414,10 @@
 			"core/code": {
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"border": {
@@ -465,10 +459,10 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--horizontal)",
-						"bottom": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--horizontal)",
+						"bottom": "var(--wp--custom--gap--horizontal)"
 					}
 				}
 			},
@@ -496,7 +490,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)"
 					}
 				},
 				"typography": {
@@ -519,8 +513,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -533,8 +527,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -547,8 +541,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -561,8 +555,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -575,8 +569,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -589,8 +583,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -601,7 +595,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--margin--vertical)"
+			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

quadrat/assets/theme.css

@@ -432,7 +432,7 @@ ul ul {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	padding: var(--wp--custom--margin--horizontal);
+	padding: var(--wp--custom--gap--horizontal);
 }
 
 .has-primary-background-color {
@@ -490,56 +490,56 @@ textarea:focus {
 	position: relative;
 }
 
-.site-header {
+.wp-site-blocks .site-header {
 	overflow: inherit;
-	padding: 10px 0 60px;
+	padding-top: var(--wp--custom--gap--vertical);
 }
 
-@media (min-width: 782px) {
-	.site-header {
-		padding: var(--wp--custom--post-content--padding--left);
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header {
+		gap: 2px;
 	}
 }
 
-.site-header .wp-block-site-logo {
-	margin-right: var(--wp--custom--margin--horizontal);
+.wp-site-blocks .site-header .wp-block-site-logo {
+	margin-right: var(--wp--custom--gap--horizontal);
 }
 
 @media (max-width: 599px) {
-	.site-header .wp-block-site-logo {
+	.wp-site-blocks .site-header .wp-block-site-logo {
 		flex-basis: 100%;
 		margin: 20px 0;
 		text-align: center;
 	}
 }
 
-.site-header .wp-block-site-logo a > img {
+.wp-site-blocks .site-header .wp-block-site-logo a > img {
 	height: 64px;
 	width: auto;
 }
 
-.site-header .wp-block-site-title {
+.wp-site-blocks .site-header .wp-block-site-title {
 	margin: 0;
 }
 
-.site-header .wp-block-navigation {
+.wp-site-blocks .site-header .wp-block-navigation {
 	margin-left: auto;
 	padding-right: 0;
 }
 
-.site-header .wp-block-site-tagline {
+.wp-site-blocks .site-header .wp-block-site-tagline {
 	margin: 0;
 }
 
 @media (max-width: 599px) {
-	.site-header .wp-block-site-tagline {
+	.wp-site-blocks .site-header .wp-block-site-tagline {
 		padding-left: 0 !important;
 		flex-basis: 100%;
 		order: 10;
 	}
 }
 
-.site-header:before {
+.wp-site-blocks .site-header:before {
 	content: "";
 	background-color: var(--wp--custom--color--secondary);
 	position: absolute;
@@ -551,21 +551,21 @@ textarea:focus {
 }
 
 @media (max-width: 599px) {
-	.site-header:before {
+	.wp-site-blocks .site-header:before {
 		-webkit-clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
 		        clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
 	}
 }
 
 @media (min-width: 600px) {
-	.site-header:before {
+	.wp-site-blocks .site-header:before {
 		-webkit-clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
 		        clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
 	}
 }
 
 @media (min-width: 960px) {
-	.site-header:before {
+	.wp-site-blocks .site-header:before {
 		-webkit-clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
 		        clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
 	}
@@ -615,7 +615,7 @@ textarea:focus {
 }
 
 .wp-block-query .wp-block-post-featured-image {
-	margin-top: calc( var(--wp--custom--margin--vertical) / 2);
+	margin-top: calc( var(--wp--custom--gap--vertical) / 2);
 }
 
 /*# sourceMappingURL=theme.css.map */

quadrat/child-theme.json

@@ -170,9 +170,9 @@
 			"line-height": {
 				"body": 1.7
 			},
-			"margin": {
-				"horizontal": "20px",
-				"vertical": "30px"
+			"gap": {
+				"horizontal": "min(34px, 5vw)",
+				"vertical": "min(34px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -183,12 +183,6 @@
 					}
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",
-					"right": "min( var(--wp--custom--margin--horizontal), 5vw)"
-				}
-			},
 			"quote": {
 				"citation": {
 					"typography": {
@@ -303,7 +297,7 @@
 			},
 			"list": {
 				"padding": {
-					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+					"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 				}
 			},
 			"core/quote": {
@@ -318,7 +312,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "calc( var(--wp--custom--margin--horizontal) * 3 )"
+						"left": "calc( var(--wp--custom--gap--horizontal) * 3 )"
 					}
 				},
 				"typography": {

quadrat/sass/blocks/_pullquote.scss

@@ -1,3 +1,3 @@
 .wp-block-pullquote.is-style-solid-color {
-	padding: var(--wp--custom--margin--horizontal);
+	padding: var(--wp--custom--gap--horizontal);
 }

quadrat/sass/templates/_header.scss

@@ -2,16 +2,17 @@
 	position: relative; // This is needed so that the polygon is stretched across the whole site.
 }
 
-.site-header {
+.wp-site-blocks .site-header {
 	overflow: inherit;
-	padding: 10px 0 60px; // TODO: Maybe replace with a responsive custom variable?
+	padding-top: var(--wp--custom--gap--vertical);
 
-	@include break-medium() {
-		padding: var(--wp--custom--post-content--padding--left);
+	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate) 
+	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY 
+	@include break-small-only() {
+		gap: 2px;
 	}
-
 	.wp-block-site-logo {
-		margin-right: var(--wp--custom--margin--horizontal);
+		margin-right: var(--wp--custom--gap--horizontal);
 
 		@include break-small-only(){
 			flex-basis: 100%;

quadrat/sass/templates/_query.scss

@@ -1,5 +1,5 @@
 .wp-block-query {
 	.wp-block-post-featured-image {
-		margin-top: calc( var(--wp--custom--margin--vertical) / 2 );
+		margin-top: calc( var(--wp--custom--gap--vertical) / 2 );
 	}
 }

quadrat/theme.json

@@ -237,7 +237,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -280,14 +280,14 @@
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 					}
 				}
 			},
-			"margin": {
+			"gap": {
 				"baseline": "10px",
-				"horizontal": "20px",
-				"vertical": "30px"
+				"horizontal": "min(34px, 5vw)",
+				"vertical": "min(34px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -309,12 +309,6 @@
 					"lineHeight": "var(--wp--custom--body--typography--line-height)"
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "min( var(--wp--custom--margin--horizontal), 5vw)",
-					"right": "min( var(--wp--custom--margin--horizontal), 5vw)"
-				}
-			},
 			"pullquote": {
 				"citation": {
 					"typography": {
@@ -325,7 +319,7 @@
 					},
 					"spacing": {
 						"margin": {
-							"top": "var(--wp--custom--margin--vertical)"
+							"top": "var(--wp--custom--gap--vertical)"
 						}
 					}
 				},
@@ -347,7 +341,7 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "var(--wp--custom--margin--vertical) auto",
+				"margin": "var(--wp--custom--gap--vertical) auto",
 				"width": "150px"
 			},
 			"table": {
@@ -360,7 +354,7 @@
 			"video": {
 				"caption": {
 					"textAlign": "center",
-					"margin": "var(--wp--custom--margin--vertical) auto"
+					"margin": "var(--wp--custom--gap--vertical) auto"
 				}
 			},
 			"line-height": {
@@ -447,10 +441,10 @@
 			"core/code": {
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"border": {
@@ -505,8 +499,8 @@
 					"padding": {
 						"left": "0px",
 						"right": "0px",
-						"top": "var(--wp--custom--margin--horizontal)",
-						"bottom": "var(--wp--custom--margin--horizontal)"
+						"top": "var(--wp--custom--gap--horizontal)",
+						"bottom": "var(--wp--custom--gap--horizontal)"
 					}
 				}
 			},
@@ -538,7 +532,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "calc( var(--wp--custom--margin--horizontal) * 3 )"
+						"left": "calc( var(--wp--custom--gap--horizontal) * 3 )"
 					}
 				},
 				"typography": {
@@ -562,7 +556,7 @@
 			},
 			"list": {
 				"padding": {
-					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+					"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 				}
 			},
 			"core/post-template": {
@@ -595,8 +589,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -609,8 +603,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -623,8 +617,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -637,8 +631,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -651,8 +645,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -665,8 +659,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -677,7 +671,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--margin--vertical)"
+			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

seedlet-blocks/assets/theme.css

@@ -37,8 +37,8 @@
 }
 
 .wp-block-latest-posts:not(.is-grid) > li {
-	margin-top: var(--wp--custom--margin--vertical);
-	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--gap--vertical);
+	margin-bottom: var(--wp--custom--gap--vertical);
 }
 
 .wp-block-latest-posts:not(.is-grid) > li:first-child {
@@ -50,7 +50,7 @@
 }
 
 .wp-block-latest-posts.is-grid > li {
-	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-bottom: var(--wp--custom--gap--vertical);
 }
 
 .wp-block-latest-posts.is-grid > li:last-child {
@@ -71,8 +71,8 @@
 }
 
 .wp-block-latest-posts > li > * {
-	margin-top: calc(0.5 * var(--wp--custom--margin--vertical));
-	margin-bottom: calc(0.5 * var(--wp--custom--margin--vertical));
+	margin-top: calc(0.5 * var(--wp--custom--gap--vertical));
+	margin-bottom: calc(0.5 * var(--wp--custom--gap--vertical));
 }
 
 .wp-block-latest-posts > li > *:first-child {
@@ -114,8 +114,8 @@
 		overflow: hidden;
 	}
 	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
-		width: calc(50% - (0.5 * var(--wp--custom--margin--horizontal)));
-		max-width: calc(50% - (0.5 * var(--wp--custom--margin--horizontal)));
+		width: calc(50% - (0.5 * var(--wp--custom--gap--horizontal)));
+		max-width: calc(50% - (0.5 * var(--wp--custom--gap--horizontal)));
 		text-align: right;
 	}
 	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
@@ -126,7 +126,7 @@
 		display: inherit;
 	}
 	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
-		margin-top: var(--wp--custom--margin--vertical);
+		margin-top: var(--wp--custom--gap--vertical);
 		margin-right: 0;
 	}
 	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
@@ -205,7 +205,7 @@ is passed all of the block attributes on the block definition in the template. *
 }
 
 .wp-block-post-comments .commentlist .children > li {
-	padding-top: var(--wp--custom--margin--vertical);
+	padding-top: var(--wp--custom--gap--vertical);
 	border-top: 1px solid var(--wp--custom--form--border--color);
 }
 
@@ -217,8 +217,8 @@ is passed all of the block attributes on the block definition in the template. *
 }
 
 .wp-block-post-comments form p {
-	--wp--custom--margin--vertical: var(--wp--custom--margin--baseline);
-	margin-top: var(--wp--custom--margin--baseline);
+	--wp--custom--gap--vertical: var(--wp--custom--gap--baseline);
+	margin-top: var(--wp--custom--gap--baseline);
 }
 
 .wp-block-post-comments form input[type="submit"] {
@@ -249,7 +249,7 @@ is passed all of the block attributes on the block definition in the template. *
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	padding: var(--wp--custom--margin--horizontal);
+	padding: var(--wp--custom--gap--horizontal);
 }
 
 .wp-block-site-title a {
@@ -267,7 +267,7 @@ is passed all of the block attributes on the block definition in the template. *
  * Author bio
  */
 .author-bio {
-	margin-top: calc(6 * var(--wp--custom--margin--baseline));
+	margin-top: calc(6 * var(--wp--custom--gap--baseline));
 }
 
 .author-bio .wp-block-post-navigation-link,
@@ -280,7 +280,7 @@ is passed all of the block attributes on the block definition in the template. *
 }
 
 .wp-block-post-navigation-links {
-	margin-top: calc(9 * var(--wp--custom--margin--baseline));
+	margin-top: calc(9 * var(--wp--custom--gap--baseline));
 }
 
 .wp-block-post-navigation-links .wp-block-post-navigation-link-byline {

seedlet-blocks/child-theme.json

@@ -102,7 +102,7 @@
 					}
 				}
 			},
-			"margin": {
+			"gap": {
 				"horizontal": "25px",
 				"vertical": "30px"
 			},
@@ -116,7 +116,7 @@
 				}
 			},
 			"separator": {
-				"margin": "calc( 9 * var(--wp--custom--margin--baseline) ) auto calc(2 * var(--wp--custom--margin--baseline) )"
+				"margin": "calc( 9 * var(--wp--custom--gap--baseline) ) auto calc(2 * var(--wp--custom--gap--baseline) )"
 			}
 		},
 		"layout": {
@@ -193,8 +193,8 @@
 					"padding": {
 						"left": 0,
 						"right": 0,
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"typography": {

seedlet-blocks/sass/blocks/_latest-posts.scss

@@ -6,8 +6,8 @@
 
 	// Vertical margins logic
 	&:not(.is-grid) > li {
-		margin-top: var(--wp--custom--margin--vertical);
-		margin-bottom: var(--wp--custom--margin--vertical);
+		margin-top: var(--wp--custom--gap--vertical);
+		margin-bottom: var(--wp--custom--gap--vertical);
 
 		&:first-child {
 			margin-top: 0;
@@ -21,7 +21,7 @@
 	&.is-grid {
 
 		& > li {
-			margin-bottom: var(--wp--custom--margin--vertical);
+			margin-bottom: var(--wp--custom--gap--vertical);
 
 			&:last-child {
 				margin-bottom: 0;
@@ -44,8 +44,8 @@
 	}
 
 	& > li > * {
-		margin-top: calc(0.5 * var(--wp--custom--margin--vertical));
-		margin-bottom: calc(0.5 * var(--wp--custom--margin--vertical));
+		margin-top: calc(0.5 * var(--wp--custom--gap--vertical));
+		margin-bottom: calc(0.5 * var(--wp--custom--gap--vertical));
 
 		&:first-child {
 			margin-top: 0;
@@ -93,8 +93,8 @@
 		overflow: hidden;
 
 		> li {
-			width: calc(50% - (0.5 * var(--wp--custom--margin--horizontal)));
-			max-width: calc(50% - (0.5 * var(--wp--custom--margin--horizontal)));
+			width: calc(50% - (0.5 * var(--wp--custom--gap--horizontal)));
+			max-width: calc(50% - (0.5 * var(--wp--custom--gap--horizontal)));
 			text-align: right;
 
 			&:nth-child(2n + 1) {
@@ -108,7 +108,7 @@
 			display: inherit;
 
 			> li {
-				margin-top: var(--wp--custom--margin--vertical);
+				margin-top: var(--wp--custom--gap--vertical);
 				margin-right: 0;
 
 				&:first-child {

seedlet-blocks/sass/blocks/_post-comments.scss

@@ -32,7 +32,7 @@
 
 		.children {
 			> li {
-				padding-top: var(--wp--custom--margin--vertical);
+				padding-top: var(--wp--custom--gap--vertical);
 				border-top: 1px solid var(--wp--custom--form--border--color);
 			}
 
@@ -50,8 +50,8 @@
 
 	form {
 		p {
-			--wp--custom--margin--vertical: var(--wp--custom--margin--baseline);
-			margin-top: var(--wp--custom--margin--baseline);
+			--wp--custom--gap--vertical: var(--wp--custom--gap--baseline);
+			margin-top: var(--wp--custom--gap--baseline);
 		}
 
 		input[type="submit"] {

seedlet-blocks/sass/blocks/_pullquote.scss

@@ -1,3 +1,3 @@
 .wp-block-pullquote.is-style-solid-color {
-	padding: var(--wp--custom--margin--horizontal);
+	padding: var(--wp--custom--gap--horizontal);
 }

seedlet-blocks/sass/theme.scss

@@ -9,7 +9,7 @@
  * Author bio
  */
 .author-bio {
-	margin-top: calc(6 * var(--wp--custom--margin--baseline) );
+	margin-top: calc(6 * var(--wp--custom--gap--baseline) );
 }
 
 .author-bio .wp-block-post-navigation-link,
@@ -22,7 +22,7 @@
 }
 
 .wp-block-post-navigation-links {
-	margin-top: calc(9 * var(--wp--custom--margin--baseline));
+	margin-top: calc(9 * var(--wp--custom--gap--baseline));
 }
 
 .wp-block-post-navigation-links .wp-block-post-navigation-link-byline {

seedlet-blocks/theme.json

@@ -192,7 +192,7 @@
 				}
 			],
 			"form": {
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"padding": "calc( 0.5 * var(--wp--custom--gap--horizontal) )",
 				"border": {
 					"color": "#EFEFEF",
 					"radius": "0",
@@ -232,7 +232,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -275,11 +275,11 @@
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 					}
 				}
 			},
-			"margin": {
+			"gap": {
 				"baseline": "10px",
 				"horizontal": "25px",
 				"vertical": "30px"
@@ -304,12 +304,6 @@
 					"lineHeight": "var(--wp--custom--body--typography--line-height)"
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "20px",
-					"right": "20px"
-				}
-			},
 			"pullquote": {
 				"citation": {
 					"typography": {
@@ -341,7 +335,7 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "calc( 9 * var(--wp--custom--margin--baseline) ) auto calc(2 * var(--wp--custom--margin--baseline) )",
+				"margin": "calc( 9 * var(--wp--custom--gap--baseline) ) auto calc(2 * var(--wp--custom--gap--baseline) )",
 				"width": "150px"
 			},
 			"table": {
@@ -354,7 +348,7 @@
 			"video": {
 				"caption": {
 					"textAlign": "center",
-					"margin": "var(--wp--custom--margin--vertical) auto"
+					"margin": "var(--wp--custom--gap--vertical) auto"
 				}
 			}
 		},
@@ -449,10 +443,10 @@
 			"core/code": {
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"border": {
@@ -498,8 +492,8 @@
 					"padding": {
 						"left": 0,
 						"right": 0,
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -530,7 +524,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)"
 					}
 				},
 				"typography": {
@@ -553,8 +547,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -567,8 +561,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -581,8 +575,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -595,8 +589,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -609,8 +603,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -623,8 +617,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -635,7 +629,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--margin--vertical)"
+			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",

skatepark/assets/theme.css

@@ -44,8 +44,8 @@
 }
 
 p {
-	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
-	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
+	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
 }
 
 .wp-block-post-author__content {
@@ -125,8 +125,8 @@ p {
 }
 
 .wp-block-cover.alignfull {
-	padding-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--post-content--padding--left), var(--wp--custom--post-content--padding--left) ));
-	padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--post-content--padding--left), var(--wp--custom--post-content--padding--left) ));
+	padding-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
+	padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
 }
 
 .wp-block-post-comments .reply a {
@@ -140,7 +140,7 @@ p {
 }
 
 .wp-block-post-comments .comment-reply-title {
-	margin-bottom: calc( 2 * var(--wp--custom--margin--baseline));
+	margin-bottom: calc( 2 * var(--wp--custom--gap--baseline));
 }
 
 .wp-block-post-comments .comment-author cite {
@@ -177,7 +177,7 @@ p {
 
 h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 	border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
-	padding-bottom: calc( var(--wp--custom--margin--vertical) * 2);
+	padding-bottom: calc( var(--wp--custom--gap--vertical) * 2);
 	margin-bottom: 0;
 }
 
@@ -281,16 +281,16 @@ h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 }
 
 .is-style-skatepark-aside-caption.alignfull figcaption {
-	margin-left: var(--wp--custom--post-content--padding--left);
-	margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--post-content--padding--left) ));
+	margin-left: var(--wp--custom--gap--horizontal);
+	margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--gap--horizontal) ));
 }
 
 .wp-block-quote.is-style-side-quote {
 	/* Needs .wp-block-quote class to override editor styles */
 	border: 0;
 	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
-	margin: calc( var(--wp--custom--margin--vertical) * 1.5) 0;
-	padding: calc( var(--wp--custom--margin--baseline) * 1.35) 0 0 0;
+	margin: calc( var(--wp--custom--gap--vertical) * 1.5) 0;
+	padding: calc( var(--wp--custom--gap--baseline) * 1.35) 0 0 0;
 }
 
 .wp-block-quote.is-style-side-quote cite {
@@ -302,7 +302,7 @@ h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 .wp-block-quote.is-style-side-quote p, .wp-block-quote.is-style-side-quote div.block-editor-rich-text__editable {
 	font-size: var(--wp--preset--font-size--medium);
 	line-height: 1.4em;
-	margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
+	margin-bottom: calc( var(--wp--custom--gap--baseline) * 0.68);
 }
 
 .wp-block-quote.is-style-testimonial-quote {
@@ -310,15 +310,15 @@ h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 	border: 0;
 	display: flex;
 	flex-direction: row-reverse;
-	gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
-	margin: calc( var(--wp--custom--margin--vertical) * 1.78) 0;
+	gap: calc( var(--wp--custom--gap--horizontal) * 1.6);
+	margin: calc( var(--wp--custom--gap--vertical) * 1.78) 0;
 	padding-left: 0;
 }
 
 @media (max-width: 599px) {
 	.wp-block-quote.is-style-testimonial-quote {
 		flex-direction: column;
-		gap: calc( var(--wp--custom--margin--vertical) * 0.75);
+		gap: calc( var(--wp--custom--gap--vertical) * 0.75);
 	}
 }
 
@@ -330,7 +330,7 @@ h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 	font-style: normal;
 	font-weight: 500;
 	margin-top: 1.5ex;
-	padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
+	padding-top: calc( var(--wp--custom--gap--baseline) * 1.35);
 	text-align: right;
 }
 
@@ -363,11 +363,11 @@ h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 }
 
 .paragraph-with-quote h4 {
-	margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89) 0;
+	margin: 0 0 calc( var(--wp--custom--gap--vertical) * 0.89) 0;
 }
 
 .paragraph-with-quote div:nth-child(2) p {
-	margin: calc( var(--wp--custom--margin--baseline) * 1.55) 0 0 0;
+	margin: calc( var(--wp--custom--gap--baseline) * 1.55) 0 0 0;
 }
 
 h1.is-style-skatepark-heading-border, h2.is-style-skatepark-heading-border, h3.is-style-skatepark-heading-border, h4.is-style-skatepark-heading-border, h5.is-style-skatepark-heading-border, h6.is-style-skatepark-heading-border {
@@ -490,7 +490,7 @@ header.wp-block-template-part > .wp-block-group {
 
 @media (max-width: 599px) {
 	header.wp-block-template-part > .wp-block-group {
-		grid-row-gap: calc( 0.25 * var(--wp--custom--margin--vertical));
+		grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical));
 		display: grid;
 		grid-template-areas: "brand menu" "social social";
 		border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
@@ -502,14 +502,14 @@ header.wp-block-template-part > .wp-block-group > * {
 }
 
 header.wp-block-template-part > .wp-block-group > * > * {
-	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
-	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
+	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
 }
 
 @media (max-width: 599px) {
 	header.wp-block-template-part > .wp-block-group > * > * {
-		margin-top: calc( 0.125 * var(--wp--custom--margin--vertical));
-		margin-bottom: calc( 0.125 * var(--wp--custom--margin--vertical));
+		margin-top: calc( 0.125 * var(--wp--custom--gap--vertical));
+		margin-bottom: calc( 0.125 * var(--wp--custom--gap--vertical));
 	}
 }
 
@@ -535,9 +535,9 @@ header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-
 }
 
 header.wp-block-template-part .site-brand {
-	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
 	display: grid;
-	grid-column-gap: var(--wp--custom--margin--horizontal);
+	grid-column-gap: var(--wp--custom--gap--horizontal);
 	grid-template-areas: "logo title" "logo tagline";
 	grid-template-columns: auto 1fr;
 }
@@ -558,7 +558,7 @@ header.wp-block-template-part .site-brand .wp-block-site-logo {
 
 @media (max-width: 599px) {
 	header.wp-block-template-part .site-brand .wp-block-site-logo {
-		margin-bottom: calc( 0.75 * var(--wp--custom--margin--vertical));
+		margin-bottom: calc( 0.75 * var(--wp--custom--gap--vertical));
 	}
 }
 
@@ -580,7 +580,7 @@ header.wp-block-template-part .site-brand .wp-block-site-tagline {
 
 @media (max-width: 599px) {
 	header.wp-block-template-part .site-brand .wp-block-site-tagline {
-		margin-bottom: calc( 0.25 * var(--wp--custom--margin--vertical));
+		margin-bottom: calc( 0.25 * var(--wp--custom--gap--vertical));
 	}
 }
 
@@ -589,7 +589,7 @@ header.wp-block-template-part .site-brand .wp-block-site-tagline {
 		display: contents;
 	}
 	.nav-links .wp-block-navigation__responsive-container-open {
-		margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) - 3px);
+		margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) - 3px);
 	}
 	.nav-links .wp-block-navigation {
 		grid-area: menu;
@@ -603,8 +603,8 @@ header.wp-block-template-part .site-brand .wp-block-site-tagline {
 .archive .wp-block-post-excerpt__excerpt,
 .blog .wp-block-post-excerpt__excerpt,
 .home .wp-block-post-excerpt__excerpt {
-	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
-	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
+	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
 }
 
 .archive .wp-block-post-date,
@@ -618,7 +618,7 @@ header.wp-block-template-part .site-brand .wp-block-site-tagline {
 .archive .wp-block-query .wp-block-post-title,
 .blog .wp-block-query .wp-block-post-title,
 .home .wp-block-query .wp-block-post-title {
-	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical));
 }
 
 .wp-block-post-excerpt__more-link {

skatepark/child-theme.json

@@ -170,7 +170,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -180,7 +180,7 @@
 						"textTransform": "uppercase"
 					}
 				},
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"padding": "calc( 0.5 * var(--wp--custom--gap--horizontal) )",
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
@@ -197,13 +197,8 @@
 			"line-height": {
 				"body": 1.6
 			},
-			"margin": {
-				"baseline": "15px",
-				"horizontal": "30px",
-				"vertical": "40px"
-			},
 			"separator": {
-				"margin": "calc( 0.5 * var(--wp--custom--margin--vertical) ) auto"
+				"margin": "calc( 0.5 * var(--wp--custom--gap--vertical) ) auto"
 			}
 		},
 		"layout": {
@@ -332,8 +327,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "calc( 1.1 * var(--wp--custom--margin--vertical) )",
-						"bottom": "calc( 1.1 * var(--wp--custom--margin--vertical) )"
+						"top": "calc( 1.1 * var(--wp--custom--gap--vertical) )",
+						"bottom": "calc( 1.1 * var(--wp--custom--gap--vertical) )"
 					}
 				}
 			},

skatepark/sass/base/_text.scss

@@ -4,6 +4,6 @@
 }
 
 p {
-	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
-	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
+	margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
 }

skatepark/sass/block-patterns/_paragraph-with-quote.scss

@@ -1,11 +1,11 @@
 .paragraph-with-quote {
     h4 {
-        margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89 ) 0;
+        margin: 0 0 calc( var(--wp--custom--gap--vertical) * 0.89 ) 0;
     }
 
     div:nth-child(2) {    
         p {
-            margin: calc( var(--wp--custom--margin--baseline) * 1.55 ) 0 0 0;
+            margin: calc( var(--wp--custom--gap--baseline) * 1.55 ) 0 0 0;
         }
     }
 }

skatepark/sass/block-styles/_image-caption.scss

@@ -19,7 +19,7 @@
 	}
 
 	&.alignfull figcaption {
-		margin-left: var(--wp--custom--post-content--padding--left);
-		margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--post-content--padding--left) ) );
+		margin-left: var(--wp--custom--gap--horizontal);
+		margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--gap--horizontal) ) );
 	}
 }

skatepark/sass/block-styles/_side-quote.scss

@@ -1,8 +1,8 @@
 .wp-block-quote.is-style-side-quote { /* Needs .wp-block-quote class to override editor styles */
 	border: 0;
 	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
-	margin: calc( var(--wp--custom--margin--vertical) * 1.5) 0;
-	padding: calc( var(--wp--custom--margin--baseline) * 1.35) 0 0 0;
+	margin: calc( var(--wp--custom--gap--vertical) * 1.5) 0;
+	padding: calc( var(--wp--custom--gap--baseline) * 1.35) 0 0 0;
 
 	cite {
 		font-size: var(--wp--preset--font-size--normal);
@@ -13,6 +13,6 @@
 	p, div.block-editor-rich-text__editable {
 		font-size: var(--wp--preset--font-size--medium);
 		line-height: 1.4em;
-		margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
+		margin-bottom: calc( var(--wp--custom--gap--baseline) * 0.68);
 	}
 }

skatepark/sass/block-styles/_testimonial-quote.scss

@@ -2,13 +2,13 @@
 	border: 0;
 	display: flex;
 	flex-direction: row-reverse;
-	gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
-	margin: calc( var(--wp--custom--margin--vertical) * 1.78) 0;
+	gap: calc( var(--wp--custom--gap--horizontal) * 1.6);
+	margin: calc( var(--wp--custom--gap--vertical) * 1.78) 0;
 	padding-left: 0;
 
 	@include break-small-only() {
 		flex-direction: column;
-		gap: calc( var(--wp--custom--margin--vertical) * 0.75);
+		gap: calc( var(--wp--custom--gap--vertical) * 0.75);
 	}
 
 	cite {
@@ -19,7 +19,7 @@
 		font-style: normal;
 		font-weight: 500;
 		margin-top: 1.5ex;
-		padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
+		padding-top: calc( var(--wp--custom--gap--baseline) * 1.35);
 		text-align: right;
 
 		@include break-small-only() {

skatepark/sass/blocks/_cover.scss

@@ -1,6 +1,6 @@
 .wp-block-cover {
 	&.alignfull {
-		padding-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--post-content--padding--left), var(--wp--custom--post-content--padding--left) ));
-		padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--post-content--padding--left), var(--wp--custom--post-content--padding--left) ));
+		padding-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
+		padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
 	}
 }

skatepark/sass/blocks/_post-comments.scss

@@ -11,7 +11,7 @@
 	}
 
 	.comment-reply-title {
-		margin-bottom: calc( 2 * var(--wp--custom--margin--baseline));
+		margin-bottom: calc( 2 * var(--wp--custom--gap--baseline));
 	}
 
 	.comment-author {

skatepark/sass/blocks/_post-title.scss

@@ -1,5 +1,5 @@
 h1.wp-block-post-title:not(.has-featured-image .wp-block-post-title) {
 	border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
-	padding-bottom: calc( var(--wp--custom--margin--vertical) * 2 );
+	padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
 	margin-bottom: 0;
 }

skatepark/sass/templates/_header.scss

@@ -9,7 +9,7 @@ header.wp-block-template-part {
 		align-items: flex-start;
 
 		@include break-small-only(){
-			grid-row-gap: calc( 0.25 * var(--wp--custom--margin--vertical) );
+			grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical) );
 			display: grid;
 			grid-template-areas: 
 				"brand menu"
@@ -19,11 +19,11 @@ header.wp-block-template-part {
 		> * {
 			flex-grow: 1; // Needed to maintain alignment when the containers stack
 			> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
-				margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
-				margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+				margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
+				margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
 				@include break-small-only(){
-					margin-top: calc( 0.125 * var(--wp--custom--margin--vertical) );
-					margin-bottom: calc( 0.125 * var(--wp--custom--margin--vertical) );
+					margin-top: calc( 0.125 * var(--wp--custom--gap--vertical) );
+					margin-bottom: calc( 0.125 * var(--wp--custom--gap--vertical) );
 				}
 			}
 		}
@@ -44,9 +44,9 @@ header.wp-block-template-part {
 	}
 
 	.site-brand {
-		margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
+		margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
 		display: grid;
-		grid-column-gap: var(--wp--custom--margin--horizontal);
+		grid-column-gap: var(--wp--custom--gap--horizontal);
 		grid-template-areas: 
 			"logo title"
 			"logo tagline";
@@ -64,7 +64,7 @@ header.wp-block-template-part {
 			max-width: 120px;
 			align-self: center;
 			@include break-small-only(){
-				margin-bottom: calc( 0.75 * var(--wp--custom--margin--vertical) );
+				margin-bottom: calc( 0.75 * var(--wp--custom--gap--vertical) );
 			}
 		}
 		.wp-block-site-title {
@@ -78,7 +78,7 @@ header.wp-block-template-part {
 			grid-area: tagline;
 			margin: 0;
 			@include break-small-only(){
-				margin-bottom: calc( 0.25 * var(--wp--custom--margin--vertical) );
+				margin-bottom: calc( 0.25 * var(--wp--custom--gap--vertical) );
 			}
 		}
 	}
@@ -88,7 +88,7 @@ header.wp-block-template-part {
 	.nav-links {
 		display: contents;
 		.wp-block-navigation__responsive-container-open {
-			margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) - 3px );
+			margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) - 3px );
 		}
 		.wp-block-navigation {
 			grid-area: menu;

skatepark/sass/templates/_index.scss

@@ -2,15 +2,15 @@
 .blog,
 .home {
 	.wp-block-post-excerpt__excerpt {
-		margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
-		margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+		margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
+		margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
 	}
 	.wp-block-post-date {
 		text-decoration: underline;
 		@include text-decoration;
 	}
 	.wp-block-query .wp-block-post-title{
-		margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+		margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
 	}
 }
 

skatepark/theme.json

@@ -193,7 +193,7 @@
 				}
 			],
 			"form": {
-				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",
+				"padding": "calc( 0.5 * var(--wp--custom--gap--horizontal) )",
 				"border": {
 					"color": "var(--wp--custom--color--primary)",
 					"radius": "0",
@@ -233,7 +233,7 @@
 				"label": {
 					"spacing": {
 						"margin": {
-							"bottom": "var(--wp--custom--margin--baseline)"
+							"bottom": "var(--wp--custom--gap--baseline)"
 						}
 					},
 					"typography": {
@@ -277,14 +277,14 @@
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "calc( 2 * var(--wp--custom--gap--horizontal) )"
 					}
 				}
 			},
-			"margin": {
-				"baseline": "15px",
-				"horizontal": "30px",
-				"vertical": "40px"
+			"gap": {
+				"baseline": "10px",
+				"horizontal": "min(30px, 5vw)",
+				"vertical": "min(30px, 5vw)"
 			},
 			"paragraph": {
 				"dropcap": {
@@ -306,12 +306,6 @@
 					"lineHeight": "var(--wp--custom--body--typography--line-height)"
 				}
 			},
-			"post-content": {
-				"padding": {
-					"left": "20px",
-					"right": "20px"
-				}
-			},
 			"pullquote": {
 				"citation": {
 					"typography": {
@@ -321,7 +315,7 @@
 					},
 					"spacing": {
 						"margin": {
-							"top": "var(--wp--custom--margin--vertical)"
+							"top": "var(--wp--custom--gap--vertical)"
 						}
 					}
 				},
@@ -343,7 +337,7 @@
 			},
 			"separator": {
 				"opacity": 1,
-				"margin": "calc( 0.5 * var(--wp--custom--margin--vertical) ) auto",
+				"margin": "calc( 0.5 * var(--wp--custom--gap--vertical) ) auto",
 				"width": "150px"
 			},
 			"table": {
@@ -356,7 +350,7 @@
 			"video": {
 				"caption": {
 					"textAlign": "center",
-					"margin": "var(--wp--custom--margin--vertical) auto"
+					"margin": "var(--wp--custom--gap--vertical) auto"
 				}
 			},
 			"fontsToLoadFromGoogle": [
@@ -448,10 +442,10 @@
 			"core/code": {
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				},
 				"border": {
@@ -501,10 +495,10 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)",
-						"right": "var(--wp--custom--margin--horizontal)",
-						"top": "var(--wp--custom--margin--horizontal)",
-						"bottom": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)",
+						"right": "var(--wp--custom--gap--horizontal)",
+						"top": "var(--wp--custom--gap--horizontal)",
+						"bottom": "var(--wp--custom--gap--horizontal)"
 					}
 				}
 			},
@@ -534,7 +528,7 @@
 				},
 				"spacing": {
 					"padding": {
-						"left": "var(--wp--custom--margin--horizontal)"
+						"left": "var(--wp--custom--gap--horizontal)"
 					}
 				},
 				"typography": {
@@ -572,8 +566,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "calc( 1.1 * var(--wp--custom--margin--vertical) )",
-						"bottom": "calc( 1.1 * var(--wp--custom--margin--vertical) )"
+						"top": "calc( 1.1 * var(--wp--custom--gap--vertical) )",
+						"bottom": "calc( 1.1 * var(--wp--custom--gap--vertical) )"
 					}
 				}
 			},
@@ -586,8 +580,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -600,8 +594,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -616,8 +610,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -632,8 +626,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -648,8 +642,8 @@
 				},
 				"spacing": {
 					"margin": {
-						"top": "var(--wp--custom--margin--vertical)",
-						"bottom": "var(--wp--custom--margin--vertical)"
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
 					}
 				}
 			},
@@ -660,7 +654,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "var(--wp--custom--margin--vertical)"
+			"blockGap": "var(--wp--custom--gap--vertical)"
 		},
 		"typography": {
 			"lineHeight": "var(--wp--custom--body--typography--line-height)",