From 1c41772f35f3a58f7960506c2dcb318a8afb1080 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 31 Jan 2025 15:10:18 +0530
Subject: [PATCH 1/4] feat: add remove button for block editor shadow panel

---
 .../global-styles/shadow-panel-components.js  | 45 ++++++++++++++-----
 .../src/components/global-styles/style.scss   | 22 +++++++++
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index 1cfdff0be286ee..f8c18af9bc420a 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -14,7 +14,7 @@ import {
 	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
 
 /**
  * External dependencies
@@ -119,7 +119,7 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 		<Dropdown
 			popoverProps={ popoverProps }
 			className="block-editor-global-styles__shadow-dropdown"
-			renderToggle={ renderShadowToggle() }
+			renderToggle={ renderShadowToggle( shadow, onShadowChange ) }
 			renderContent={ () => (
 				<DropdownContentWrapper paddingSize="medium">
 					<ShadowPopoverContainer
@@ -133,7 +133,7 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 	);
 }
 
-function renderShadowToggle() {
+function renderShadowToggle( shadow, onShadowChange ) {
 	return ( { onToggle, isOpen } ) => {
 		const toggleProps = {
 			onClick: onToggle,
@@ -141,17 +141,38 @@ function renderShadowToggle() {
 			'aria-expanded': isOpen,
 		};
 
+		const removeButtonProps = {
+			onClick: () => {
+				onShadowChange( undefined );
+			},
+			className: clsx(
+				'block-editor-global-styles__shadow-editor__remove-button',
+				{ 'is-open': isOpen }
+			),
+			label: __( 'Remove shadow' ),
+		};
+
 		return (
-			<Button __next40pxDefaultSize { ...toggleProps }>
-				<HStack justify="flex-start">
-					<Icon
-						className="block-editor-global-styles__toggle-icon"
-						icon={ shadowIcon }
-						size={ 24 }
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<HStack justify="flex-start">
+						<Icon
+							className="block-editor-global-styles__toggle-icon"
+							icon={ shadowIcon }
+							size={ 24 }
+						/>
+						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+					</HStack>
+				</Button>
+				{ !! shadow && (
+					<Button
+						__next40pxDefaultSize
+						size="small"
+						icon={ reset }
+						{ ...removeButtonProps }
 					/>
-					<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
-				</HStack>
-			</Button>
+				) }
+			</>
 		);
 	};
 }
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index c51ffa3116d9f0..69e6b80433eade 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -24,6 +24,7 @@
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
 	padding: 0;
+	position: relative;
 
 	button {
 		width: 100%;
@@ -77,3 +78,24 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.block-editor-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	transition: opacity 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	.block-editor-global-styles__shadow-dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}

From 6fa7b84fbe0eb33d016af3d42d20cd9b6594ea2f Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 31 Jan 2025 15:48:45 +0530
Subject: [PATCH 2/4] refactor: simplify the markup

---
 .../global-styles/shadow-panel-components.js  | 20 ++++---
 .../src/components/global-styles/style.scss   | 52 ++++++++++---------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index f8c18af9bc420a..12ea2551dd7bc2 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -5,10 +5,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
-	FlexItem,
 	Dropdown,
 	Composite,
 	Tooltip,
@@ -143,6 +141,9 @@ function renderShadowToggle( shadow, onShadowChange ) {
 
 		const removeButtonProps = {
 			onClick: () => {
+				if ( isOpen ) {
+					onToggle();
+				}
 				onShadowChange( undefined );
 			},
 			className: clsx(
@@ -154,15 +155,12 @@ function renderShadowToggle( shadow, onShadowChange ) {
 
 		return (
 			<>
-				<Button __next40pxDefaultSize { ...toggleProps }>
-					<HStack justify="flex-start">
-						<Icon
-							className="block-editor-global-styles__toggle-icon"
-							icon={ shadowIcon }
-							size={ 24 }
-						/>
-						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
-					</HStack>
+				<Button
+					__next40pxDefaultSize
+					icon={ shadowIcon }
+					{ ...toggleProps }
+				>
+					{ __( 'Drop shadow' ) }
 				</Button>
 				{ !! shadow && (
 					<Button
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 69e6b80433eade..6a488ed355ca2f 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -1,7 +1,3 @@
-.block-editor-global-styles__toggle-icon {
-	fill: currentColor;
-}
-
 // @todo Ideally, popover, swatch size, and gap values should be CSS variables
 // to apply precise grid layouts.
 // https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
@@ -36,6 +32,33 @@
 	}
 }
 
+.block-editor-global-styles__shadow-dropdown {
+	> .components-button.has-icon.has-text:first-child {
+		gap: $grid-unit-10;
+	}
+}
+
+.block-editor-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	transition: opacity 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	.block-editor-global-styles__shadow-dropdown:hover &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}
+
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	appearance: none;
@@ -78,24 +101,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-.block-editor-global-styles__shadow-editor__remove-button {
-	position: absolute;
-	right: 0;
-	top: $grid-unit;
-	margin: auto $grid-unit auto;
-	opacity: 0;
-	transition: opacity 0.1s ease-in-out;
-	@include reduce-motion("transition");
-
-	.block-editor-global-styles__shadow-dropdown:hover &,
-	&:focus,
-	&:hover {
-		opacity: 1;
-	}
-
-	@media (hover: none) {
-		// Show reset button on devices that do not support hover.
-		opacity: 1;
-	}
-}

From 8fc1b13b016e22d3bf5c0b2f666f52c3f574431e Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Mon, 3 Feb 2025 09:49:59 +0530
Subject: [PATCH 3/4] refactor: revert `toggle` markup and use consistent
 wording

---
 .../global-styles/shadow-panel-components.js  | 19 ++++++++++++-------
 .../src/components/global-styles/style.scss   | 15 +++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index 12ea2551dd7bc2..6891b4e9ef273e 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -5,8 +5,10 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
+	FlexItem,
 	Dropdown,
 	Composite,
 	Tooltip,
@@ -150,17 +152,20 @@ function renderShadowToggle( shadow, onShadowChange ) {
 				'block-editor-global-styles__shadow-editor__remove-button',
 				{ 'is-open': isOpen }
 			),
-			label: __( 'Remove shadow' ),
+			label: __( 'Remove' ),
 		};
 
 		return (
 			<>
-				<Button
-					__next40pxDefaultSize
-					icon={ shadowIcon }
-					{ ...toggleProps }
-				>
-					{ __( 'Drop shadow' ) }
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<HStack justify="flex-start">
+						<Icon
+							className="block-editor-global-styles__toggle-icon"
+							icon={ shadowIcon }
+							size={ 24 }
+						/>
+						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+					</HStack>
 				</Button>
 				{ !! shadow && (
 					<Button
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 6a488ed355ca2f..5684cf9c0d3034 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -1,3 +1,7 @@
+.block-editor-global-styles__toggle-icon {
+	fill: currentColor;
+}
+
 // @todo Ideally, popover, swatch size, and gap values should be CSS variables
 // to apply precise grid layouts.
 // https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
@@ -32,20 +36,15 @@
 	}
 }
 
-.block-editor-global-styles__shadow-dropdown {
-	> .components-button.has-icon.has-text:first-child {
-		gap: $grid-unit-10;
-	}
-}
-
 .block-editor-global-styles__shadow-editor__remove-button {
 	position: absolute;
 	right: 0;
 	top: $grid-unit;
 	margin: auto $grid-unit auto;
 	opacity: 0;
-	transition: opacity 0.1s ease-in-out;
-	@include reduce-motion("transition");
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
 
 	.block-editor-global-styles__shadow-dropdown:hover &,
 	&:focus,

From a397d3b72a1719aba882b64a55dbb38aa6305686 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Mon, 3 Feb 2025 14:18:03 +0530
Subject: [PATCH 4/4] a11y: return focus to parent button on reset

---
 .../components/global-styles/shadow-panel-components.js    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index 6891b4e9ef273e..c335ef29384f4d 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -13,7 +13,7 @@ import {
 	Composite,
 	Tooltip,
 } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useRef } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
 
 /**
@@ -135,10 +135,13 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
 
 function renderShadowToggle( shadow, onShadowChange ) {
 	return ( { onToggle, isOpen } ) => {
+		const shadowButtonRef = useRef( undefined );
+
 		const toggleProps = {
 			onClick: onToggle,
 			className: clsx( { 'is-open': isOpen } ),
 			'aria-expanded': isOpen,
+			ref: shadowButtonRef,
 		};
 
 		const removeButtonProps = {
@@ -147,6 +150,8 @@ function renderShadowToggle( shadow, onShadowChange ) {
 					onToggle();
 				}
 				onShadowChange( undefined );
+				// Return focus to parent button.
+				shadowButtonRef.current?.focus();
 			},
 			className: clsx(
 				'block-editor-global-styles__shadow-editor__remove-button',