Merge pull request #2537 from Automattic/seedlet/remove-duplicate-editor-code

Seedlet: Remove duplicate editor code

seedlet/assets/css/ie-editor.css

@@ -108,44 +108,35 @@
 /**
  * Output
  */
-body {
-	color: #333333;
-	background-color: #FFFFFF;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
-	font-size: 18px;
-	font-weight: normal;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-}
-
-.editor-post-title__block {
-	font-size: 18px;
-}
-
-.wp-block a {
+a {
 	border-bottom: 1px solid #3C8067;
 	color: #000000;
 	text-decoration: none;
+	transition: border-color 0.1s ease-out;
 }
 
-.wp-block a:hover, .wp-block a:focus {
+a:hover, a:focus {
 	border-bottom-color: transparent;
 }
 
-.wp-block a:hover {
+a:hover {
 	color: #3C8067;
 }
 
-.wp-block a:focus {
+a:focus {
 	color: #3C8067;
 }
 
-.wp-block a:active {
+a:active {
 	color: #000000;
 }
 
-.has-link-color .wp-block a {
-	border-bottom: undefined;
+.has-link-color a {
+	border-bottom: 1px solid #000000;
+}
+
+.has-link-color a:hover, .has-link-color a:focus {
+	border-bottom-color: transparent;
 }
 
 .has-background:not(.has-background-background-color) .has-link-color a {
@@ -161,6 +152,20 @@ a {
 	cursor: pointer;
 }
 
+body {
+	color: #333333;
+	background-color: #FFFFFF;
+	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-size: 18px;
+	font-weight: normal;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+.editor-post-title__block {
+	font-size: 18px;
+}
+
 /**
  * Elements
  * - Styles for basic HTML elemants

seedlet/assets/css/ie.css

@@ -1544,6 +1544,10 @@ a:active {
 	border-bottom: 1px solid #000000;
 }
 
+.has-link-color a:hover, .has-link-color a:focus {
+	border-bottom-color: transparent;
+}
+
 .has-background:not(.has-background-background-color) .has-link-color a {
 	color: #000000;
 }
@@ -1552,17 +1556,17 @@ a:active {
 	color: #000000;
 }
 
+button,
+a {
+	cursor: pointer;
+}
+
 .site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: #3C8067;
 }
 
-button,
-a {
-	cursor: pointer;
-}
-
 /* Text meant only for screen readers. */
 .screen-reader-text {
 	border: 0;

seedlet/assets/css/style-editor.css

@@ -289,45 +289,35 @@
 /**
  * Output
  */
-body {
-	--wp--typography--line-height: var(--global--line-height-body);
-	color: var(--global--color-foreground);
-	background-color: var(--global--color-background);
-	font-family: var(--global--font-secondary);
-	font-size: var(--global--font-size-root);
-	font-weight: normal;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-font-smoothing: antialiased;
-}
-
-.editor-post-title__block {
-	font-size: var(--global--font-size-root);
-}
-
-.wp-block a {
+a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
+	transition: border-color 0.1s ease-out;
 }
 
-.wp-block a:hover, .wp-block a:focus {
+a:hover, a:focus {
 	border-bottom-color: transparent;
 }
 
-.wp-block a:hover {
+a:hover {
 	color: var(--global--color-primary-hover);
 }
 
-.wp-block a:focus {
+a:focus {
 	color: var(--global--color-secondary);
 }
 
-.wp-block a:active {
+a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
-.has-link-color .wp-block a {
-	border-bottom: 1px solid var(--wp--style--color--link);
+.has-link-color a {
+	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
+}
+
+.has-link-color a:hover, .has-link-color a:focus {
+	border-bottom-color: transparent;
 }
 
 .has-background:not(.has-background-background-color) .has-link-color a,
@@ -340,6 +330,21 @@ a {
 	cursor: pointer;
 }
 
+body {
+	--wp--typography--line-height: var(--global--line-height-body);
+	color: var(--global--color-foreground);
+	background-color: var(--global--color-background);
+	font-family: var(--global--font-secondary);
+	font-size: var(--global--font-size-root);
+	font-weight: normal;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+}
+
+.editor-post-title__block {
+	font-size: var(--global--font-size-root);
+}
+
 /**
  * Elements
  * - Styles for basic HTML elemants

seedlet/assets/sass/base/_base.scss

@@ -0,0 +1,49 @@
+// Links styles
+a {
+	border-bottom: 1px solid var(--global--color-secondary);
+	color: var( --wp--style--color--link, var(--global--color-primary) );
+	text-decoration: none;
+	transition: border-color 0.1s ease-out;
+
+	&:hover,
+	&:focus {
+		border-bottom-color: transparent;
+	}
+
+	&:hover {
+		color: var(--global--color-primary-hover);
+	}
+
+	&:focus {
+		color: var(--global--color-secondary);
+	}
+
+	&:active {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+
+	// If a custom link color has been assigned,
+	// switch the color of the bottom border too.
+	.has-link-color & {
+		border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );
+
+		&:hover,
+		&:focus {
+			border-bottom-color: transparent;
+		}
+	}
+}
+// Enforce the custom link color even if a custom background color has been set.
+// The extra specificity here is required to override the background color styles.
+.has-background:not(.has-background-background-color) {
+	// Target both current level and nested block.
+	.has-link-color a,
+	&.has-link-color a {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+}
+
+button,
+a {
+	cursor: pointer;
+}

seedlet/assets/sass/base/_editor.scss

@@ -1,4 +1,5 @@
 @import '../structure/responsive-logic';
+@import '../base/base';
 
 body {
 	--wp--typography--line-height: var(--global--line-height-body);
@@ -15,47 +16,3 @@ body {
 .editor-post-title__block {
 	font-size: var(--global--font-size-root);
 }
-
-// Links styles
-.wp-block a {
-	border-bottom: 1px solid var(--global--color-secondary);
-	color: var( --wp--style--color--link, var(--global--color-primary) );
-	text-decoration: none;
-
-	&:hover,
-	&:focus {
-		border-bottom-color: transparent;
-	}
-
-	&:hover {
-		color: var(--global--color-primary-hover);
-	}
-
-	&:focus {
-		color: var(--global--color-secondary);
-	}
-
-	&:active {
-		color: var( --wp--style--color--link, var(--global--color-primary) );
-	}
-
-	// If a custom link color has been assigned,
-	// switch the color of the bottom border too. 
-	.has-link-color & {
-		border-bottom: 1px solid var(--wp--style--color--link);
-	}
-}
-// Enforce the custom link color even if a custom background color has been set.
-// The extra specificity here is required to override the background color styles.
-.has-background:not(.has-background-background-color) {
-	// Target both current level and nested block.
-	.has-link-color a,
-	&.has-link-color a {
-		color: var( --wp--style--color--link, var(--global--color-primary) );
-	}
-}
-
-button,
-a {
-	cursor: pointer;
-}

seedlet/assets/sass/base/_reset.scss

@@ -78,45 +78,7 @@ body {
 	background-color: var(--global--color-background);
 }
 
-// Links styles
-a {
-	border-bottom: 1px solid var(--global--color-secondary);
-	color: var( --wp--style--color--link, var(--global--color-primary) );
-	text-decoration: none;
-	transition: border-color 0.1s ease-out;
-	
-	&:hover,
-	&:focus {
-		border-bottom-color: transparent;
-	}
-
-	&:hover {
-		color: var(--global--color-primary-hover);
-	}
-
-	&:focus {
-		color: var(--global--color-secondary);
-	}
-
-	&:active {
-		color: var( --wp--style--color--link, var(--global--color-primary) );
-	}
-
-	// If a custom link color has been assigned,
-	// switch the color of the bottom border too. 
-	.has-link-color & {
-		border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );
-	}
-}
-// Enforce the custom link color even if a custom background color has been set.
-// The extra specificity here is required to override the background color styles.
-.has-background:not(.has-background-background-color) {
-	// Target both current level and nested block.
-	.has-link-color a,
-	&.has-link-color a {
-		color: var( --wp--style--color--link, var(--global--color-primary) );
-	}
-}
+@import '../base/base';
 
 // Focus styles
 .site *:focus {
@@ -124,8 +86,3 @@ a {
 	outline-style: dotted;
 	outline-color: var(--global--color-secondary);
 }
-
-button,
-a {
-  cursor: pointer;
-}

seedlet/style-rtl.css

@@ -1007,22 +1007,26 @@ a:active {
 	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
 }
 
+.has-link-color a:hover, .has-link-color a:focus {
+	border-bottom-color: transparent;
+}
+
 .has-background:not(.has-background-background-color) .has-link-color a,
 .has-background:not(.has-background-background-color).has-link-color a {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
+button,
+a {
+	cursor: pointer;
+}
+
 .site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: var(--global--color-secondary);
 }
 
-button,
-a {
-	cursor: pointer;
-}
-
 /* Text meant only for screen readers. */
 .screen-reader-text {
 	border: 0;

seedlet/style.css

@@ -1015,22 +1015,26 @@ a:active {
 	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
 }
 
+.has-link-color a:hover, .has-link-color a:focus {
+	border-bottom-color: transparent;
+}
+
 .has-background:not(.has-background-background-color) .has-link-color a,
 .has-background:not(.has-background-background-color).has-link-color a {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
+button,
+a {
+	cursor: pointer;
+}
+
 .site *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
 	outline-color: var(--global--color-secondary);
 }
 
-button,
-a {
-	cursor: pointer;
-}
-
 /* Text meant only for screen readers. */
 .screen-reader-text {
 	border: 0;