Browse Source

Modern Business: Set editor background color for FSE (#1219)

Set editor background color for FSE
Noah Allen 5 years ago
parent
commit
5b4c337283

+ 1 - 0
modern-business/style-editor.css

@@ -924,6 +924,7 @@ blockquote {
 /** === Editor Frame === */
 body {
   font-weight: 300;
+  background: #fff;
 }
 
 body .wp-block[data-align="full"] {

+ 3 - 1
modern-business/style-editor.scss

@@ -33,9 +33,11 @@ Modern Business Editor Styles
 }
 
 /** === Editor Frame === */
-
+// Targets just the editor frame area, not outside it.
+// See https://github.com/WordPress/gutenberg/blob/0ad0414e7a469254ef1ad105fdcf14248a986686/docs/designers-developers/developers/themes/theme-support.md#editor-styles
 body {
 	font-weight: 300;
+	background: $color__background-body;
 
 	.wp-block[data-align="full"] {
 		width: 100%;

+ 15 - 3
modern-business/style-rtl.css

@@ -4649,17 +4649,29 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
 }
 
 .entry .entry-content .wp-block-cover-image h2.has-text-align-left,
-.entry .entry-content .wp-block-cover h2.has-text-align-left {
+.entry .entry-content .wp-block-cover h2.has-text-align-left,
+.fse-enabled .site-header .wp-block-cover-image h2.has-text-align-left,
+.fse-enabled .site-header .wp-block-cover h2.has-text-align-left,
+.fse-enabled .site-footer .wp-block-cover-image h2.has-text-align-left,
+.fse-enabled .site-footer .wp-block-cover h2.has-text-align-left {
   text-align: right;
 }
 
 .entry .entry-content .wp-block-cover-image h2.has-text-align-center,
-.entry .entry-content .wp-block-cover h2.has-text-align-center {
+.entry .entry-content .wp-block-cover h2.has-text-align-center,
+.fse-enabled .site-header .wp-block-cover-image h2.has-text-align-center,
+.fse-enabled .site-header .wp-block-cover h2.has-text-align-center,
+.fse-enabled .site-footer .wp-block-cover-image h2.has-text-align-center,
+.fse-enabled .site-footer .wp-block-cover h2.has-text-align-center {
   text-align: center;
 }
 
 .entry .entry-content .wp-block-cover-image h2.has-text-align-right,
-.entry .entry-content .wp-block-cover h2.has-text-align-right {
+.entry .entry-content .wp-block-cover h2.has-text-align-right,
+.fse-enabled .site-header .wp-block-cover-image h2.has-text-align-right,
+.fse-enabled .site-header .wp-block-cover h2.has-text-align-right,
+.fse-enabled .site-footer .wp-block-cover-image h2.has-text-align-right,
+.fse-enabled .site-footer .wp-block-cover h2.has-text-align-right {
   text-align: left;
 }
 

+ 15 - 3
modern-business/style.css

@@ -4661,17 +4661,29 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
 }
 
 .entry .entry-content .wp-block-cover-image h2.has-text-align-left,
-.entry .entry-content .wp-block-cover h2.has-text-align-left {
+.entry .entry-content .wp-block-cover h2.has-text-align-left,
+.fse-enabled .site-header .wp-block-cover-image h2.has-text-align-left,
+.fse-enabled .site-header .wp-block-cover h2.has-text-align-left,
+.fse-enabled .site-footer .wp-block-cover-image h2.has-text-align-left,
+.fse-enabled .site-footer .wp-block-cover h2.has-text-align-left {
   text-align: left;
 }
 
 .entry .entry-content .wp-block-cover-image h2.has-text-align-center,
-.entry .entry-content .wp-block-cover h2.has-text-align-center {
+.entry .entry-content .wp-block-cover h2.has-text-align-center,
+.fse-enabled .site-header .wp-block-cover-image h2.has-text-align-center,
+.fse-enabled .site-header .wp-block-cover h2.has-text-align-center,
+.fse-enabled .site-footer .wp-block-cover-image h2.has-text-align-center,
+.fse-enabled .site-footer .wp-block-cover h2.has-text-align-center {
   text-align: center;
 }
 
 .entry .entry-content .wp-block-cover-image h2.has-text-align-right,
-.entry .entry-content .wp-block-cover h2.has-text-align-right {
+.entry .entry-content .wp-block-cover h2.has-text-align-right,
+.fse-enabled .site-header .wp-block-cover-image h2.has-text-align-right,
+.fse-enabled .site-header .wp-block-cover h2.has-text-align-right,
+.fse-enabled .site-footer .wp-block-cover-image h2.has-text-align-right,
+.fse-enabled .site-footer .wp-block-cover h2.has-text-align-right {
   text-align: right;
 }