Twenty Twenty-One: Fixes font size difference in latest comments block.

The font size was different in the last comments block depending on if it was in the editor or front. This resolves that by checking block for special font size before applying default and using inherit for nested elements. Props pitamdey, sabernhardt. Fixes #61082. git-svn-id: https://develop.svn.wordpress.org/trunk@58464 602fd350-edb4-49c9-b593-d223f7449a82
WordPress · Jun 23, 2024 · b2cc443 · b2cc443
1 parent 00d3439
commit b2cc443
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 17 deletions.
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
@@ -1000,7 +1000,45 @@ h6,
 	padding: 20px;
 }
 
-.wp-block-latest-comments,
+.wp-block-latest-comments {
+	padding-left: 0;
+}
+
+.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
+	font-size: 1.125rem;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment {
+	line-height: 1.7;
+
+	/* Vertical margins logic */
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment-date {
+	color: inherit;
+	font-size: inherit;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
+	line-height: 1.7;
+	margin: 0;
+}
+
 .wp-block-latest-posts {
 	padding-left: 0;
 }

diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css
@@ -2495,8 +2495,11 @@ h6,
 	padding-left: 0;
 }
 
-.wp-block-latest-comments .wp-block-latest-comments__comment {
+.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
 	font-size: 1.125rem;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment {
 	line-height: 1.7;
 
 	/* Vertical margins logic */
@@ -2517,12 +2520,12 @@ h6,
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: #28303d;
-	font-size: 1.125rem;
+	color: inherit;
+	font-size: inherit;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: 1.125rem;
+	font-size: inherit;
 	line-height: 1.7;
 	margin: 0;
 }

diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css
@@ -1115,6 +1115,41 @@ h6,
 	padding-left: 0;
 }
 
+.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
+	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment {
+	line-height: var(--global--line-height-body);
+
+	/* Vertical margins logic */
+	margin-top: var(--global--spacing-vertical);
+	margin-bottom: var(--global--spacing-vertical);
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment:first-child {
+	margin-top: 0;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
+	font-family: var(--heading--font-family);
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment-date {
+	color: inherit;
+	font-size: inherit;
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
+	font-size: inherit;
+	line-height: var(--global--line-height-body);
+	margin: 0;
+}
+
 .wp-block-latest-posts {
 	padding-left: 0;
 }

diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss
@@ -1,3 +1,38 @@
 .wp-block-latest-comments {
 	padding-left: 0;
+
+	&:where(:not([class*="-font-size"]):not([style*="font-size"])) .wp-block-latest-comments__comment {
+		font-size: var(--global--font-size-sm);
+	}
+
+	.wp-block-latest-comments__comment {
+		line-height: var(--global--line-height-body);
+
+		/* Vertical margins logic */
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.wp-block-latest-comments__comment-meta {
+		font-family: var(--heading--font-family);
+	}
+
+	.wp-block-latest-comments__comment-date {
+		color: inherit;
+		font-size: inherit;
+	}
+
+	.wp-block-latest-comments__comment-excerpt p {
+		font-size: inherit;
+		line-height: var(--global--line-height-body);
+		margin: 0;
+	}
 }
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss
@@ -1,8 +1,11 @@
 .wp-block-latest-comments {
 	padding-left: 0;
 
-	.wp-block-latest-comments__comment {
+	&:where(:not([class*="-font-size"]):not([style*="font-size"])) .wp-block-latest-comments__comment {
 		font-size: var(--global--font-size-sm);
+	}
+
+	.wp-block-latest-comments__comment {
 		line-height: var(--global--line-height-body);
 
 		/* Vertical margins logic */
@@ -23,12 +26,12 @@
 	}
 
 	.wp-block-latest-comments__comment-date {
-		color: var(--global--color-primary);
-		font-size: var(--global--font-size-sm);
+		color: inherit;
+		font-size: inherit;
 	}
 
 	.wp-block-latest-comments__comment-excerpt p {
-		font-size: var(--global--font-size-sm);
+		font-size: inherit;
 		line-height: var(--global--line-height-body);
 		margin: 0;
 	}

diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css
@@ -2330,8 +2330,11 @@ h6,
 	padding-right: 0;
 }
 
-.wp-block-latest-comments .wp-block-latest-comments__comment {
+.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
 	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment {
 	line-height: var(--global--line-height-body);
 
 	/* Vertical margins logic */
@@ -2352,12 +2355,12 @@ h6,
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: var(--global--color-primary);
-	font-size: var(--global--font-size-sm);
+	color: inherit;
+	font-size: inherit;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: var(--global--font-size-sm);
+	font-size: inherit;
 	line-height: var(--global--line-height-body);
 	margin: 0;
 }

diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css
@@ -2340,8 +2340,11 @@ h6,
 	padding-left: 0;
 }
 
-.wp-block-latest-comments .wp-block-latest-comments__comment {
+.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
 	font-size: var(--global--font-size-sm);
+}
+
+.wp-block-latest-comments .wp-block-latest-comments__comment {
 	line-height: var(--global--line-height-body);
 
 	/* Vertical margins logic */
@@ -2362,12 +2365,12 @@ h6,
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-	color: var(--global--color-primary);
-	font-size: var(--global--font-size-sm);
+	color: inherit;
+	font-size: inherit;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: var(--global--font-size-sm);
+	font-size: inherit;
 	line-height: var(--global--line-height-body);
 	margin: 0;
 }