From 48b609b3972087a63d72a18ccdd8a9ea46469160 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Tue, 19 Nov 2024 15:18:48 +0100
Subject: [PATCH 1/8] Add reset button to color control

---
 .../components/colors-gradients/style.scss    | 20 +++++++++++++
 .../components/global-styles/color-panel.js   | 28 +++++++++++++++----
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index fc1b1a4d469033..44281b31d5eddc 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -64,6 +64,7 @@ $swatch-gap: 12px;
 .block-editor-tools-panel-color-gradient-settings__item {
 	padding: 0;
 	max-width: 100%;
+	position: relative;
 
 	// Border styles.
 	border-left: 1px solid $gray-300;
@@ -120,3 +121,22 @@ $swatch-gap: 12px;
 		flex-shrink: 0;
 	}
 }
+
+.block-editor-panel-color-gradient-settings__reset {
+	position: absolute;
+	display: inline-flex;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	opacity: 0;
+	transition: opacity 0.1s ease-in-out;
+
+	.block-editor-panel-color-gradient-settings__dropdown:hover + & {
+		opacity: 1;
+	}
+
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+}
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 7c5257ae93bfaa..129f2d79be4a5c 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -30,6 +30,7 @@ import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
+import { reset as resetIcon } from '@wordpress/icons';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -231,12 +232,27 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button __next40pxDefaultSize { ...toggleProps }>
-							<LabeledColorIndicators
-								indicators={ indicators }
-								label={ label }
-							/>
-						</Button>
+						<>
+							<Button { ...toggleProps } __next40pxDefaultSize>
+								<LabeledColorIndicators
+									indicators={ indicators }
+									label={ label }
+								/>
+							</Button>
+							{ hasValue() && (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									aria-label={
+										/* translators: %s is the type of color property, e.g., "background" */
+										__( 'Reset %s color' )
+									}
+									className="block-editor-panel-color-gradient-settings__reset"
+									icon={ resetIcon }
+									onClick={ resetValue }
+								/>
+							) }
+						</>
 					);
 				} }
 				renderContent={ () => (

From a3fe92f2536cd261d2a4be03a5018ec42aafa815 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 28 Nov 2024 17:02:54 +0100
Subject: [PATCH 2/8] Apply suggestions from code review.

---
 .../src/components/colors-gradients/style.scss           | 7 +------
 .../src/components/global-styles/color-panel.js          | 9 ++++++---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 44281b31d5eddc..3015c7a636af19 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -124,17 +124,12 @@ $swatch-gap: 12px;
 
 .block-editor-panel-color-gradient-settings__reset {
 	position: absolute;
-	display: inline-flex;
 	right: 0;
 	top: 0;
-	bottom: 0;
 	opacity: 0;
 	transition: opacity 0.1s ease-in-out;
 
-	.block-editor-panel-color-gradient-settings__dropdown:hover + & {
-		opacity: 1;
-	}
-
+	.block-editor-panel-color-gradient-settings__dropdown:hover + &,
 	&:focus,
 	&:hover {
 		opacity: 1;
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 129f2d79be4a5c..7701ef4bc5ad9f 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -20,7 +20,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -244,8 +244,11 @@ function ColorPanelDropdown( {
 									__next40pxDefaultSize
 									label={ __( 'Reset' ) }
 									aria-label={
-										/* translators: %s is the type of color property, e.g., "background" */
-										__( 'Reset %s color' )
+										sprintf(
+											/* translators: %s: The name of the color property being reset e.g. "Background" */
+											__( 'Reset %s' ),
+											label.toLowerCase()
+										)
 									}
 									className="block-editor-panel-color-gradient-settings__reset"
 									icon={ resetIcon }

From 775c4d31c34bdc8ce99126cf869c46b02c5b67db Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 28 Nov 2024 17:03:57 +0100
Subject: [PATCH 3/8] Keep focus on the toggle button when hitting reset.

---
 .../src/components/global-styles/color-panel.js        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 7701ef4bc5ad9f..36386c87edf12d 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -19,7 +19,7 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -209,6 +209,7 @@ function ColorPanelDropdown( {
 } ) {
 	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
 	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+	const colorGradientDropdownButtonRef = useRef();
 	return (
 		<ToolsPanelItem
 			className="block-editor-tools-panel-color-gradient-settings__item"
@@ -229,6 +230,7 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
+						ref: colorGradientDropdownButtonRef,
 					};
 
 					return (
@@ -252,7 +254,11 @@ function ColorPanelDropdown( {
 									}
 									className="block-editor-panel-color-gradient-settings__reset"
 									icon={ resetIcon }
-									onClick={ resetValue }
+									onClick={() => {
+										resetValue();
+										// Return focus to parent button
+										colorGradientDropdownButtonRef.current?.focus();
+									} }
 								/>
 							) }
 						</>

From da711943f2c04b4ce1b15b863599c04d871414e8 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Fri, 29 Nov 2024 12:01:33 +0100
Subject: [PATCH 4/8] Apply suggestions from code review.

---
 .../src/components/global-styles/color-panel.js  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 36386c87edf12d..f2f5416ab300e8 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -209,7 +209,7 @@ function ColorPanelDropdown( {
 } ) {
 	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
 	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
-	const colorGradientDropdownButtonRef = useRef();
+	const colorGradientDropdownButtonRef = useRef( undefined );
 	return (
 		<ToolsPanelItem
 			className="block-editor-tools-panel-color-gradient-settings__item"
@@ -245,16 +245,14 @@ function ColorPanelDropdown( {
 								<Button
 									__next40pxDefaultSize
 									label={ __( 'Reset' ) }
-									aria-label={
-										sprintf(
-											/* translators: %s: The name of the color property being reset e.g. "Background" */
-											__( 'Reset %s' ),
-											label.toLowerCase()
-										)
-									}
+									aria-label={ sprintf(
+										/* translators: %s: The name of the color property being reset e.g. "Background" */
+										__( 'Reset %s' ),
+										label.toLowerCase()
+									) }
 									className="block-editor-panel-color-gradient-settings__reset"
 									icon={ resetIcon }
-									onClick={() => {
+									onClick={ () => {
 										resetValue();
 										// Return focus to parent button
 										colorGradientDropdownButtonRef.current?.focus();

From 062555ff6a087b6c3af222545d963f7a53e45356 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Fri, 29 Nov 2024 12:02:34 +0100
Subject: [PATCH 5/8] Add `exact` to specify which element to resolve.

---
 test/e2e/specs/editor/blocks/heading.spec.js                  | 2 +-
 .../specs/site-editor/user-global-styles-revisions.spec.js    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
index 4670196c485f5f..c4259cf5b6d2fe 100644
--- a/test/e2e/specs/editor/blocks/heading.spec.js
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -214,7 +214,7 @@ test.describe( 'Heading', () => {
 			.getByRole( 'region', {
 				name: 'Editor settings',
 			} )
-			.getByRole( 'button', { name: 'Text' } );
+			.getByRole( 'button', { name: 'Text', exact: true } );
 
 		await textColor.click();
 
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index 91142d5395640c..917bf1e0c9c69e 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -76,7 +76,9 @@ test.describe( 'Style Revisions', () => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
 		await page.getByRole( 'button', { name: 'Colors' } ).click();
-		await page.getByRole( 'button', { name: 'Background' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Background', exact: true } )
+			.click();
 		await page
 			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
 			.click( { force: true } );

From 54b8accd2f73efbc7ffe706901ccbe7489f470ad Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 5 Dec 2024 15:18:48 +0100
Subject: [PATCH 6/8] Apply suggestions from code review.

---
 .../src/components/colors-gradients/style.scss     | 14 +++++++++++++-
 .../src/components/global-styles/color-panel.js    |  6 +-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 3015c7a636af19..beddda7922ec30 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -125,9 +125,21 @@ $swatch-gap: 12px;
 .block-editor-panel-color-gradient-settings__reset {
 	position: absolute;
 	right: 0;
-	top: 0;
+	top: 8px;
+	margin: auto $grid-unit auto;
 	opacity: 0;
 	transition: opacity 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	// Override the button style.
+	&.components-button.has-icon {
+		border-radius: 0;
+		height: $button-size-small;
+		width: $button-size-small;
+		min-width: 0;
+		padding: 0;
+
+	}
 
 	.block-editor-panel-color-gradient-settings__dropdown:hover + &,
 	&:focus,
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index f2f5416ab300e8..7077c6ab6eed39 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -245,11 +245,7 @@ function ColorPanelDropdown( {
 								<Button
 									__next40pxDefaultSize
 									label={ __( 'Reset' ) }
-									aria-label={ sprintf(
-										/* translators: %s: The name of the color property being reset e.g. "Background" */
-										__( 'Reset %s' ),
-										label.toLowerCase()
-									) }
+									aria-label={ __( 'Reset' ) }
 									className="block-editor-panel-color-gradient-settings__reset"
 									icon={ resetIcon }
 									onClick={ () => {

From 69a16d5d83f500987cb08c87e568203b7c9bea11 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 5 Dec 2024 15:25:07 +0100
Subject: [PATCH 7/8] Remove inclusion of `sprintf`

---
 .../block-editor/src/components/global-styles/color-panel.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 7077c6ab6eed39..6104d25349f799 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -20,7 +20,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback, useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies

From c1a1384d12f3fb9518d6dab9289953d6679a3d28 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Mon, 9 Dec 2024 11:09:21 +0100
Subject: [PATCH 8/8] Add suggestions from code review.

---
 .../src/components/colors-gradients/style.scss       | 12 +++---------
 .../src/components/global-styles/color-panel.js      |  2 +-
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index beddda7922ec30..222a5b239cf992 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -125,20 +125,14 @@ $swatch-gap: 12px;
 .block-editor-panel-color-gradient-settings__reset {
 	position: absolute;
 	right: 0;
-	top: 8px;
+	top: $grid-unit;
 	margin: auto $grid-unit auto;
 	opacity: 0;
 	transition: opacity 0.1s ease-in-out;
 	@include reduce-motion("transition");
 
-	// Override the button style.
-	&.components-button.has-icon {
-		border-radius: 0;
-		height: $button-size-small;
-		width: $button-size-small;
-		min-width: 0;
-		padding: 0;
-
+	&.block-editor-panel-color-gradient-settings__reset {
+		border-radius: $radius-small;
 	}
 
 	.block-editor-panel-color-gradient-settings__dropdown:hover + &,
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 6104d25349f799..f1a1834967ed92 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -245,8 +245,8 @@ function ColorPanelDropdown( {
 								<Button
 									__next40pxDefaultSize
 									label={ __( 'Reset' ) }
-									aria-label={ __( 'Reset' ) }
 									className="block-editor-panel-color-gradient-settings__reset"
+									size="small"
 									icon={ resetIcon }
 									onClick={ () => {
 										resetValue();