Merge pull request #3873 from Automattic/add/seedlet-blocks-post-comment-styles

Seedlet Blocks: Add Post Comments block styles

seedlet-blocks/assets/theme.css

@@ -1,42 +1,3 @@
-.wp-block-site-title a {
-	text-decoration: underline;
-	text-decoration-thickness: 2px;
-	text-decoration-color: var(--wp--custom--color--secondary);
-	text-underline-offset: 0.13em;
-	transition: background-size 0.1s ease-out;
-}
-
-.wp-block-site-title a:hover, .wp-block-site-title a:focus {
-	text-decoration: none;
-	color: var(--wp--custom--color--secondary);
-	background-size: 8px 0px;
-}
-
-/**
- * Links in navigation
- */
-.wp-block-navigation-link a :hover {
-	text-decoration: underline;
-	text-underline-offset: 0.4rem;
-}
-
-/**
- * Links in Content
- */
-.is-root-container a,
-.wp-block-post-content a {
-	color: var(--wp--custom--color--primary);
-	text-decoration-color: var(--wp--style--color--link);
-	text-decoration-thickness: 1px;
-	text-underline-offset: 0.2em;
-}
-
-.is-root-container a:focus, .is-root-container a:hover,
-.wp-block-post-content a:focus,
-.wp-block-post-content a:hover {
-	color: var(--wp--style--color--link);
-}
-
 /**
  * Breakpoints & Media Queries
  */
@@ -176,10 +137,192 @@
 	}
 }
 
