Skip to content

Commit

Permalink
Shadow Panel: Add reset button (WordPress#68981)
Browse files Browse the repository at this point in the history
* feat: add remove button for block editor shadow panel

* refactor: simplify the markup

* refactor: revert `toggle` markup and use consistent wording

* a11y: return focus to parent button on reset

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
  • Loading branch information
4 people authored and Kallyan01 committed Feb 24, 2025
1 parent 7384ee5 commit 3188b78
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import {
Composite,
Tooltip,
} from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
import { useMemo, useRef } from '@wordpress/element';
import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';

/**
* External dependencies
Expand Down Expand Up @@ -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
Expand All @@ -133,25 +133,54 @@ export function ShadowPopover( { shadow, onShadowChange, settings } ) {
);
}

function renderShadowToggle() {
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 = {
onClick: () => {
if ( isOpen ) {
onToggle();
}
onShadowChange( undefined );
// Return focus to parent button.
shadowButtonRef.current?.focus();
},
className: clsx(
'block-editor-global-styles__shadow-editor__remove-button',
{ 'is-open': isOpen }
),
label: __( 'Remove' ),
};

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>
) }
</>
);
};
}
Expand Down
23 changes: 23 additions & 0 deletions packages/block-editor/src/components/global-styles/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
.block-editor-global-styles__shadow-dropdown {
display: block;
padding: 0;
position: relative;

button {
width: 100%;
Expand All @@ -35,6 +36,28 @@
}
}

.block-editor-global-styles__shadow-editor__remove-button {
position: absolute;
right: 0;
top: $grid-unit;
margin: auto $grid-unit auto;
opacity: 0;
@media not (prefers-reduced-motion) {
transition: opacity 0.1s ease-in-out;
}

.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;
Expand Down

0 comments on commit 3188b78

Please sign in to comment.