Revert "Blockbase: Remove wpcom specific CSS file (#4548)" (#4549)

This reverts commit 463aafcee74d2dc5153549fb6e8fc154cfd58eb4.

blockbase/assets/ponyfill.css

@@ -408,41 +408,6 @@ p.has-background {
 	font-weight: var(--wp--custom--post-author--font-weight);
 }
 
-body:not(.highlander-enabled) .wp-block-post-comments form {
-	display: grid;
-	column-gap: 1em;
-	grid-template-rows: auto;
-	grid-template-areas: "notes notes" "author author" "email url" "comment comment" "cookies-consent cookies-consent" "form-submit form-submit";
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .comment-notes {
-	grid-area: notes;
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .comment-form-author {
-	grid-area: author;
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .comment-form-email {
-	grid-area: email;
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .comment-form-url {
-	grid-area: url;
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .comment-form-comment {
-	grid-area: comment;
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .comment-form-cookies-consent {
-	grid-area: cookies-consent;
-}
-
-body:not(.highlander-enabled) .wp-block-post-comments form .form-submit {
-	grid-area: form-submit;
-}
-
 .wp-block-post-comments label, .wp-block-post-comments .comment-meta {
 	font-size: var(--wp--custom--form--label--typography--font-size);
 }
@@ -461,6 +426,13 @@ body:not(.highlander-enabled) .wp-block-post-comments form .form-submit {
 	text-decoration: none;
 }
 
+.wp-block-post-comments form {
+	display: grid;
+	column-gap: 1em;
+	grid-template-rows: auto;
+	grid-template-areas: "notes notes" "author author" "email url" "comment comment" "cookies-consent cookies-consent" "form-submit form-submit";
+}
+
 .wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),
 .wp-block-post-comments form textarea {
 	font-size: var(--wp--preset--font-size--normal);
@@ -486,6 +458,34 @@ body:not(.highlander-enabled) .wp-block-post-comments form .form-submit {
 	margin-bottom: var(--wp--custom--margin--vertical);
 }
 
+.wp-block-post-comments form .comment-notes {
+	grid-area: notes;
+}
+
+.wp-block-post-comments form .comment-form-author {
+	grid-area: author;
+}
+
+.wp-block-post-comments form .comment-form-email {
+	grid-area: email;
+}
+
+.wp-block-post-comments form .comment-form-url {
+	grid-area: url;
+}
+
+.wp-block-post-comments form .comment-form-comment {
+	grid-area: comment;
+}
+
+.wp-block-post-comments form .comment-form-cookies-consent {
+	grid-area: cookies-consent;
+}
+
+.wp-block-post-comments form .form-submit {
+	grid-area: form-submit;
+}
+
 .wp-block-post-comments form .comment-form-cookies-consent input[type="checkbox"] {
 	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);

blockbase/inc/wpcom-style.css

@@ -0,0 +1,8 @@
+/**
+ * WP.com stylesheet for Blockbase
+ */
+
+/* NOTE: This is a wp.com-specific fix so that the comment form presented there (highlander) is NOT displayed as a GRID. */
+body.highlander-enabled .wp-block-post-comments form {
+	display: revert;
+}

blockbase/inc/wpcom.php

@@ -7,6 +7,15 @@
  * @package Blockbase
  */
 
+/**
+ * Enqueue our WP.com styles for front-end.
+ * Loads after theme styles so we can add overrides.
+ */
+function blockbase_wpcom_scripts() {
+	wp_enqueue_style( 'blockbase-wpcom-style', get_template_directory_uri() . '/inc/wpcom-style.css', array( 'blockbase-ponyfill' ) );
+}
+add_action( 'wp_enqueue_scripts', 'blockbase_wpcom_scripts' );
+
 /**
  * Restores the Customizer since we still rely on it.
  * (For WPcom REST API requests to work properly.)

blockbase/sass/blocks/_post-comments.scss

@@ -1,48 +1,3 @@
-body:not(.highlander-enabled) {
-	.wp-block-post-comments {
-		form {
-			display: grid;
-			column-gap: 1em;
-			grid-template-rows: auto;
-			grid-template-areas:
-				"notes notes"
-				"author author"
-				"email url"
-				"comment comment"
-				"cookies-consent cookies-consent"
-				"form-submit form-submit";
-
-			.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;
-			}
-		}
-	}
-}
-
 .wp-block-post-comments {
 	label, .comment-meta {
 		font-size: var(--wp--custom--form--label--typography--font-size);
@@ -62,6 +17,17 @@ body:not(.highlander-enabled) {
 	}
 
 	form {
+		display: grid;
+		column-gap: 1em;
+		grid-template-rows: auto;
+		grid-template-areas:
+			"notes notes"
+			"author author"
+			"email url"
+			"comment comment"
+			"cookies-consent cookies-consent"
+			"form-submit form-submit";
+
 		input:not([type=submit]):not([type=checkbox]),
 		textarea {
 			font-size: var(--wp--preset--font-size--normal);
@@ -87,6 +53,34 @@ body:not(.highlander-enabled) {
 			margin-bottom: var(--wp--custom--margin--vertical);
 		}
 
+		.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;
+		}
+
 		.comment-form-cookies-consent {
 			input[type="checkbox"] {
 				@include hide-accesibly;
@@ -138,7 +132,7 @@ body:not(.highlander-enabled) {
 				font-size: var(--wp--custom--post-comment--typography--font-size);
 				line-height: var(--wp--custom--post-comment--typography--line-height);
 				margin-bottom: var(--wp--custom--margin--vertical);
-				margin-top: var(--wp--custom--margin--vertical);
+				margin-top: var(--wp--custom--margin--vertical);	
 			}
 		}
 	}