add box-shadow support for blocks via theme.json (#41972)

* add box-shadow support to blocks in theme.json

reduce specificity for default button shadow

update schema for shadow

fix lint issues

* add shadow support in style-engine

* add condition to handle the case of shadow style property

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -195,6 +195,13 @@ CSS and SVG filter styles.
 | ---       | ---    |---   |
 | duotone | string |  |
 
+---
+
+### shadow
+
+Box shadow styles.
+
+
 ---
 
 <!-- END TOKEN Autogenerated - DO NOT EDIT -->

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -79,6 +79,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 		'text-decoration'                   => array( 'typography', 'textDecoration' ),
 		'text-transform'                    => array( 'typography', 'textTransform' ),
 		'filter'                            => array( 'filter', 'duotone' ),
+		'box-shadow'                        => array( 'shadow' ),
 	);
 
 	/**
@@ -153,9 +154,11 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 		// hence, the schema for blocks & elements should not have them.
 		$styles_non_top_level = static::VALID_STYLES;
 		foreach ( array_keys( $styles_non_top_level ) as $section ) {
-			foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
-				if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
-					unset( $styles_non_top_level[ $section ][ $prop ] );
+			if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) {
+				foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
+					if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
+						unset( $styles_non_top_level[ $section ][ $prop ] );
+					}
 				}
 			}
 		}
@@ -314,6 +317,7 @@ public static function remove_insecure_properties( $theme_json ) {
 			'gradient'   => null,
 			'text'       => null,
 		),
+		'shadow'     => null,
 		'filter'     => array(
 			'duotone' => null,
 		),

packages/block-library/src/button/style.scss

@@ -4,7 +4,6 @@ $blocks-block__margin: 0.5em;
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
-	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
 	text-align: center;
@@ -25,6 +24,7 @@ $blocks-block__margin: 0.5em;
 // They are needed for backwards compatibility.
 :where(.wp-block-button__link) {
 	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	box-shadow: none;
 	text-decoration: none;
 
 	// 100% causes an oval, but any explicit but really high value retains the pill shape.

packages/style-engine/src/styles/index.ts

@@ -3,6 +3,7 @@
  */
 import border from './border';
 import color from './color';
+import shadow from './shadow';
 import spacing from './spacing';
 import typography from './typography';
 
@@ -11,4 +12,5 @@ export const styleDefinitions = [
 	...color,
 	...spacing,
 	...typography,
+	...shadow,
 ];

packages/style-engine/src/styles/shadow/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const shadow = {
+	name: 'shadow',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule( style, options, [ 'shadow' ], 'boxShadow' );
+	},
+};
+
+export default [ shadow ];

schemas/json/theme.json

@@ -1087,6 +1087,10 @@
 						}
 					},
 					"additionalProperties": false
+				},
+				"shadow": {
+					"description": "Box shadow styles.",
+					"type": "string"
 				}
 			}
 		},
@@ -1101,7 +1105,9 @@
 						"border": {},
 						"color": {},
 						"spacing": {},
-						"typography": {}
+						"typography": {},
+						"filter": {},
+						"shadow": {}
 					},
 					"additionalProperties": false
 				}