More blocks styles moved to the appropriate object/utilities folders

Simplifies pullquote and fixes the issues with editor styles; move color classes utilities.

themes/wporg-5ftf/css/components/_about.scss

@@ -1,14 +1,4 @@
 body.page-about .entry-content {
-	.wp-block-pullquote.is-style-solid-color  {
-		@extend .has-wporg-blue-background-color;
-
-		blockquote {
-			@extend .has-wporg-white-color;
-
-			max-width: 100%;
-			border: none;
-		}
-	}
 
 	@include breakpoint( $breakpoint-tablet ) {
 		> p,
@@ -28,22 +18,11 @@ body.page-about .entry-content {
 			margin-left: auto;
 		}
 
-		.wp-block-pullquote.is-style-solid-color {
+		.wp-block-pullquote.is-style-solid-color  {
-			@extend .is-style-default !optional;
-			//@extend .has-wporg-white-background-color;	// todo compile error
-			background-color: white !important;	// todo why does this need !important? it shouldn't
-
 			position: absolute;
 			top: 800px;
 			left: 0;
 			width: 40%;
-
-			blockquote {
-				color: $color__text-heading !important;	// todo why does this need !important?
-				border-left: none;
-			}
-
-			// todo works in front end, but need it in editor-styles too. maybe b/c targeting body.page-about?
 		}
 	}
 }

themes/wporg-5ftf/css/components/_entry-content.scss

@@ -6,38 +6,8 @@
 	h1, h2, h3, h4, h5, h6 {
 		color: $color__text-heading-darker;
 	}
-
-	.wp-block-pullquote {
-		color: $color__text-heading;
-	}
 }
 
-// todo move better location?
-.has-wporg-blue-color {
-	color: $color__wporg-blue;
-}
-
-.has-wporg-blue-background-color {
-	background-color: $color__wporg-blue;
-}
-
-.has-wporg-purple-color {
-	color: $color__wporg-purple;
-}
-
-.has-wporg-purple-background-color {
-	background-color: $color__wporg-purple;
-}
-
-.has-wporg-white-color {
-	color: $color__text-over-background;
-}
-
-.has-wporg-white-background-color {
-	background-color: $color__text-over-background;
-}
-
-
 p.has-background,
 .wp-block-group.has-background,
 .wp-block-pullquote.has-wporg-blue-background-color {

themes/wporg-5ftf/css/objects/_objects.scss

@@ -8,4 +8,5 @@
 @import "../../../pub/wporg/css/objects/notices";
 @import "buttons";
 @import "image";
+@import "pullquote";
 @import "site-header";

themes/wporg-5ftf/css/objects/_pullquote.scss

@@ -0,0 +1,3 @@
+.wp-block-pullquote {
+	color: $color__text-heading;
+}

themes/wporg-5ftf/css/style-editor.css

@@ -2,88 +2,6 @@
  * Add content area styles to the editor (in addition to the front end), so that users see content the way it will
  * appear on the front end.
  */
-.entry-content {
-  position: relative;
-  color: #555D66;
-  hyphens: none;
-}
-
-.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
-  color: #23282D;
-}
-
-.entry-content .wp-block-pullquote {
-  color: #606A73;
-}
-
-.has-wporg-blue-color {
-  color: #1E8CBE;
-}
-
-.has-wporg-blue-background-color, body.page-about .entry-content .wp-block-pullquote.is-style-solid-color {
-  background-color: #1E8CBE;
-}
-
-.has-wporg-purple-color {
-  color: #826EB4;
-}
-
-.has-wporg-purple-background-color {
-  background-color: #826EB4;
-}
-
-.has-wporg-white-color, body.page-about .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
-  color: #FFFFFF;
-}
-
-.has-wporg-white-background-color {
-  background-color: #FFFFFF;
-}
-
-p.has-background,
-.wp-block-group.has-background,
-.wp-block-pullquote.has-wporg-blue-background-color,
-body.page-about .entry-content .wp-block-pullquote.is-style-solid-color {
-  /*
-	 * Remove the gaps between consecutive paragraphs that have the same background color, and make it fill 100%
-	 * of the screen on the mobile view.
-	 */
-}
-
-body.page-about .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
-  max-width: 100%;
-  border: none;
-}
-
-@media screen and (min-width: 768px) {
-  body.page-about .entry-content > p,
-  body.page-about .entry-content > h1,
-  body.page-about .entry-content > h2,
-  body.page-about .entry-content > h3,
-  body.page-about .entry-content > h4,
-  body.page-about .entry-content > h5,
-  body.page-about .entry-content > h6,
-  body.page-about .entry-content > .wp-block-quote,
-  body.page-about .entry-content > .wp-block-media-text,
-  body.page-about .entry-content > .wp-block-button {
-    margin-left: 40%;
-  }
-  body.page-about .entry-content p.is-style-wporg-tldr {
-    margin-left: auto;
-  }
-  body.page-about .entry-content .wp-block-pullquote.is-style-solid-color {
-    background-color: white !important;
-    position: absolute;
-    top: 800px;
-    left: 0;
-    width: 40%;
-  }
-  body.page-about .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
-    color: #606A73 !important;
-    border-left: none;
-  }
-}
-
 /* ----------------------------------------------------------------------------
   1.0 - Button Layouts
 ---------------------------------------------------------------------------- */
