Added configurable padding for paragraphs and headings when they have background colors. (#4180)

* Added configurable padding for paragraphs and headings when they have background colors.

* refactored has-background to use existing margin values

* Removed unused margin values

* simplified CSS

* Update blockbase/sass/base/_header.scss

* Update blockbase/sass/blocks/_paragraph.scss

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

blockbase/assets/ponyfill.css

@@ -99,6 +99,10 @@ 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--vertical);
+}
+
 ::selection {
 	background-color: var(--wp--custom--color--selection);
 }
@@ -365,6 +369,10 @@ 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--vertical);
+}
+
 .wp-block-post-author__name {
 	font-weight: var(--wp--custom--post-author--font-weight);
 }

blockbase/sass/base/_header.scss

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

blockbase/sass/blocks/_paragraph.scss

@@ -12,4 +12,8 @@ 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);
+	}
 }