Site Title, Post Title: Fix typography for blocks with a children (#…

…64911) * Apply styles for element + `a` child when present * Inherit styles from parent element when present * Add missing `-font-family` attribute selector
WordPress · Sep 11, 2024 · ab6eb21 · ab6eb21
1 parent a70c46b
commit ab6eb21
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
@@ -80,5 +80,8 @@
 			}
 		}
 	},
-	"style": "wp-block-post-title"
+	"style": "wp-block-post-title",
+	"selectors": {
+		"typography": ".wp-block-post-title, .wp-block-post-title > a"
+	}
 }
diff --git a/packages/block-library/src/post-title/style.scss b/packages/block-library/src/post-title/style.scss
@@ -3,6 +3,30 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	&[style*="font-weight"] :where(a) {
+		font-weight: inherit;
+	}
+	&[class*="-font-family"] :where(a),
+	&[style*="font-family"] :where(a) {
+		font-family: inherit;
+	}
+	&[class*="-font-size"] :where(a),
+	&[style*="font-size"] :where(a) {
+		font-size: inherit;
+	}
+	&[style*="line-height"] :where(a) {
+		line-height: inherit;
+	}
+	&[style*="font-style"] :where(a) {
+		font-style: inherit;
+	}
+	&[style*="letter-spacing"] :where(a) {
+		letter-spacing: inherit;
+	}
+	&[style*="text-decoration"] :where(a) {
+		text-decoration: inherit;
+	}
+
 	a {
 		display: inline-block;
 	}

diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
@@ -75,5 +75,8 @@
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",
-	"style": "wp-block-site-title"
+	"style": "wp-block-site-title",
+	"selectors": {
+		"typography": ".wp-block-site-title > span, .wp-block-site-title > a"
+	}
 }
diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss
@@ -2,6 +2,30 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	&[style*="font-weight"] :where(a) {
+		font-weight: inherit;
+	}
+	&[class*="-font-family"] :where(a),
+	&[style*="font-family"] :where(a) {
+		font-family: inherit;
+	}
+	&[class*="-font-size"] :where(a),
+	&[style*="font-size"] :where(a) {
+		font-size: inherit;
+	}
+	&[style*="line-height"] :where(a) {
+		line-height: inherit;
+	}
+	&[style*="font-style"] :where(a) {
+		font-style: inherit;
+	}
+	&[style*="letter-spacing"] :where(a) {
+		letter-spacing: inherit;
+	}
+	&[style*="text-decoration"] :where(a) {
+		text-decoration: inherit;
+	}
+
 	:where(a) {
 		color: inherit;
 	}