Changeset 56028

Timestamp:

06/26/2023 01:13:56 AM (3 years ago)

Author:

isabel_brison

Message:

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.

Location:

trunk

Files:

• src/wp-includes/block-supports/elements.php (modified) (2 diffs)
• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)
• src/wp-includes/theme.json (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (2 diffs)

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

@@ -47 +47 @@
         }
 
+        $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;
         }
@@ -105 +110 @@
         );
 
+        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;
 }

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

@@ -361 +361 @@
                         'gradients'        => null,
                         'link'             => null,
+                        'heading'          => null,
+                        'button'           => null,
+                        'caption'          => null,
                         'palette'          => null,
                         'text'             => null,
@@ -563 +566 @@
                 array( 'border', 'width' ),
                 array( 'color', 'link' ),
+                array( 'color', 'heading' ),
+                array( 'color', 'button' ),
+                array( 'color', 'caption' ),
                 array( 'dimensions', 'minHeight' ),
                 array( 'position', 'sticky' ),

trunk/src/wp-includes/theme.json

@@ -12 +12 @@
                 "color": {
                         "background": true,
+                        "button": true,
+                        "caption": true,
                         "custom": true,
                         "customDuotone": true,
@@ -122 +124 @@
                                 }
                         ],
+                        "heading": true,
                         "link": false,
                         "palette": [

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -270 +270 @@
                         ),
                         'color'      => array(
-                                'link' => true,
+                                'link'    => true,
+                                'heading' => true,
+                                'button'  => true,
+                                'caption' => true,
                         ),
                         'dimensions' => array(
@@ -300 +303 @@
                                         ),
                                         'color'      => array(
-                                                'link' => true,
+                                                'link'    => true,
+                                                'heading' => true,
+                                                'button'  => true,
+                                                'caption' => true,
                                         ),
                                         'dimensions' => array(