Add support for backgrounds on heading blocks. See: WordPress/gutenbe…

…rg#6012
justintadlock · May 21, 2019 · 107b459 · 107b459
1 parent 7289a9d
commit 107b459
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 4 deletions.
diff --git a/public/css/editor.css b/public/css/editor.css
diff --git a/public/css/screen.css b/public/css/screen.css
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,8 +1,8 @@
 {
     "/js/app.js": "/js/app.js?id=20aa78c3a44b56123fde",
-    "/css/screen.css": "/css/screen.css?id=5caaaf91bd55108761ed",
+    "/css/screen.css": "/css/screen.css?id=7de03705a2993b04e9d3",
     "/css/screen-classic.css": "/css/screen-classic.css?id=3128a96645df6e81d928",
-    "/css/editor.css": "/css/editor.css?id=0fffffbcc1f726cd88cc",
+    "/css/editor.css": "/css/editor.css?id=6ee6fe23cdcb32a3e391",
     "/css/customize-controls.css": "/css/customize-controls.css?id=c1ec7bf0f3429f0596ed",
     "/js/customize-controls.js": "/js/customize-controls.js?id=1fd2d6fe20d98f7338c5",
     "/js/customize-preview.js": "/js/customize-preview.js?id=8eb220d6312c648959ce",

diff --git a/resources/scss/blocks/__index.scss b/resources/scss/blocks/__index.scss
@@ -22,6 +22,7 @@
 @import 'core/file';
 @import 'core/gallery';
 @import 'core/group';
+@import 'core/heading';
 @import 'core/image';
 @import 'core/latest-comments';
 @import 'core/latest-posts';

diff --git a/resources/scss/blocks/core/_heading.scss b/resources/scss/blocks/core/_heading.scss
@@ -0,0 +1,11 @@
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	&.has-background {
+		padding: $spacing-global;
+	}
+}
diff --git a/resources/scss/editor.scss b/resources/scss/editor.scss
@@ -142,6 +142,20 @@
 	}
 }
 
+// Bump out width via negative margins for heading block.
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	&.has-background {
+		margin-left: -#{ $spacing-global };
+		margin-right: -#{ $spacing-global };
+	}
+}
+
 // Class is used in the editor but not the front end.
 // Copied from `/elements/_quotes.scsss` and `/blocks/core/_pullquote.scss`.