BCB: Add post comments styles (#3553)

* Add baseline styles for post comments. * Initial styles. * Blank Canvas Blocks: Add button styles for the Post Comments block Reply link * Remove widths because of WordPress/gutenberg#30382 * Reset borders and cursor for form inputs. * Move to border and cursor reset to button mixin. * Remove addition to button mixin. * Rebase. Co-authored-by: Danny Dudzic <[email protected]>
Automattic · Apr 2, 2021 · ae57d02 · ae57d02
1 parent 7856f9d
commit ae57d02
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 0 deletions.
diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css
diff --git a/blank-canvas-blocks/experimental-theme.json b/blank-canvas-blocks/experimental-theme.json
@@ -148,6 +148,14 @@
 						"text": "var(--wp--custom--color--foreground)",
 						"background": "transparent",
 						"boxShadow": "none"
+					},
+					"label": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--tiny)"
+						}
+					},
+					"typography": {
+						"fontSize": "var(--wp--preset--font-size--normal)"
 					}
 				},
 				"paragraph": {

diff --git a/blank-canvas-blocks/sass/blocks/_post-comments.scss b/blank-canvas-blocks/sass/blocks/_post-comments.scss
@@ -0,0 +1,16 @@
+@import 'button';
+
+.wp-block-post-comments {
+	.comment {
+		font-size: var(--wp--custom--form--typography--font-size);
+	}
+
+	label, .comment-meta {
+		font-size: var(--wp--custom--form--label--typography--font-size);
+	}
+
+	input[type="submit"], .reply a {
+		@include button-main-styles;
+		@include button-hover-styles;
+	}
+}
diff --git a/blank-canvas-blocks/sass/ponyfill.scss b/blank-canvas-blocks/sass/ponyfill.scss
@@ -16,6 +16,7 @@
 @import "blocks/navigation";
 @import "blocks/paragraph";
 @import "blocks/post-author";
+@import "blocks/post-comments";
 @import "blocks/pullquote";
 @import "blocks/quote";
 @import "blocks/search";