Fix for link color in containers (#34689)

* Remove important rule

* Contain specificity of links rule using :where so themes can override it

* Output styles before the element

The reason for this is nested content such as:

    <group class="wp-element-1">
      <p>Text with <link> and colors inherited from group</p>
      <p class="wp-element-2">Text with <link> and own colors</p>
    </group>

The selectors for the link are

- ".wp-element 1 a" => generated by the group
- ".wp-element-2 a" => generated by the paragraph

because they have the same specificity the latest will win.
We need the styles to respect the DOM order of the elements
that have them.

    <style .wp-element-1>
    <style .wp-element-2>
    <group ...>...</group>

lib/block-supports/elements.php

@@ -38,7 +38,7 @@ function gutenberg_render_elements_support( $block_content, $block ) {
 	}
 	$link_color_declaration = esc_html( safecss_filter_attr( "color: $link_color" ) );
 
-	$style = "<style>.$class_name a{" . $link_color_declaration . " !important;}</style>\n";
+	$style = "<style>.$class_name a{" . $link_color_declaration . ";}</style>\n";
 
 	// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
 	// Retrieve the opening tag of the first HTML element.
@@ -59,7 +59,7 @@ function gutenberg_render_elements_support( $block_content, $block ) {
 		$first_element_offset = $html_element_matches[0][1];
 		$content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
 	}
-	return $content . $style;
+	return $style . $content;
 
 }
 

packages/block-editor/src/hooks/style.js

@@ -109,9 +109,7 @@ function compileElementsStyles( selector, elements = {} ) {
 				...map(
 					elementStyles,
 					( value, property ) =>
-						`\t${ kebabCase( property ) }: ${ value }${
-							element === 'link' ? '!important' : ''
-						};`
+						`\t${ kebabCase( property ) }: ${ value };`
 				),
 				'}',
 			].join( '\n' );

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

@@ -42,6 +42,10 @@ p.has-background {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
-p.has-text-color a {
+// Use :where to contain the specificity of this rule
+// so it's easily overrideable by any theme that targets
+// links using the a element.
+// For example, this is what global styles does.
+:where(p.has-text-color:not(.has-link-color)) a {
 	color: inherit;
 }

phpunit/class-elements-test.php

@@ -41,7 +41,7 @@ public function test_simple_paragraph_link_color() {
 		);
 		$this->assertSame(
 			$result,
-			'<p class="wp-elements-1">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p><style>.wp-elements-1 a{color: var(--wp--preset--color--subtle-background) !important;}</style>' . "\n"
+			'<style>.wp-elements-1 a{color: var(--wp--preset--color--subtle-background);}</style>' . "\n" . '<p class="wp-elements-1">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>'
 		);
 	}
 
@@ -71,7 +71,7 @@ public function test_class_paragraph_link_color() {
 		);
 		$this->assertSame(
 			$result,
-			'<p class="wp-elements-1 has-dark-gray-background-color has-background">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p><style>.wp-elements-1 a{color: red !important;}</style>' . "\n"
+			'<style>.wp-elements-1 a{color: red;}</style>' . "\n" . '<p class="wp-elements-1 has-dark-gray-background-color has-background">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>'
 		);
 	}
 
@@ -100,7 +100,7 @@ public function test_anchor_paragraph_link_color() {
 		);
 		$this->assertSame(
 			$result,
-			'<p id="anchor" class="wp-elements-1">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p><style>.wp-elements-1 a{color: #fff000 !important;}</style>' . "\n"
+			'<style>.wp-elements-1 a{color: #fff000;}</style>' . "\n" . '<p id="anchor" class="wp-elements-1">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>'
 		);
 	}
 }