move some default styles to core theme.json, wrap others with a :where

WordPress · Jun 24, 2022 · 5d5c539 · 5d5c539
1 parent 007e625
commit 5d5c539
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 26 deletions.
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
@@ -247,7 +247,9 @@
 					"background": "#32373c"
 				},
 				"typography": {
-					"fontSize": "1.125em",
+					"fontSize": "inherit",
+					"fontFamily": "inherit",
+					"lineHeight": "inherit",
 					"textDecoration": "none"
 				}
 			},

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -89,22 +89,7 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link",
-		"__experimentalStyle": {
-			"border": {
-				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
-				"radius": "9999px"
-			},
-			"spacing": {
-				"padding": {
-					"//": "The extra 2px are added to size solids the same as the outline versions.",
-					"top": "calc(0.667em + 2px)",
-					"right": "calc(1.333em + 2px)",
-					"bottom": "calc(0.667em + 2px)",
-					"left": "calc(1.333em + 2px)"
-				}
-			}
-		}
+		"__experimentalSelector": ".wp-block-button__link"
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -29,6 +29,16 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
+// These rules are set to zero specificity to keep the default styles for buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-button__link) {
+	// 100% causes an oval, but any explicit but really high value retains the pill shape.
+	border-radius: 9999px;
+
+	// The extra 2px are added to size solids the same as the outline versions.
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 // Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -24,7 +24,7 @@
 }
 
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
-.wp-block-file__button {
+:where(.wp-block-file__button) {
 	border-radius: 2em;
 	padding: 0.5em 1em;
 

diff --git a/packages/block-library/src/post-comments/style.scss b/packages/block-library/src/post-comments/style.scss
@@ -128,8 +128,12 @@
 	input:not([type="submit"]):not([type="checkbox"]) {
 		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
 	}
+}
 
-	input[type="submit"] {
-		border: none;
-	}
+
+// Using :where to give this a low specificity so that element styles take precedence.
+// Needed for backwards compatibility.
+// Styles copied from button block styles.
+:where(.wp-block-post-comments input[type="submit"]) {
+	border: none;
 }
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
@@ -1,11 +1,6 @@
 .wp-block-search__button {
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
 	margin-left: 0.625em;
 	word-break: normal;
-	font-size: inherit;
-	font-family: inherit;
-	line-height: inherit;
 
 	&.has-icon {
 		line-height: 0;
@@ -18,6 +13,13 @@
 	}
 }
 
+// These rules are set to zero specificity to keep the default styles for search buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-search__button) {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}
+
 .wp-block-search__inside-wrapper {
 	display: flex;
 	flex: auto;