Remove editor styles from front-facing stylesheets (#24439)

* Remove editor styles from front-facing stylesheets * inline comments should end in full-stops * Missed this period
WordPress · Aug 11, 2020 · 59fa9eb · 59fa9eb
1 parent 90b5cda
commit 59fa9eb
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 205 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -480,7 +480,205 @@
 	}
 }
 
-// It is important to include these styles in all built stylesheets
+@mixin background-colors() {
+	.has-pale-pink-background-color {
+		background-color: #f78da7;
+	}
+
+	.has-vivid-red-background-color {
+		background-color: #cf2e2e;
+	}
+
+	.has-luminous-vivid-orange-background-color {
+		background-color: #ff6900;
+	}
+
+	.has-luminous-vivid-amber-background-color {
+		background-color: #fcb900;
+	}
+
+	.has-light-green-cyan-background-color {
+		background-color: #7bdcb5;
+	}
+
+	.has-vivid-green-cyan-background-color {
+		background-color: #00d084;
+	}
+
+	.has-pale-cyan-blue-background-color {
+		background-color: #8ed1fc;
+	}
+
+	.has-vivid-cyan-blue-background-color {
+		background-color: #0693e3;
+	}
+
+	.has-vivid-purple-background-color {
+		background-color: #9b51e0;
+	}
+
+	.has-white-background-color {
+		background-color: #fff;
+	}
+
+	// Deprecated from UI, kept for back-compat.
+	.has-very-light-gray-background-color {
+		background-color: #eee;
+	}
+
+	.has-cyan-bluish-gray-background-color {
+		background-color: #abb8c3;
+	}
+
+	// Deprecated from UI, kept for back-compat.
+	.has-very-dark-gray-background-color {
+		background-color: #313131;
+	}
+
+	.has-black-background-color {
+		background-color: #000;
+	}
+}
+
+@mixin foreground-colors() {
+	.has-pale-pink-color {
+		color: #f78da7;
+	}
+
+	.has-vivid-red-color {
+		color: #cf2e2e;
+	}
+
+	.has-luminous-vivid-orange-color {
+		color: #ff6900;
+	}
+
+	.has-luminous-vivid-amber-color {
+		color: #fcb900;
+	}
+
+	.has-light-green-cyan-color {
+		color: #7bdcb5;
+	}
+
+	.has-vivid-green-cyan-color {
+		color: #00d084;
+	}
+
+	.has-pale-cyan-blue-color {
+		color: #8ed1fc;
+	}
+
+	.has-vivid-cyan-blue-color {
+		color: #0693e3;
+	}
+
+	.has-vivid-purple-color {
+		color: #9b51e0;
+	}
+
+	.has-white-color {
+		color: #fff;
+	}
+
+	// Deprecated from UI, kept for back-compat.
+	.has-very-light-gray-color {
+		color: #eee;
+	}
+
+	.has-cyan-bluish-gray-color {
+		color: #abb8c3;
+	}
+
+	// Deprecated from UI, kept for back-compat.
+	.has-very-dark-gray-color {
+		color: #313131;
+	}
+
+	.has-black-color {
+		color: #000;
+	}
+}
+
+@mixin gradient-colors() {
+	// Our classes uses the same values we set for gradient value attributes, and we can not use spacing because of WP multi site kses rule.
+
+	/* stylelint-disable function-comma-space-after */
+	.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
+		background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
+	}
+
+	.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
+		background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
+	}
+
+	.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
+		background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
+	}
+
+	.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
+		background: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
+	}
+
+	.has-luminous-vivid-orange-to-vivid-red-gradient-background {
+		background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
+	}
+
+	.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
+		background: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
+	}
+
+	.has-cool-to-warm-spectrum-gradient-background {
+		background: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
+	}
+
+	.has-blush-light-purple-gradient-background {
+		background: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
+	}
+
+	.has-blush-bordeaux-gradient-background {
+		background: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
+	}
+
+	.has-purple-crush-gradient-background {
+		background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);
+	}
+
+	.has-luminous-dusk-gradient-background {
+		background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
+	}
+
+	.has-hazy-dawn-gradient-background {
+		background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);
+	}
+
+	.has-pale-ocean-gradient-background {
+		background: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
+	}
+
+	.has-electric-grass-gradient-background {
+		background: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
+	}
+
+	.has-subdued-olive-gradient-background {
+		background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);
+	}
+
+	.has-atomic-cream-gradient-background {
+		background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%);
+	}
+
+	.has-nightshade-gradient-background {
+		background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);
+	}
+
+	.has-midnight-gradient-background {
+		background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
+	}
+	/* stylelint-enable function-comma-space-after */
+}
+
+// It is important to include these styles in all built stylesheets.
 // This allows to CSS variables post CSS plugin to generate fallbacks.
 :root {
 	@include admin-scheme(#007cba);

diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -57,6 +57,42 @@
  */
 @import "./block/edit-panel/editor.scss";
 
+:root .editor-styles-wrapper {
+	// Background colors.
+	@include background-colors();
+
+	// Foreground colors.
+	@include foreground-colors();
+
+	// Gradients
+	@include gradient-colors();
+}
+
+// Font sizes.
+// The reason we add the editor class wrapper here is
+// to avoid enqueing the classes twice: here and in ./editor.scss
+.editor-styles-wrapper .has-small-font-size {
+	font-size: 13px;
+}
+
+.editor-styles-wrapper .has-regular-font-size, // Not used now, kept because of backward compatibility.
+.editor-styles-wrapper .has-normal-font-size {
+	font-size: 16px;
+}
+
+.editor-styles-wrapper .has-medium-font-size {
+	font-size: 20px;
+}
+
+.editor-styles-wrapper .has-large-font-size {
+	font-size: 36px;
+}
+
+.editor-styles-wrapper .has-larger-font-size, // Not used now, kept because of backward compatibility.
+.editor-styles-wrapper .has-huge-font-size {
+	font-size: 42px;
+}
+
 /**
  * Editor Normalization Styles
  *

diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
@@ -8,3 +8,7 @@
 .wp-block-latest-posts li a > div {
 	display: inline;
 }
+
+.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
+	margin-bottom: 20px;
+}
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -64,7 +64,3 @@
 		text-align: center;
 	}
 }
-
-.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
-	margin-bottom: 20px;
-}