Merge pull request #1200 from Automattic/fix/1190-sophisticated-business-missing-editor-palette

Sophisticated Business: Add missing editor color palette support

sophisticated-business/functions.php

@@ -34,6 +34,38 @@ function sophisticated_business_setup() {
 			'header-text' => array( 'site-title' ),
 		)
 	);
+
+	// Editor color palette.
+	add_theme_support(
+		'editor-color-palette',
+		array(
+			array(
+				'name'  => __( 'Primary', 'sophisticated-business' ),
+				'slug'  => 'primary',
+				'color' => '#caab57', // $color__link
+			),
+			array(
+				'name'  => __( 'Secondary', 'sophisticated-business' ),
+				'slug'  => 'secondary',
+				'color' => '#b59439', // $color__border-link-hover
+			),
+			array(
+				'name'  => __( 'Dark Gray', 'sophisticated-business' ),
+				'slug'  => 'dark-gray',
+				'color' => '#1c1c1c', // $color__text-screen
+			),
+			array(
+				'name'  => __( 'Light Gray', 'sophisticated-business' ),
+				'slug'  => 'light-gray',
+				'color' => '#cccccc', // $color__text-light
+			),
+			array(
+				'name'  => __( 'White', 'sophisticated-business' ),
+				'slug'  => 'white',
+				'color' => '#ffffff',
+			),
+		)
+	);
 }
 endif; // sophisticated_business_setup
 add_action( 'after_setup_theme', 'sophisticated_business_setup', 30 );

sophisticated-business/sass/blocks/_blocks.scss

@@ -1022,10 +1022,10 @@
 	//! Custom background colors
 	.has-primary-background-color,
 	.has-secondary-background-color,
-	.has-dark-gray-background-color,
+	.has-white-background-color,
 	.has-light-gray-background-color {
 
-		// Use white text against these backgrounds by default.
+		// Use dark gray text against these background by default.
 		color: $color__background-body;
 
 		p,
@@ -1040,10 +1040,10 @@
 		}
 	}
 
