add box-shadow support for blocks via templates

lib/block-supports/shadow.php

@@ -0,0 +1,124 @@
+<?php
+/**
+ * Shadow block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the style and shadow block attributes for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_shadow_support( $block_type ) {
+	if ( ! property_exists( $block_type, 'supports' ) ) {
+		return;
+	}
+
+	$has_shadow_support = _wp_array_get( $block_type->supports, array( 'shadow' ), false );
+	if ( ! $has_shadow_support ) {
+		return;
+	}
+
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	if ( $has_shadow_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+
+	if ( $has_shadow_support && ! array_key_exists( 'shadow', $block_type->attributes ) ) {
+		$block_type->attributes['shadow'] = array(
+			'type' => 'string',
+		);
+	}
+}
+
+/**
+ * Add CSS classes and inline styles for typography features such as font sizes
+ * to the incoming attributes array. This will be applied to the block markup in
+ * the front-end.
+ *
+ * @param  WP_Block_Type $block_type       Block type.
+ * @param  array         $block_attributes Block attributes.
+ *
+ * @return array Typography CSS classes and inline styles.
+ */
+function gutenberg_apply_shadow_support( $block_type, $block_attributes ) {
+	if ( ! property_exists( $block_type, 'supports' ) ) {
+		return array();
+	}
+
+	$has_shadow_support = _wp_array_get( $block_type->supports, array( 'shadow' ), false );
+	if ( ! $has_shadow_support ) {
+		return array();
+	}
+
+	$shadow_block_styles = array();
+
+    // print_r($block_attributes);
+
+	$preset_shadow = array_key_exists( 'shadow', $block_attributes ) ? "var:preset|shadow|{$block_attributes['shadow']}" : null;
+    $custom_shadow                    = isset( $block_attributes['style']['shadow'] ) ? $block_attributes['style']['shadow'] : null;
+    $shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow;
+
+	$attributes = array();
+	$styles     = gutenberg_style_engine_get_styles(
+		array( 'shadow' => $shadow_block_styles ),
+		// array( 'convert_vars_to_classnames' => true )
+	);
+
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+
+	return $attributes;
+}
+
+
+/**
+ * Returns a font-size value based on a given font-size preset.
+ * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+ *
+ * @param array   $preset                      fontSizes preset value as seen in theme.json.
+ * @param boolean $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * @return string Font-size value.
+ */
+function gutenberg_get_shadow_value( $preset ) {
+    $slug = $preset['slug'];
+    $x = isset($preset['x']) ? $preset['x'] : '0';
+    $y = isset($preset['y']) ? $preset['y'] : '0';
+    $blur = isset($preset['blur']) ? $preset['blur'] : '0';
+    $spread = isset($preset['spread']) ? $preset['spread'] : '0';
+    $color = $preset['color'];
+    $inset = $preset['inset'];
+
+	$shadow = $x .' '. $y.' '.$blur.' '.$spread;
+
+    if (isset($color)) {
+        // set color only if defined, let it fallback to browser default otherwise
+        $shadow.= ' '.$color;
+    }
+
+    if (isset($inset) && true === $inset) {
+        $shadow.= ' inset';
+    }
+
+    return $shadow;
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register(
+	'shadow',
+	array(
+		'register_attribute' => 'gutenberg_register_shadow_support',
+		'apply'              => 'gutenberg_apply_shadow_support',
+	)
+);

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

@@ -78,6 +78,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' ),
 	);
 
 	/**
@@ -313,6 +314,7 @@ public static function remove_insecure_properties( $theme_json ) {
 			'gradient'   => null,
 			'text'       => null,
 		),
+		'shadow'     => null,
 		'filter'     => array(
 			'duotone' => null,
 		),
@@ -1082,6 +1084,15 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			'classes'           => array(),
 			'properties'        => array( 'padding', 'margin' ),
 		),
+		array(
+			'path'              => array( 'shadows' ),
+			'prevent_override'  => false,
+			'use_default_names' => false,
+			'value_func'        => 'gutenberg_get_shadow_value',
+			'css_vars'          => '--wp--preset--shadow--$slug',
+			'classes'           => array( '.has-$slug-shadow' => 'box-shadow' ),
+			'properties'        => array( 'box-shadow' ),
+		),
 	);
 
 	/**
@@ -1140,6 +1151,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			'textDecoration' => null,
 			'textTransform'  => null,
 		),
+		'shadows' => null,
 	);
 
 	/**

lib/load.php

@@ -140,3 +140,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/spacing.php';
 require __DIR__ . '/block-supports/dimensions.php';
 require __DIR__ . '/block-supports/duotone.php';
+require __DIR__ . '/block-supports/shadow.php';

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;
@@ -32,6 +31,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/class-wp-style-engine.php

@@ -212,6 +212,15 @@ class WP_Style_Engine {
 				'path'          => array( 'typography', 'letterSpacing' ),
 			),
 		),
+		"shadow" => array(
+			'property_keys' => array(
+				'default' => 'box-shadow',
+			),
+			'path'          => array( 'shadows' ),
+			'classnames'    => array(
+				'has-$slug-shadow' => 'box-shadow',
+			),
+		),
 	);
 
 	/**

schemas/json/theme.json

@@ -1078,6 +1078,10 @@
 						}
 					},
 					"additionalProperties": false
+				},
+				"shadow": {
+					"description": "Sets the `box-shadow` CSS property.",
+					"type": "string"
 				}
 			}
 		},
@@ -1092,7 +1096,9 @@
 						"border": {},
 						"color": {},
 						"spacing": {},
-						"typography": {}
+						"typography": {},
+						"filter": {},
+						"shadow": {}
 					},
 					"additionalProperties": false
 				}