feat: initial pass at comments styles (#27)

Automattic · May 19, 2023 · f04de4b · f04de4b
1 parent 603abb7
commit f04de4b
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 7 deletions.
diff --git a/parts/comments.html b/parts/comments.html
@@ -1,10 +1,11 @@
 <!-- wp:comments {"className":"wp-block-comments-query-loop"} -->
 <div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:comments-title {"level":3} /-->
 
-<!-- wp:comment-template -->
-<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
-<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"style":{"spacing":{"blockGap":"0.5em"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group"><!-- wp:avatar {"size":40,"style":{"spacing":{"margin":{"top":"0.5em"}}}} /-->
+<!-- wp:comment-template {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"var:preset|spacing|50","left":"0"}}}} -->
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:avatar {"size":57,"style":{"spacing":{"margin":{"top":"0"}}}} /-->
 
 <!-- wp:group -->
 <div class="wp-block-group"><!-- wp:comment-author-name /-->
@@ -20,16 +21,21 @@
 <!-- wp:comment-content /-->
 
 <!-- wp:comment-reply-link /--></div>
+<!-- /wp:group --></div>
 <!-- /wp:group -->
 <!-- /wp:comment-template -->
 
-<!-- wp:comments-pagination -->
+<!-- wp:comments-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
 <!-- wp:comments-pagination-previous /-->
 
 <!-- wp:comments-pagination-numbers /-->
 
 <!-- wp:comments-pagination-next /-->
 <!-- /wp:comments-pagination -->
 
+<!-- wp:spacer {"height":"var:preset|spacing|70"} -->
+<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
 <!-- wp:post-comments-form /--></div>
-<!-- /wp:comments -->
+<!-- /wp:comments -->
diff --git a/src/scss/_gutenberg-shim.scss b/src/scss/_gutenberg-shim.scss
@@ -38,3 +38,33 @@ a {
 .has-text-color a {
 	color: inherit;
 }
+
+/*
+ * Form Styles
+ * https://github.com/WordPress/gutenberg/issues/34198
+ */
+label {
+	color: var(--wp--preset--color--contrast);
+	display: inline-block;
+	margin-bottom: calc( var(--wp--preset--spacing--20) / 2 ) 0;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='url'],
+input[type='password'],
+input[type='search'],
+input[type='number'],
+input[type='tel'],
+input[type='range'],
+input[type='date'],
+input[type='month'],
+input[type='week'],
+input[type='time'],
+input[type='datetime'],
+input[type='datetime-local'],
+input[type='zip'],
+input[type='color'],
+textarea {
+	border-radius: 6px;
+}
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
@@ -1,2 +1,3 @@
 @import url( './_navigation.scss' );
 @import url( './_post-author-name.scss' );
+@import url( './_post-comments.scss' );
diff --git a/src/scss/blocks/_post_comments.scss b/src/scss/blocks/_post_comments.scss
@@ -0,0 +1,58 @@
+.wp-block-post-comments-form {
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--wp--preset--spacing--50);
+		margin-top: var(--wp--preset--spacing--50);
+
+		p {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+	p {
+		color: var( --wp--custom--color--gray-700 );
+		font-size: var(--wp--preset--font-size--small);
+
+		a {
+			color: inherit;
+		}
+	}
+
+	.bypostauthor { // we probably don't want to inline text via CSS; can we filter the author post?
+
+	}
+}
+
+.wp-block-comment-template {
+	> li {
+		&:not(:first-of-type) {
+			padding-top: var(--wp--preset--spacing--50);
+		}
+
+		&:not(:last-of-type) {
+			border-bottom: 1px solid var( --wp--custom--color--gray-300 );
+			padding-bottom: var(--wp--preset--spacing--50);
+		}
+	}
+
+	ol {
+		border-left: 1px solid var( --wp--custom--color--gray-300 );
+		margin: var(--wp--preset--spacing--50) 0 0;
+		padding-left: var(--wp--preset--spacing--50);
+	}
+}
+
+.wp-block-comments-pagination-numbers {
+	a,
+	span {
+		border-radius: 6px;
+		padding: 0.5rem 0.8rem;
+	}
+
+	.current {
+		background: var(--wp--preset--color--primary);
+		color: var(--wp--preset--color--base);
+	}
+}
diff --git a/theme.json b/theme.json
@@ -216,21 +216,61 @@
 				}
 			},
 			"core/comment-author-name": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var( --wp--custom--color--gray-900 )"
+						},
+						"typography": {
+							"textDecoration": "none"
+						}
+					}
+				},
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--small)"
+					"fontSize": "var(--wp--preset--font-size--medium)",
+					"fontWeight": "bold"
 				}
 			},
 			"core/comment-date": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var( --wp--custom--color--gray-700 )"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						"typography": {
+							"textDecoration": "none"
+						}
+					}
+				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
 			"core/comment-edit-link": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var( --wp--custom--color--gray-700 )"
+						}
+					}
+				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
 			"core/comment-reply-link": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var( --wp--custom--color--gray-700 )"
+						}
+					}
+				},
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
@@ -313,6 +353,28 @@
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
+			"core/comments-pagination": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var( --wp--preset--color--contrast )"
+						},
+						":hover": {
+							"typography": {
+								"textDecoration": "underline"
+							}
+						},
+						"typography": {
+							"textDecoration": "none"
+						}
+					}
+				},
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--small)"
+				}
+			},
+			"core/comments-pagination-numbers": {
+			},
 			"core/post-date": {
 				"color": {
 					"text": "var(--wp--custom--color--gray-700)"