Changeset 56028

Timestamp:

06/26/2023 01:13:56 AM (19 months 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(