Changeset 55176

Timestamp:

02/01/2023 06:05:44 PM (2 years ago)

Author:

hellofromTonya

Message:

Themes: Add shadow presets support for theme.json.

Adds shadow presets support for theme.json within the WP_Theme_JSON by

• Adding it to presets metadata and valid settings.
• Defining the default shadow presets in Core's theme.json.

Includes PHPUnit tests.

References:

• ​Gutenberg PR 46813
• ​Gutenberg PR 47272

Follow-up to [54162], [52049], [50973].

Props madhudollu, mamaduka, oandregal, scruffian, hellofromTonya.
Fixes #57559.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (4 diffs)
• src/wp-includes/theme.json (modified) (1 diff)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

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

@@ -116 +116 @@
      * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
      *              `prevent_override` value for `color.duotone` to use `color.defaultDuotone`.
+     * @since 6.2.0 Added 'shadow' presets.
      * @var array
      */
@@ -177 +178 @@
             'properties'        => array( 'padding', 'margin' ),
         ),
+        array(
+            'path'              => array( 'shadow', 'presets' ),
+            'prevent_override'  => array( 'shadow', 'defaultPresets' ),
+            'use_default_names' => false,
+            'value_key'         => 'shadow',
+            'css_vars'          => '--wp--preset--shadow--$slug',
+            'classes'           => array(),
+            'properties'        => array( 'box-shadow' ),
+        ),
     );
 
@@ -295 +305 @@
      * @since 6.0.0 Added `color.defaultDuotone`.
      * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
-     * @since 6.2.0 Added `dimensions.minHeight`.
+     * @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', and 'shadow.defaultPresets'.
      * @var array
      */
@@ -338 +348 @@
             'padding'           => null,
             'units'             => null,
+        ),
+        'shadow'                        => array(
+            'presets'        => null,
+            'defaultPresets' => null,
         ),
         'typography'                    => array(

trunk/src/wp-includes/theme.json

@@ -325 +325 @@
                 }
             }
+        },
+        "shadow": {
+            "presets": [
+                {
+                    "name": "Natural",
+                    "slug": "natural",
+                    "shadow": "0 .2rem .3rem 0 rgba(0,0,0, 0.3), 0 .5rem .6rem 0 rgba(0,0,0, 0.4)"
+                },
+                {
+                    "name": "Sharp",
+                    "slug": "sharp",
+                    "shadow": ".5rem .5rem 0 0 rgba(0,0,0, 0.4)"
+                }
+            ]
         },
         "spacing": {

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

@@ -4435 +4435 @@
         $this->assertSame( $expected, $theme_json->get_stylesheet() );
     }
+
+    /**
+     * @ticket 57559
+     */
+    public function test_shadow_preset_styles() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+                'settings' => array(
+                    'shadow' => array(
+                        'presets' => array(
+                            array(
+                                'slug'   => 'natural',
+                                'shadow' => '5px 5px 5px 0 black',
+                            ),
+                            array(
+                                'slug'   => 'sharp',
+                                'shadow' => '5px 5px black',
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $expected_styles = 'body{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
+        $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" does not match expectations' );
+        $this->assertSame( $expected_styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Styles returned from "::get_stylesheet()" when requiring "variables" type does not match expectations' );
+    }
+
+    /**
+     * @ticket 57559
+     */
+    public function test_get_shadow_styles_for_blocks() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+                'settings' => array(
+                    'shadow' => array(
+                        'presets' => array(
+                            array(
+                                'slug'   => 'natural',
+                                'shadow' => '5px 5px 0 0 black',
+                            ),
+                        ),
+                    ),
+                ),
+                'styles'   => array(
+                    'blocks'   => array(
+                        'core/paragraph' => array(
+                            'shadow' => 'var(--wp--preset--shadow--natural)',
+                        ),
+                    ),
+                    'elements' => array(
+                        'button' => array(
+                            'shadow' => 'var:preset|shadow|natural',
+                        ),
+                        'link'   => array(
+                            'shadow' => array( 'ref' => 'styles.elements.button.shadow' ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $global_styles   = 'body{--wp--preset--shadow--natural: 5px 5px 0 0 black;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+        $element_styles  = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}.wp-element-button, .wp-block-button__link{box-shadow: var(--wp--preset--shadow--natural);}p{box-shadow: var(--wp--preset--shadow--natural);}';
+        $expected_styles = $global_styles . $element_styles;
+
+        $this->assertSame( $expected_styles, $theme_json->get_stylesheet() );
+    }
 }