Reduce specificity of block library styles conflicting with block sup…

…ports. (#59457)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

packages/block-library/src/audio/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-audio {
+:where(.wp-block-audio) {
 	margin: 0 0 1em 0;
 }

packages/block-library/src/cover/style.scss

@@ -1,12 +1,16 @@
+// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
+:where(.wp-block-cover-image, .wp-block-cover) {
+	min-height: 430px;
+	padding: 1em;
+}
+
 .wp-block-cover-image,
 .wp-block-cover {
 	position: relative;
 	background-position: center center;
-	min-height: 430px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: 1em;
 	// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
 	// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
 	overflow: hidden;

packages/block-library/src/embed/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-embed {
+:where(.wp-block-embed) {
 	margin: 0 0 1em 0;
 }

packages/block-library/src/image/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-image {
+:where(.wp-block-image) {
 	margin: 0 0 1em 0;
 }

packages/block-library/src/pullquote/theme.scss

@@ -1,9 +1,11 @@
-.wp-block-pullquote {
+:where(.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 {

packages/block-library/src/quote/theme.scss

@@ -1,8 +1,7 @@
-.wp-block-quote {
+:where(.wp-block-quote) {
 	border-left: 0.25em solid currentColor;
 	margin: 0 0 1.75em 0;
 	padding-left: 1em;
-
 	cite,
 	footer {
 		color: currentColor;

packages/block-library/src/social-links/editor.scss

@@ -4,13 +4,6 @@
 		display: inline-block;
 		margin-left: $grid-unit-10;
 	}
-
-	// Unset background colors that can be inherited from Global Styles.
-	// This is a duplicate of a rule in style.scss, as it needs higher specificity in the editor.
-	// The rule can be removed if editor styles get lowered in specificity.
-	&.wp-block-social-links {
-		background: none;
-	}
 }
 
 // Prevent toolbar from jumping when selecting / hovering a link.

packages/block-library/src/table/theme.scss

@@ -1,6 +1,4 @@
 .wp-block-table {
-	margin: 0 0 1em 0;
-
 	td,
 	th {
 		word-break: normal;
@@ -10,3 +8,7 @@
 		@include caption-style-theme();
 	}
 }
+
+:where(.wp-block-table) {
+	margin: 0 0 1em 0;
+}

packages/block-library/src/template-part/theme.scss

@@ -1,5 +1,5 @@
 // Same as the group block styles.
-.wp-block-template-part {
+:where(.wp-block-template-part) {
 	&.has-background {
 		// Matches paragraph Block padding
 		padding: $block-bg-padding--v $block-bg-padding--h;

packages/block-library/src/video/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-video {
+:where(.wp-block-video) {
 	margin: 0 0 1em 0;
 }