Editor: add support for block-level link hover colors.

Adds the ability to set link hover colors for individual blocks from the block inspector color panel.

Props @youknowriad, @peterwilsoncc, @kebbet.
Fixes #58575.


git-svn-id: https://develop.svn.wordpress.org/trunk@56028 602fd350-edb4-49c9-b593-d223f7449a82

Author: tellthemachines

src/wp-includes/block-supports/elements.php

@@ -46,13 +46,18 @@ function wp_render_elements_support( $block_content, $block ) {
 		$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
 	}
 
+	$hover_link_color = null;
+	if ( ! empty( $block['attrs'] ) ) {
+		$hover_link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', ':hover', 'color', 'text' ), null );
+	}
+
 	/*
-	 * For now we only care about link color.
+	 * For now we only care about link colors.
 	 * This code in the future when we have a public API
 	 * should take advantage of WP_Theme_JSON::compute_style_properties
 	 * and work for any element and style.
 	 */
-	if ( null === $link_color ) {
+	if ( null === $link_color && null === $hover_link_color ) {
 		return $block_content;
 	}
 
@@ -104,6 +109,16 @@ function wp_render_elements_support_styles( $pre_render, $block ) {
 		)
 	);
 
+	if ( isset( $link_block_styles[':hover'] ) ) {
+		wp_style_engine_get_styles(
+			$link_block_styles[':hover'],
+			array(
+				'selector' => ".$class_name a:hover",
+				'context'  => 'block-supports',
+			)
+		);
+	}
+
 	return null;
 }
 

src/wp-includes/class-wp-theme-json.php

@@ -360,6 +360,9 @@ class WP_Theme_JSON {
 			'duotone'          => null,
 			'gradients'        => null,
 			'link'             => null,
+			'heading'          => null,
+			'button'           => null,
+			'caption'          => null,
 			'palette'          => null,
 			'text'             => null,
 		),
@@ -562,6 +565,9 @@ public static function get_element_class_name( $element ) {
 		array( 'border', 'style' ),
 		array( 'border', 'width' ),
 		array( 'color', 'link' ),
+		array( 'color', 'heading' ),
+		array( 'color', 'button' ),
+		array( 'color', 'caption' ),
 		array( 'dimensions', 'minHeight' ),
 		array( 'position', 'sticky' ),
 		array( 'spacing', 'blockGap' ),

src/wp-includes/theme.json

@@ -11,6 +11,8 @@
 		},
 		"color": {
 			"background": true,
+			"button": true,
+			"caption": true,
 			"custom": true,
 			"customDuotone": true,
 			"customGradient": true,
@@ -121,6 +123,7 @@
 					"slug": "midnight"
 				}
 			],
+			"heading": true,
 			"link": false,
 			"palette": [
 				{

tests/phpunit/tests/theme/wpThemeJson.php

@@ -269,7 +269,10 @@ public function test_get_settings_appearance_true_opts_in() {
 				'color'  => true,
 			),
 			'color'      => array(
-				'link' => true,
+				'link'    => true,
+				'heading' => true,
+				'button'  => true,
+				'caption' => true,
 			),
 			'dimensions' => array(
 				'minHeight' => true,
@@ -299,7 +302,10 @@ public function test_get_settings_appearance_true_opts_in() {
 						'color'  => true,
 					),
 					'color'      => array(
-						'link' => true,
+						'link'    => true,
+						'heading' => true,
+						'button'  => true,
+						'caption' => true,
 					),
 					'dimensions' => array(
 						'minHeight' => true,