@@ -500,6 +418,34 @@ input.download-button.button-hero:active[type="submit"],
   }
 }
 
+.wp-block-pullquote {
+  color: #606A73;
+}
+
+.has-wporg-blue-color {
+  color: #1E8CBE;
+}
+
+.has-wporg-blue-background-color {
+  background-color: #1E8CBE;
+}
+
+.has-wporg-purple-color {
+  color: #826EB4;
+}
+
+.has-wporg-purple-background-color {
+  background-color: #826EB4;
+}
+
+.has-wporg-white-color {
+  color: #FFFFFF;
+}
+
+.has-wporg-white-background-color {
+  background-color: #FFFFFF;
+}
+
 .parallelogram-container {
   width: 80%;
   margin-left: 10%;
@@ -573,4 +519,24 @@ p.is-style-wporg-tldr {
   }
 }
 
+.wp-block-pullquote.is-style-solid-color {
+  background-color: #1E8CBE;
+}
+
+.wp-block-pullquote.is-style-solid-color blockquote {
+  max-width: 100%;
+  border: none;
+  color: #FFFFFF;
+}
+
+@media screen and (min-width: 768px) {
+  .wp-block-pullquote.is-style-solid-color {
+    background-color: #FFFFFF;
+  }
+  .wp-block-pullquote.is-style-solid-color blockquote {
+    border-left: none;
+    color: #606A73;
+  }
+}
+
 /*# sourceMappingURL=style-editor.css.map */

themes/wporg-5ftf/css/style-editor.scss

@@ -8,12 +8,11 @@
 @import "../../pub/wporg/css/settings/structure";
 @import "settings/structure";
 @import "../../pub/wporg/css/tools/breakpoint";
-@import "components/entry-content";
-@import "components/about";
 @import "../../pub/wporg/css/settings/_modular-scale.scss";
 @import "../../pub/wporg/css/objects/buttons";
 @import "objects/buttons";
 @import "objects/image";
+@import "objects/pullquote";
 @import "utilities/utilities";
 
 

themes/wporg-5ftf/css/utilities/_colors.scss

@@ -0,0 +1,23 @@
+.has-wporg-blue-color {
+	color: $color__wporg-blue;
+}
+
+.has-wporg-blue-background-color {
+	background-color: $color__wporg-blue;
+}
+
+.has-wporg-purple-color {
+	color: $color__wporg-purple;
+}
+
+.has-wporg-purple-background-color {
+	background-color: $color__wporg-purple;
+}
+
+.has-wporg-white-color {
+	color: $color__text-over-background;
+}
+
+.has-wporg-white-background-color {
+	background-color: $color__text-over-background;
+}

themes/wporg-5ftf/css/utilities/_pullquote.scss

@@ -0,0 +1,18 @@
+.wp-block-pullquote.is-style-solid-color  {
+	background-color: $color__wporg-blue;
+
+	blockquote {
+		max-width: 100%;
+		border: none;
+		color: $color__text-over-background;
+	}
+
+	@include breakpoint( $breakpoint-tablet ) {
+		background-color: $color__text-over-background;
+
+		blockquote {
+			border-left: none;
+			color: $color__text-heading;
+		}
+	}
+}

themes/wporg-5ftf/css/utilities/_utilities.scss

@@ -1,2 +1,4 @@
+@import "colors";
 @import "group";
 @import "paragraph";
+@import "pullquote";