Changeset 55176

Timestamp:

02/01/2023 06:05:44 PM (4 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() );
+        }
 }