Remote: Core block settings (#5574)

* Remote: adding button styles * Remote: adding link styles * Remote: removing no needed styles * Remote: fixing button borders * Remote: fixing selectors * Remote: button styles to theme.json * Remote: adding comment about Gutenberg issue * remove space * whitespace fix * match the button block to the search button block Co-authored-by: Ben Dwyer <ben@scruffian.com>
Automattic · Feb 25, 2022 · 539a44d · 539a44d
1 parent aa7de3b
commit 539a44d
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 20 deletions.
diff --git a/remote/style.css b/remote/style.css
@@ -17,7 +17,6 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 /*
  * Font smoothing.
  */
-
 body {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
@@ -53,8 +52,8 @@ body > .is-root-container,
 .is-root-container .wp-block[data-align='full'] > .wp-block-group,
 .is-root-container .wp-block[data-align='full'] > .wp-block-columns.has-background,
 .is-root-container .wp-block[data-align='full'] > .wp-block-cover {
-	 padding-left: var(--wp--custom--spacing--outer);
-	 padding-right: var(--wp--custom--spacing--outer);
+	padding-left: var(--wp--custom--spacing--outer);
+	padding-right: var(--wp--custom--spacing--outer);
  }
 
  .wp-site-blocks .alignfull,
@@ -66,10 +65,10 @@ body > .is-root-container,
  body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
  body > .is-root-container > .wp-block-template-part > .wp-block-cover,
  .is-root-container .wp-block[data-align='full'] {
-	 margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
-	 margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
-	 max-width: unset;
-	 width: unset;
+	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
+	max-width: unset;
+	width: unset;
  }
 
  /* Blocks inside columns don't have negative margins. */
@@ -78,9 +77,9 @@ body > .is-root-container,
  /* We also want to avoid stacking negative margins. */
  .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
  .is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
-	 margin-left: auto !important;
-	 margin-right: auto !important;
-	 width: inherit;
+	margin-left: auto !important;
+	margin-right: auto !important;
+	width: inherit;
  }
 
  /*
@@ -91,19 +90,108 @@ body > .is-root-container,
   */
 
  .wp-block-navigation__responsive-container.is-menu-open {
-	 padding-top: var(--wp--custom--spacing--outer);
-	 padding-bottom: var(--wp--custom--spacing--large);
-	 padding-right: var(--wp--custom--spacing--outer);
-	 padding-left: var(--wp--custom--spacing--outer);
+	padding-top: var(--wp--custom--spacing--outer);
+	padding-bottom: var(--wp--custom--spacing--large);
+	padding-right: var(--wp--custom--spacing--outer);
+	padding-left: var(--wp--custom--spacing--outer);
  }
 
+/* Button styles */
 
 /*
-* Needed until https://github.com/WordPress/gutenberg/issues/29167 is addressed.
-*/
-.wp-block-post-comments input[type=submit].wp-block-button__link {
+ * Search block button styles
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/36444
+ */
+.wp-block-search__button {
 	border-radius: var(--wp--custom--button--border--radius);
+	background-color: var(--wp--preset--color--primary);
+	color: var(--wp--preset--color--background);
+	border: 1px solid var(--wp--preset--color--primary);
+}
+
+/*
+ * Button hover styles.
+ * Necessary until the following issue is resolved in Gutenberg:
+ * https://github.com/WordPress/gutenberg/issues/27075
+ */
+
+:is(
+	.wp-block-search__button,
+	.wp-block-button__link
+):is(
+	:hover,
+	:active,
+	:focus
+) {
 	border: 1px solid var(--wp--preset--color--foreground);
-	background-color: transparent;
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+	cursor: pointer;
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-button__link
+):is(
+	:hover,
+	:active,
+	:focus
+) {
+	border: 1px solid var(--wp--preset--color--foreground);
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+	cursor: pointer;
+}
+
+:is(
+	.wp-block-search__button,
+	.wp-block-button__link
+):focus {
+	outline: 1.5px dotted var(--wp--preset--color--foreground);
+	outline-offset: 3px;
+}
+
+/*
+ * Link Details
+ */
+
+ a {
 	color: var(--wp--preset--color--foreground);
-}
+	text-decoration-thickness: 0.075ex;
+	text-underline-offset: 0.125em;
+	text-decoration: underline;
+}
+
+.wp-block-site-title a {
+	text-decoration: none;
+}
+
+a:not(
+	.wp-block-search__button,
+	.wp-block-button__link
+):hover {
+	color: var(--wp--preset--color--primary);
+	text-decoration: none;
+}
+
+a:not(
+	.wp-block-search__button,
+	.wp-block-button__link,
+	.wp-block-site-title a,
+	.wp-block-post-title a
+):active {
+	color: var(--wp--preset--color--primary);
+	text-decoration: underline;
+}
+
+a:not(
+	.wp-block-search__button,
+	.wp-block-button__link,
+	.wp-block-site-title a,
+	.wp-block-post-title a
+):focus {
+	color: var(--wp--preset--color--primary);
+	outline: 1.5px dotted var(--wp--preset--color--primary);
+	outline-offset: 3px;
+}
diff --git a/remote/theme.json b/remote/theme.json
@@ -90,7 +90,22 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"radius": "var(--wp--custom--button--border--radius)"
+					"radius": "var(--wp--custom--button--border--radius)",
+					"color": "var(--wp--preset--color--primary)",
+					"width": "1px",
+					"style": "solid"
+				},
+				"color": {
+					"background": "var(--wp--preset--color--primary)",
+					"text": "var(--wp--preset--color--background)"
+				},
+				"spacing": {
+					"padding": {
+						"top": "0.375em",
+						"right": "0.625em",
+						"bottom": "0.375em",
+						"left": "0.625em"
+					}
 				}
 			},
 			"core/heading": {