Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add reset button to color control #67116

Merged
merged 10 commits into from
Dec 10, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -120,3 +121,22 @@ $swatch-gap: 12px;
flex-shrink: 0;
}
}

.block-editor-panel-color-gradient-settings__reset {
position: absolute;
display: inline-flex;
juanfra marked this conversation as resolved.
Show resolved Hide resolved
right: 0;
top: 0;
bottom: 0;
juanfra marked this conversation as resolved.
Show resolved Hide resolved
opacity: 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we confirm that it's better if the button is hidden by default?

I'm having second thoughts if this is good for discovery. A user might be wondering how to reset the color and wouldn't know unless they hover on the tools panel item.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The intention was to show the reset button only on hover or focus, making it easier to reset colors with fewer clicks.

From my perspective, showing the button on hover is a subtle and unobtrusive way to achieve this without adding visual clutter to the UI. As for discoverability, I think users will naturally figure it out when they try resetting colors the usual way, which should be sufficient.

transition: opacity 0.1s ease-in-out;
juanfra marked this conversation as resolved.
Show resolved Hide resolved

.block-editor-panel-color-gradient-settings__dropdown:hover + & {
opacity: 1;
}

&:focus,
&:hover {
juanfra marked this conversation as resolved.
Show resolved Hide resolved
opacity: 1;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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' )
juanfra marked this conversation as resolved.
Show resolved Hide resolved
}
className="block-editor-panel-color-gradient-settings__reset"
icon={ resetIcon }
onClick={ resetValue }
/>
) }
</>
);
} }
renderContent={ () => (
Expand Down
Loading