+/**
+ * Links in navigation
+ */
+.wp-block-navigation-link a :hover {
+	text-decoration: underline;
+	text-underline-offset: 0.4rem;
+}
+
+/**
+ * Links in Content
+ */
+.is-root-container a,
+.wp-block-post-content a {
+	color: var(--wp--custom--color--primary);
+	text-decoration-color: var(--wp--style--color--link);
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.2em;
+}
+
+.is-root-container a:focus, .is-root-container a:hover,
+.wp-block-post-content a:focus,
+.wp-block-post-content a:hover {
+	color: var(--wp--style--color--link);
+}
+
+.wp-block-post-comments .reply a {
+	border-radius: var(--wp--custom--button--border--radius);
+	font-size: var(--wp--preset--font-size--small);
+	line-height: 1.5;
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .reply a:not(.has-background):not(.has-text-color).has-focus {
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments #comments,
+.wp-block-post-comments #reply-title {
+	font-size: var(--wp--preset--font-size--huge);
+	font-style: italic;
+	margin-bottom: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .comment-meta,
+.wp-block-post-comments .comment-author {
+	font-size: var(--wp--preset--font-size--tiny);
+	margin-left: 0;
+}
+
+.wp-block-post-comments .comment-meta a,
+.wp-block-post-comments .comment-author a {
+	text-decoration: none;
+}
+
+.wp-block-post-comments label {
+	font-size: var(--wp--preset--font-size--small);
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
+.wp-block-post-comments input[type=checkbox] + label {
+	margin-left: 0;
+}
+
+.wp-block-post-comments .commentlist .comment {
+	padding-left: 0;
+}
+
+.wp-block-post-comments .commentlist .comment p {
+	font-size: var(--wp--preset--font-size--normal);
+	margin-bottom: var(--wp--custom--margin--vertical);
+	margin-top: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .commentlist > li {
+	margin-top: var(--wp--custom--margin--vertical);
+	margin-bottom: var(--wp--custom--margin--vertical);
+}
+
+.wp-block-post-comments .commentlist > li:not(first-child) {
+	border-bottom: 1px solid var(--wp--custom--form--border--color);
+}
+
+.wp-block-post-comments .comment .comment-author .avatar {
+	border-radius: 1.5em;
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+	display: block;
+	float: left;
+	height: 42px;
+	margin-right: 18px;
+	width: 42px;
+}
+
+.wp-block-post-comments .comment .comment-author .fn {
+	font-size: var(--global--font-size-xs);
+}
+
+.wp-block-post-comments .comment-form {
+	display: grid;
+	column-gap: 1em;
+	grid-template-rows: auto;
+	grid-template-areas: "notes notes" "comment comment" "author email" "url url" "cookies-consent cookies-consent" "form-submit form-submit";
+}
+
+.wp-block-post-comments .comment-form p {
+	margin-top: var(--wp--custom--margin--baseline);
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
+.wp-block-post-comments .comment-form input[type="submit"] {
+	border-radius: var(--wp--custom--button--border--radius);
+	cursor: pointer;
+	font-size: var(--wp--preset--font-size--normal);
+	line-height: 1.5;
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color):hover, .wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color):focus, .wp-block-post-comments .comment-form input[type="submit"]:not(.has-background):not(.has-text-color).has-focus {
+	padding: 23px 25px;
+}
+
+.wp-block-post-comments .comment-form .comment-form-cookies-consent > label,
+.wp-block-post-comments .comment-form .comment-notes {
+	font-size: var(--wp--preset--font-size--tiny);
+}
+
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),
+.wp-block-post-comments .comment-form textarea {
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+	font-size: var(--wp--preset--font-size--small);
+	width: 100%;
+}
+
+.wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]):focus,
+.wp-block-post-comments .comment-form textarea:focus {
+	color: var(--wp--custom--form--color--text);
+	outline-width: 1px;
+	outline-style: dotted;
+	outline-color: var(--wp--custom--form--color--text);
+}
+
+.wp-block-post-comments .comment-notes {
+	grid-area: notes;
+}
+
+.wp-block-post-comments .comment-form-author {
+	grid-area: author;
+}
+
+.wp-block-post-comments .comment-form-email {
+	grid-area: email;
+}
+
+.wp-block-post-comments .comment-form-url {
+	grid-area: url;
+}
+
+.wp-block-post-comments .comment-form-comment {
+	grid-area: comment;
+}
+
+.wp-block-post-comments .comment-form-cookies-consent {
+	grid-area: cookies-consent;
+}
+
+.wp-block-post-comments .form-submit {
+	grid-area: form-submit;
+}
+
 .wp-block-pullquote.is-style-solid-color {
 	padding: var(--wp--custom--margin--horizontal);
 }
 
+.wp-block-site-title a {
+	text-decoration: underline;
+	text-decoration-thickness: 2px;
+	text-decoration-color: var(--wp--custom--color--secondary);
+	text-underline-offset: 0.13em;
+	transition: background-size 0.1s ease-out;
+}
+
+.wp-block-site-title a:hover, .wp-block-site-title a:focus {
+	text-decoration: none;
+	color: var(--wp--custom--color--secondary);
+	background-size: 8px 0px;
+}
+
 /**
  * Author bio
  */

seedlet-blocks/block-templates/singular.html

@@ -27,6 +27,13 @@
 
 <!-- wp:post-navigation-link {"textAlign":"right","showTitle":true} /--></div>
 <!-- /wp:column --></div>
+<!-- wp:spacer {"height":50} -->
+<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+<!-- wp:post-comments /-->
+<!-- wp:spacer {"height":25} -->
+<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 

seedlet-blocks/child-experimental-theme.json

@@ -99,7 +99,7 @@
 				"tertiary": "var(--wp--preset--color--almost-white)",
 				"foreground": "var(--wp--preset--color--almost-black)",
 				"background": "var(--wp--preset--color--white)",
-				"selection": "var(--wp--preset--color--almost-white)"
+				"selection": "#f2f2f2"
 			},
 			"fontsToLoadFromGoogle": [
 				"family=Fira+Sans:ital,wght@0,400;0,500;1,400",

seedlet-blocks/experimental-theme.json

@@ -131,7 +131,7 @@
 				"tertiary": "var(--wp--preset--color--almost-white)",
 				"foreground": "var(--wp--preset--color--almost-black)",
 				"background": "var(--wp--preset--color--white)",
-				"selection": "var(--wp--preset--color--almost-white)"
+				"selection": "#f2f2f2"
 			},
 			"form": {
 				"padding": "calc( 0.5 * var(--wp--custom--margin--horizontal) )",

seedlet-blocks/sass/blocks/_post-comments.scss

@@ -0,0 +1,162 @@
+.wp-block-post-comments {
+	.reply {
+		a {
+			border-radius: var(--wp--custom--button--border--radius);
+			font-size: var(--wp--preset--font-size--small);
+			line-height: 1.5;
+			padding: 23px 25px;
+
+			&:not(.has-background):not(.has-text-color) {
+				&:hover,
+				&:focus,
+				&.has-focus {
+					padding: 23px 25px;
+				}
+			}
+		}
+	}
+
+	#comments,
+	#reply-title {
+		font-size: var(--wp--preset--font-size--huge);
+		font-style: italic;
+		margin-bottom: var(--wp--custom--margin--vertical)
+	}
+
+	.comment-meta,
+	.comment-author {
+		font-size: var(--wp--preset--font-size--tiny);
+		margin-left: 0;
+
+		a {
+			text-decoration: none;
+		}
+	}
+
+	label {
+		font-size: var(--wp--preset--font-size--small);
+		margin-bottom: var(--wp--custom--margin--baseline);
+	}
+
+	input[type=checkbox] + label {
+		margin-left: 0;
+	}
+
+	.commentlist {
+		.comment {
+			padding-left: 0;
+
+			p {
+				font-size: var(--wp--preset--font-size--normal);
+				margin-bottom: var(--wp--custom--margin--vertical);
+				margin-top: var(--wp--custom--margin--vertical);
+			}
+		}
+
+		> li {
+			margin-top: var(--wp--custom--margin--vertical);
+			margin-bottom: var(--wp--custom--margin--vertical);
+
+			&:not(first-child) {
+				border-bottom: 1px solid var(--wp--custom--form--border--color);
+			}
+		}
+	}
+
+	.comment .comment-author {
+		.avatar {
+			border-radius: 1.5em;
+			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+			display: block;
+			float: left;
+			height: 42px;
+			margin-right: 18px;
+			width: 42px;
+		}
+
+		.fn {
+			font-size: var(--global--font-size-xs);
+		}
+	}
+
+	.comment-form {
+		display: grid;
+		column-gap: 1em;
+		grid-template-rows: auto;
+		grid-template-areas:
+			"notes notes"
+			"comment comment"
+			"author email"
+			"url url"
+			"cookies-consent cookies-consent"
+			"form-submit form-submit";
+
+		p {
+			margin-top: var(--wp--custom--margin--baseline);
+			margin-bottom: var(--wp--custom--margin--baseline);
+		}
+
+		input[type="submit"] {
+			border-radius: var(--wp--custom--button--border--radius);
+			cursor: pointer;
+			font-size: var(--wp--preset--font-size--normal);
+			line-height: 1.5;
+			padding: 23px 25px;
+
+			&:not(.has-background):not(.has-text-color) {
+				&:hover,
+				&:focus,
+				&.has-focus {
+					padding: 23px 25px;
+				}
+			}
+		}
+
+		.comment-form-cookies-consent > label,
+		.comment-notes {
+			font-size: var(--wp--preset--font-size--tiny);
+		}
+
+		input:not([type=submit]):not([type=checkbox]),
+		textarea {
+			border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
+			font-size: var(--wp--preset--font-size--small);
+			width: 100%;
+
+			&:focus {
+				color: var(--wp--custom--form--color--text);
+				outline-width: 1px;
+				outline-style: dotted;
+				outline-color: var(--wp--custom--form--color--text);
+			}
+		}
+	}
+
+	.comment-notes {
+		grid-area: notes;
+	}
+
+	.comment-form-author {
+		grid-area: author;
+	}
+
+	.comment-form-email {
+		grid-area: email;
+	}
+
+	.comment-form-url {
+		grid-area: url;
+	}
+
+	.comment-form-comment {
+		grid-area: comment;
+	}
+
+	.comment-form-cookies-consent {
+		grid-area: cookies-consent;
+	}
+
+	.form-submit {
+		grid-area: form-submit;
+	}
+}

seedlet-blocks/sass/theme.scss

@@ -1,7 +1,8 @@
-@import './blocks/site-title.scss';
-@import './blocks/links.scss';
-@import './blocks/latest-posts';
-@import './blocks/pullquote';
+@import 'blocks/latest-posts';
+@import 'blocks/links';
+@import 'blocks/post-comments';
+@import 'blocks/pullquote';
+@import 'blocks/site-title';
 
 /**
  * Author bio