Don't add :root :where for single classes, because they are already 0…

…-1-0 specificity
WordPress · May 17, 2024 · c5b2fa5 · c5b2fa5
1 parent 09369b0
commit c5b2fa5
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 26 deletions.
diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:root :where(.wp-block-audio) {
+.wp-block-audio {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -1,11 +1,7 @@
-// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
-:root :where(.wp-block-cover-image, .wp-block-cover) {
-	min-height: 430px;
-	padding: 1em;
-}
-
 .wp-block-cover-image,
 .wp-block-cover {
+	min-height: 430px;
+	padding: 1em;
 	position: relative;
 	background-position: center center;
 	display: flex;

diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:root :where(.wp-block-embed) {
+.wp-block-embed {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -1,3 +1,6 @@
+// Adding `figure` to the selector increases the specificity above the global
+// styles specificity, which is levelled at 0-1-0. We should figure out why
+// `figure` is needed.
 :root :where(figure.wp-block-gallery) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.

diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:root :where(.wp-block-image) {
+.wp-block-image {
 	margin: 0 0 1em 0;
 }
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
@@ -1,11 +1,9 @@
-:root :where(.wp-block-pullquote) {
+.wp-block-pullquote {
 	border-top: 4px solid currentColor;
 	border-bottom: 4px solid currentColor;
 	margin-bottom: 1.75em;
 	color: currentColor;
-}
 
-.wp-block-pullquote {
 	cite,
 	footer,
 	&__citation {

diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -1,4 +1,4 @@
-:root :where(.wp-block-quote) {
+.wp-block-quote {
 	border-left: 0.25em solid currentColor;
 	margin: 0 0 1.75em 0;
 	padding-left: 1em;

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
@@ -1,4 +1,4 @@
-:root :where(.wp-block-social-links) {
+.wp-block-social-links {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 

diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
@@ -1,4 +1,6 @@
 .wp-block-table {
+	margin: 0 0 1em 0;
+
 	td,
 	th {
 		word-break: normal;
@@ -8,7 +10,3 @@
 		@include caption-style-theme();
 	}
 }
-
-:root :where(.wp-block-table) {
-	margin: 0 0 1em 0;
-}
diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss
@@ -1,9 +1,7 @@
 // Same as the group block styles.
-:root :where(.wp-block-template-part) {
-	&.has-background {
-		// Matches paragraph Block padding
-		padding: $block-bg-padding--v $block-bg-padding--h;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
+:root :where(.wp-block-template-part.has-background) {
+	// Matches paragraph Block padding
+	padding: $block-bg-padding--v $block-bg-padding--h;
+	margin-top: 0;
+	margin-bottom: 0;
 }
diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss
@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:root :where(.wp-block-video) {
+.wp-block-video {
 	margin: 0 0 1em 0;
 }