diff --git a/src/wp-includes/block-supports/elements.php b/src/wp-includes/block-supports/elements.php index 730d1a301b034..fa2536908ca6e 100644 --- a/src/wp-includes/block-supports/elements.php +++ b/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; } diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 8a44afbb35ac2..93a1376e3eeec 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -356,6 +356,9 @@ class WP_Theme_JSON { 'duotone' => null, 'gradients' => null, 'link' => null, + 'heading' => null, + 'button' => null, + 'caption' => null, 'palette' => null, 'text' => null, ), @@ -555,6 +558,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' ), diff --git a/src/wp-includes/theme.json b/src/wp-includes/theme.json index af447990608a3..3c238c8228243 100644 --- a/src/wp-includes/theme.json +++ b/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": [ { diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php index 8b54960ccfba8..67e110af21b76 100644 --- a/tests/phpunit/tests/theme/wpThemeJson.php +++ b/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,