Blockbase: Fix padding for the Group block with a background (#4629)

* Blockbase: Fix padding for the Group block with a background. Closes #4617

* Blockbase: Make sure Group spacing uses correct variables

* Add a general rule for has-background padding

* Remove the margin from the last child in a block with background color

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blockbase/assets/ponyfill.css

@@ -155,10 +155,6 @@ img {
 	text-decoration: none;
 }
 
-h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
-	padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
-}
-
 :root {
 	--wpadmin-bar--height: 46px;
 }
@@ -204,6 +200,14 @@ p {
 	padding: 0;
 }
 
+.has-background {
+	padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
+}
+
+.has-background :last-child {
+	margin-bottom: 0;
+}
+
 /**
  * Elements
  * - Styles for basic HTML elemants
@@ -429,10 +433,6 @@ p.has-drop-cap:not(:focus):first-letter {
 	margin: var(--wp--custom--paragraph--dropcap--margin);
 }
 
-p.has-background {
-	padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
-}
-
 .wp-block-post-author__name {
 	font-weight: var(--wp--custom--post-author--font-weight);
 }

blockbase/functions.php

@@ -106,7 +106,7 @@ function blockbase_fonts_url() {
 			}
 		}
 	}
-	
+
 	if ( empty( $font_families ) ) {
 		return '';
 	}

blockbase/sass/base/_header.scss

@@ -6,9 +6,3 @@
 		text-decoration: none;
 	}
 }
-
-h1, h2, h3, h4, h5, h6 {
-	&.has-background {
-		padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
-	}
-}

blockbase/sass/base/_utility.scss

@@ -12,3 +12,12 @@
 .has-background-no-padding.wp-block-columns.has-background {
 	padding: 0;
 }
+
+// Needed until we have a solution for https://github.com/WordPress/gutenberg/issues/34588.
+.has-background {
+	padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
+
+	:last-child {
+		margin-bottom: 0;
+	}
+}

blockbase/sass/blocks/_paragraph.scss

@@ -9,8 +9,4 @@ p {
 		font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
 		margin: var(--wp--custom--paragraph--dropcap--margin);
 	}
-
-	&.has-background {
-		padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
-	}
 }

blockbase/theme.json

@@ -404,6 +404,14 @@
 					}
 				}
 			},
+			"core/group": {
+				"spacing": {
+					"margin": {
+						"top": "var(--wp--custom--gap--vertical)",
+						"bottom": "var(--wp--custom--gap--vertical)"
+					}
+				}
+			},
 			"core/navigation": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)"