File, Search Blocks: Lower CSS specificity (#41393)

* lower specificity on file block * lower specificity for search block * made selector more readable, fixed specificity of nested element * make a comment on the where rule * add ed another comment
WordPress · Jun 8, 2022 · 9abede0 · 9abede0
1 parent dd93153
commit 9abede0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -10,19 +10,24 @@
 		text-align: right;
 	}
 
-	.wp-block-file__embed {
-		margin-bottom: 1em;
+	* + .wp-block-file__button {
+		margin-left: 0.75em;
 	}
+}
 
-	.wp-block-file__button {
-		background: #32373c;
-		border-radius: 2em;
-		color: $white;
-		font-size: 0.8em;
-		padding: 0.5em 1em;
-	}
+.wp-block-file__embed {
+	margin-bottom: 1em;
+}
 
-	a.wp-block-file__button {
+//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 {
+	background: #32373c;
+	border-radius: 2em;
+	color: $white;
+	font-size: 0.8em;
+	padding: 0.5em 1em;
+
+	&:is(a) {
 		text-decoration: none;
 
 		&:hover,
@@ -35,8 +40,4 @@
 			text-decoration: none;
 		}
 	}
-
-	* + .wp-block-file__button {
-		margin-left: 0.75em;
-	}
 }
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
@@ -47,7 +47,8 @@
 	}
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: 4px;
 	border: 1px solid #949494;