From 9348416ac5b2cab84ebb1bb3e0287e1cf1e1f6ae Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 1 Oct 2026 13:29:06 +0800
Subject: [PATCH] Icon: Add shadow support

---
 docs/reference-guides/core-blocks/README.md | 2 +-
 packages/block-library/src/icon/README.md   | 2 ++
 packages/block-library/src/icon/block.json  | 4 ++++
 packages/block-library/src/icon/edit.jsx    | 4 ++++
 packages/block-library/src/icon/index.php   | 4 ++++
 5 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/reference-guides/core-blocks/README.md b/docs/reference-guides/core-blocks/README.md
index 04a240d8841f99..767c8e08990bfc 100644
--- a/docs/reference-guides/core-blocks/README.md
+++ b/docs/reference-guides/core-blocks/README.md
@@ -403,7 +403,7 @@ Insert an SVG icon.
 
 -	**Name:** [core/icon](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/core-block-icon/)
 -	**Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
--	**Supports:** align (center, left, right), anchor, ariaLabel, color (background, text), dimensions (width), interactivity (clientNavigation), spacing (margin, padding), ~~html~~
+-	**Supports:** align (center, left, right), anchor, ariaLabel, color (background, text), dimensions (width), interactivity (clientNavigation), shadow, spacing (margin, padding), ~~html~~
 -	**Attributes:** flipHorizontal, flipVertical, icon, rotation
 
 ## Image
diff --git a/packages/block-library/src/icon/README.md b/packages/block-library/src/icon/README.md
index 6cbe936612eca4..435a6d564dabe9 100644
--- a/packages/block-library/src/icon/README.md
+++ b/packages/block-library/src/icon/README.md
@@ -31,6 +31,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
+- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `padding`: `true`
   - `margin`: `true`
@@ -43,6 +44,7 @@ _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/refe
 
 - **root**: `.wp-block-icon svg`
 - **css**: `.wp-block-icon`
+- **shadow**: `.wp-block-icon svg`
 - **spacing**:
   - margin: `.wp-block-icon`
 
diff --git a/packages/block-library/src/icon/block.json b/packages/block-library/src/icon/block.json
index de9f71af79e4bd..ee54df23b8e29b 100644
--- a/packages/block-library/src/icon/block.json
+++ b/packages/block-library/src/icon/block.json
@@ -42,6 +42,9 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -75,6 +78,7 @@
 	"selectors": {
 		"root": ".wp-block-icon svg",
 		"css": ".wp-block-icon",
+		"shadow": ".wp-block-icon svg",
 		"spacing": {
 			"margin": ".wp-block-icon"
 		}
diff --git a/packages/block-library/src/icon/edit.jsx b/packages/block-library/src/icon/edit.jsx
index 76c1eb5a9f293e..f2fb3e22ebdeb8 100644
--- a/packages/block-library/src/icon/edit.jsx
+++ b/packages/block-library/src/icon/edit.jsx
@@ -19,6 +19,7 @@ import {
 	useBlockEditingMode,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	getDimensionsClassesAndStyles as useDimensionsProps,
 } from '@wordpress/block-editor';
@@ -111,6 +112,7 @@ export function Edit( { attributes, setAttributes, isSelected, context } ) {
 		},
 	} );
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = useShadowProps( attributes );
 	const dimensionsProps = useDimensionsProps( attributes );
 
 	const selectedIcon = useSelect(
@@ -282,6 +284,7 @@ export function Edit( { attributes, setAttributes, isSelected, context } ) {
 							style: {
 								...colorProps.style,
 								...borderProps.style,
+								...shadowProps.style,
 								...spacingProps.style,
 								...dimensionsProps.style,
 								...rotationStyle,
@@ -298,6 +301,7 @@ export function Edit( { attributes, setAttributes, isSelected, context } ) {
 						) }
 						style={ {
 							...borderProps.style,
+							...shadowProps.style,
 							...spacingProps.style,
 							...dimensionsProps.style,
 							...rotationStyle,
diff --git a/packages/block-library/src/icon/index.php b/packages/block-library/src/icon/index.php
index e158333bc4da52..a1ed8d49878d19 100644
--- a/packages/block-library/src/icon/index.php
+++ b/packages/block-library/src/icon/index.php
@@ -66,6 +66,9 @@ function render_block_core_icon( $attributes ) {
 		);
 	}
 
+	// Shadow.
+	$shadow_styles = $attributes['style']['shadow'] ?? null;
+
 	// Spacing (Padding).
 	$spacing_styles = array();
 	if ( isset( $attributes['style']['spacing']['padding'] ) ) {
@@ -83,6 +86,7 @@ function render_block_core_icon( $attributes ) {
 		array(
 			'color'      => $color_styles,
 			'border'     => $border_styles,
+			'shadow'     => $shadow_styles,
 			'spacing'    => $spacing_styles,
 			'dimensions' => $dimensions_styles,
 		),