Browse Source

Blockbase: move link pseudo states to theme.json (#6156)

* move link pseudo states to theme.json

* Removed navigation underline hover to achieve design parity before the change

Co-authored-by: Jason Crist <jcrist@pbking.com>
Madhu Dollu 2 years ago
parent
commit
678de460fe
3 changed files with 34 additions and 47 deletions
  1. 1 21
      blockbase/assets/ponyfill.css
  2. 1 20
      blockbase/sass/elements/_links.scss
  3. 32 6
      blockbase/theme.json

+ 1 - 21
blockbase/assets/ponyfill.css

@@ -239,31 +239,11 @@ See: https://github.com/Automattic/wp-calypso/issues/58958#issuecomment-10152637
  */
 a,
 .wp-block-navigation a {
-  cursor: pointer;
   text-underline-offset: 0.15em;
-  text-decoration: none;
-}
-a:hover, a:focus,
-.wp-block-navigation a:hover,
-.wp-block-navigation a:focus {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
-main.block-editor-block-list__layout a,
-.wp-block-post a {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-main.block-editor-block-list__layout a:hover, main.block-editor-block-list__layout a:focus,
-.wp-block-post a:hover,
-.wp-block-post a:focus {
-  text-decoration: none;
 }
 
 a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
-  outline: 1px dotted currentColor;
-  text-decoration: none;
+  outline: 1px dotted currentcolor;
 }
 
 input.wp-block-search__input,

+ 1 - 20
blockbase/sass/elements/_links.scss

@@ -1,25 +1,7 @@
 // Default link styles
 a,
 .wp-block-navigation a {
-	cursor: pointer;
 	text-underline-offset: 0.15em;
-	text-decoration: none;
-
-	&:hover,
-	&:focus {
-		text-decoration-line: underline;
-	}
-}
-
-//Links that appear in the main content area
-main.block-editor-block-list__layout a, // Needed for the post area
-.wp-block-post a {
-	text-decoration-line: underline;
-
-	&:hover,
-	&:focus {
-		text-decoration: none;
-	}
 }
 
 // Select the focus states of all non-wpadmin and screen reader links
@@ -27,7 +9,6 @@ a:not(.ab-item):not(.screen-reader-shortcut) {
 
 	&:active,
 	&:focus {
-		outline: 1px dotted currentColor;
-		text-decoration: none;
+		outline: 1px dotted currentcolor;
 	}
 }

+ 32 - 6
blockbase/theme.json

@@ -1,6 +1,6 @@
 {
-	"$schema": "https://json.schemastore.org/theme-v1.json",
-	"version": 1,
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 2,
 	"templateParts": [
 		{
 			"name": "header-centered",
@@ -656,7 +656,8 @@
 			},
 			"core/navigation": {
 				"typography": {
-					"fontSize": "var(--wp--custom--font-sizes--normal)"
+					"fontSize": "var(--wp--custom--font-sizes--normal)",
+					"textDecoration": "none"
 				}
 			},
 			"core/post-title": {
@@ -672,7 +673,6 @@
 			},
 			"core/post-date": {
 				"color": {
-					"link": "var(--wp--custom--color--foreground)",
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"typography": {
@@ -737,8 +737,19 @@
 			"core/site-title": {
 				"typography": {
 					"fontSize": "var(--wp--custom--font-sizes--normal)",
-					"fontWeight": "700",
-					"textDecoration": "none"
+					"fontWeight": "700"
+				},
+				"elements": {
+					"link": {
+						"typography": {
+							"textDecoration": "none"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						}
+					}
 				}
 			}
 		},
@@ -852,6 +863,21 @@
 			"link": {
 				"color": {
 					"text": "var(--wp--custom--color--primary)"
+				},
+				":hover": {
+					"typography": {
+						"textDecoration": "none"
+					}
+				},
+				":focus": {
+					"typography": {
+						"textDecoration": "none"
+					}
+				},
+				":active": {
+					"typography": {
+						"textDecoration": "none"
+					}
 				}
 			}
 		},