From d9daa2186dff3f4028de363c544a08064fb041ec Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Tue, 10 Dec 2024 11:41:25 +0100 Subject: [PATCH] Add reset button to color control (#67116) * Add reset button to color control * Apply suggestions from code review. * Keep focus on the toggle button when hitting reset. * Apply suggestions from code review. * Add `exact` to specify which element to resolve. * Apply suggestions from code review. * Remove inclusion of `sprintf` Co-authored-by: juanfra Co-authored-by: tyxla Co-authored-by: t-hamano Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo Co-authored-by: dhruvang21 Co-authored-by: jasmussen Co-authored-by: jameskoster --- .../components/colors-gradients/style.scss | 21 ++++++++++++ .../components/global-styles/color-panel.js | 33 +++++++++++++++---- test/e2e/specs/editor/blocks/heading.spec.js | 2 +- .../user-global-styles-revisions.spec.js | 4 ++- 4 files changed, 51 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 fc1b1a4d469033..222a5b239cf992 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,23 @@ $swatch-gap: 12px; flex-shrink: 0; } } + +.block-editor-panel-color-gradient-settings__reset { + 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-panel-color-gradient-settings__reset { + border-radius: $radius-small; + } + + .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 7c5257ae93bfaa..f1a1834967ed92 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 { __ } from '@wordpress/i18n'; /** @@ -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 ); @@ -208,6 +209,7 @@ function ColorPanelDropdown( { } ) { const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined ); const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {}; + const colorGradientDropdownButtonRef = useRef( undefined ); return ( - - + <> + + { hasValue() && ( +