-	.has-white-background-color {
+	.has-dark-gray-background-color {
 		color: $color__text-main;
 
-		// Use dark gray text against this background by default.
+		// Use white text against this backgrounds by default.
 		p,
 		h1,
 		h2,
@@ -1068,7 +1068,7 @@
 
 	.has-dark-gray-background-color,
 	.wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
-		background-color: $color__text-main;
+		background-color: $color__background-screen;
 	}
 
 	.has-light-gray-background-color,

sophisticated-business/style-editor.css

@@ -946,7 +946,7 @@ a:focus {
 
 .has-primary-background-color,
 .has-secondary-background-color,
-.has-dark-gray-background-color,
+.has-white-background-color,
 .has-light-gray-background-color {
   color: #080808;
 }
@@ -967,14 +967,14 @@ a:focus {
 .has-secondary-background-color h5,
 .has-secondary-background-color h6,
 .has-secondary-background-color a,
-.has-dark-gray-background-color p,
-.has-dark-gray-background-color h1,
-.has-dark-gray-background-color h2,
-.has-dark-gray-background-color h3,
-.has-dark-gray-background-color h4,
-.has-dark-gray-background-color h5,
-.has-dark-gray-background-color h6,
-.has-dark-gray-background-color a,
+.has-white-background-color p,
+.has-white-background-color h1,
+.has-white-background-color h2,
+.has-white-background-color h3,
+.has-white-background-color h4,
+.has-white-background-color h5,
+.has-white-background-color h6,
+.has-white-background-color a,
 .has-light-gray-background-color p,
 .has-light-gray-background-color h1,
 .has-light-gray-background-color h2,
@@ -986,18 +986,18 @@ a:focus {
   color: #080808;
 }
 
-.has-white-background-color {
+.has-dark-gray-background-color {
   color: #fff;
 }
 
-.has-white-background-color p,
-.has-white-background-color h1,
-.has-white-background-color h2,
-.has-white-background-color h3,
-.has-white-background-color h4,
-.has-white-background-color h5,
-.has-white-background-color h6,
-.has-white-background-color a {
+.has-dark-gray-background-color p,
+.has-dark-gray-background-color h1,
+.has-dark-gray-background-color h2,
+.has-dark-gray-background-color h3,
+.has-dark-gray-background-color h4,
+.has-dark-gray-background-color h5,
+.has-dark-gray-background-color h6,
+.has-dark-gray-background-color a {
   color: #fff;
 }
 

sophisticated-business/style-editor.scss

@@ -170,10 +170,10 @@ a {
 	}
 }
 
-// Use white text against these backgrounds by default.
+// Use dark gray text against these background by default.
 .has-primary-background-color,
 .has-secondary-background-color,
-.has-dark-gray-background-color,
+.has-white-background-color,
 .has-light-gray-background-color {
 	color: $color__background-body;
 
@@ -189,8 +189,8 @@ a {
 	}
 }
 
-// Use dark gray text against this background by default.
-.has-white-background-color {
+// Use white text against these backgrounds by default.
+.has-dark-gray-background-color {
 	color: $color__text-main;
 
 	p,

sophisticated-business/style-rtl.css

@@ -4373,7 +4373,7 @@ body.page .main-navigation {
 
 .entry .entry-content .has-primary-background-color,
 .entry .entry-content .has-secondary-background-color,
-.entry .entry-content .has-dark-gray-background-color,
+.entry .entry-content .has-white-background-color,
 .entry .entry-content .has-light-gray-background-color {
   color: #080808;
 }
@@ -4394,14 +4394,14 @@ body.page .main-navigation {
 .entry .entry-content .has-secondary-background-color h5,
 .entry .entry-content .has-secondary-background-color h6,
 .entry .entry-content .has-secondary-background-color a,
-.entry .entry-content .has-dark-gray-background-color p,
-.entry .entry-content .has-dark-gray-background-color h1,
-.entry .entry-content .has-dark-gray-background-color h2,
-.entry .entry-content .has-dark-gray-background-color h3,
-.entry .entry-content .has-dark-gray-background-color h4,
-.entry .entry-content .has-dark-gray-background-color h5,
-.entry .entry-content .has-dark-gray-background-color h6,
-.entry .entry-content .has-dark-gray-background-color a,
+.entry .entry-content .has-white-background-color p,
+.entry .entry-content .has-white-background-color h1,
+.entry .entry-content .has-white-background-color h2,
+.entry .entry-content .has-white-background-color h3,
+.entry .entry-content .has-white-background-color h4,
+.entry .entry-content .has-white-background-color h5,
+.entry .entry-content .has-white-background-color h6,
+.entry .entry-content .has-white-background-color a,
 .entry .entry-content .has-light-gray-background-color p,
 .entry .entry-content .has-light-gray-background-color h1,
 .entry .entry-content .has-light-gray-background-color h2,
@@ -4413,18 +4413,18 @@ body.page .main-navigation {
   color: #080808;
 }
 
-.entry .entry-content .has-white-background-color {
+.entry .entry-content .has-dark-gray-background-color {
   color: #fff;
 }
 
-.entry .entry-content .has-white-background-color p,
-.entry .entry-content .has-white-background-color h1,
-.entry .entry-content .has-white-background-color h2,
-.entry .entry-content .has-white-background-color h3,
-.entry .entry-content .has-white-background-color h4,
-.entry .entry-content .has-white-background-color h5,
-.entry .entry-content .has-white-background-color h6,
-.entry .entry-content .has-white-background-color a {
+.entry .entry-content .has-dark-gray-background-color p,
+.entry .entry-content .has-dark-gray-background-color h1,
+.entry .entry-content .has-dark-gray-background-color h2,
+.entry .entry-content .has-dark-gray-background-color h3,
+.entry .entry-content .has-dark-gray-background-color h4,
+.entry .entry-content .has-dark-gray-background-color h5,
+.entry .entry-content .has-dark-gray-background-color h6,
+.entry .entry-content .has-dark-gray-background-color a {
   color: #fff;
 }
 
@@ -4440,7 +4440,7 @@ body.page .main-navigation {
 
 .entry .entry-content .has-dark-gray-background-color,
 .entry .entry-content .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
-  background-color: #fff;
+  background-color: #1c1c1c;
 }
 
 .entry .entry-content .has-light-gray-background-color,

sophisticated-business/style.css

@@ -4385,7 +4385,7 @@ body.page .main-navigation {
 
 .entry .entry-content .has-primary-background-color,
 .entry .entry-content .has-secondary-background-color,
-.entry .entry-content .has-dark-gray-background-color,
+.entry .entry-content .has-white-background-color,
 .entry .entry-content .has-light-gray-background-color {
   color: #080808;
 }
@@ -4406,14 +4406,14 @@ body.page .main-navigation {
 .entry .entry-content .has-secondary-background-color h5,
 .entry .entry-content .has-secondary-background-color h6,
 .entry .entry-content .has-secondary-background-color a,
-.entry .entry-content .has-dark-gray-background-color p,
-.entry .entry-content .has-dark-gray-background-color h1,
-.entry .entry-content .has-dark-gray-background-color h2,
-.entry .entry-content .has-dark-gray-background-color h3,
-.entry .entry-content .has-dark-gray-background-color h4,
-.entry .entry-content .has-dark-gray-background-color h5,
-.entry .entry-content .has-dark-gray-background-color h6,
-.entry .entry-content .has-dark-gray-background-color a,
+.entry .entry-content .has-white-background-color p,
+.entry .entry-content .has-white-background-color h1,
+.entry .entry-content .has-white-background-color h2,
+.entry .entry-content .has-white-background-color h3,
+.entry .entry-content .has-white-background-color h4,
+.entry .entry-content .has-white-background-color h5,
+.entry .entry-content .has-white-background-color h6,
+.entry .entry-content .has-white-background-color a,
 .entry .entry-content .has-light-gray-background-color p,
 .entry .entry-content .has-light-gray-background-color h1,
 .entry .entry-content .has-light-gray-background-color h2,
@@ -4425,18 +4425,18 @@ body.page .main-navigation {
   color: #080808;
 }
 
-.entry .entry-content .has-white-background-color {
+.entry .entry-content .has-dark-gray-background-color {
   color: #fff;
 }
 
-.entry .entry-content .has-white-background-color p,
-.entry .entry-content .has-white-background-color h1,
-.entry .entry-content .has-white-background-color h2,
-.entry .entry-content .has-white-background-color h3,
-.entry .entry-content .has-white-background-color h4,
-.entry .entry-content .has-white-background-color h5,
-.entry .entry-content .has-white-background-color h6,
-.entry .entry-content .has-white-background-color a {
+.entry .entry-content .has-dark-gray-background-color p,
+.entry .entry-content .has-dark-gray-background-color h1,
+.entry .entry-content .has-dark-gray-background-color h2,
+.entry .entry-content .has-dark-gray-background-color h3,
+.entry .entry-content .has-dark-gray-background-color h4,
+.entry .entry-content .has-dark-gray-background-color h5,
+.entry .entry-content .has-dark-gray-background-color h6,
+.entry .entry-content .has-dark-gray-background-color a {
   color: #fff;
 }
 
@@ -4452,7 +4452,7 @@ body.page .main-navigation {
 
 .entry .entry-content .has-dark-gray-background-color,
 .entry .entry-content .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
-  background-color: #fff;
+  background-color: #1c1c1c;
 }
 
 .entry .entry-content .has-light-gray-background-color,