Skip to content

Commit

Permalink
update shadows edit panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@madhusudhand
madhusudhand committed May 2, 2024
1 parent ae66bba commit 736f876
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 63 deletions.
174 changes: 111 additions & 63 deletions packages/edit-site/src/components/global-styles/shadows-edit-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,15 @@ import {
__experimentalGrid as Grid,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
__experimentalUseNavigator as useNavigator,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
Dropdown,
DropdownMenu,
NavigableMenu,
RangeControl,
Button,
FlexItem,
ColorPicker,
ColorPalette,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
Expand All @@ -30,6 +34,7 @@ import {
shadow as shadowIcon,
lineSolid,
settings,
moreVertical,
} from '@wordpress/icons';
import { useState, useMemo } from '@wordpress/element';
import { debounce } from '@wordpress/compose';
Expand All @@ -49,6 +54,21 @@ import {

const { useGlobalSetting } = unlock( blockEditorPrivateApis );

const menuItems = [
{
label: __( 'Rename' ),
action: 'rename',
},
{
label: __( 'Duplicate' ),
action: 'duplicate',
},
{
label: __( 'Delete' ),
action: 'delete',
},
];

export default function ShadowsEditPanel() {
const {
params: { category, slug },
Expand All @@ -67,9 +87,53 @@ export default function ShadowsEditPanel() {
);
}, 100 );

const onMenuClick = ( action ) => {
switch ( action ) {
case 'rename':
break;
case 'duplicate':
break;
case 'delete':
break;
}
};

return (
<>
<ScreenHeader title={ selectedShadow.name } />
<HStack justify="space-between">
<ScreenHeader title={ selectedShadow.name } />
<FlexItem>
<Spacer marginBottom={ 0 } paddingX={ 4 }>
<DropdownMenu
icon={ moreVertical }
label={ __( 'Shadow options' ) }
toggleProps={ {
size: 'small',
} }
>
{ ( { onClose } ) =>
menuItems.map( ( item ) => (
<NavigableMenu
role="menu"
key={ item.action }
>
<Button
variant="tertiary"
onClick={ () => {
onMenuClick( item.action );
onClose();
} }
className="components-palette-edit__menu-button"
>
{ item.label }
</Button>
</NavigableMenu>
) )
}
</DropdownMenu>
</Spacer>
</FlexItem>
</HStack>
<div className="edit-site-global-styles-screen">
<ShadowsPreview shadow={ selectedShadow.shadow } />
<ShadowEditor
Expand Down Expand Up @@ -163,6 +227,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
offset: 36,
shift: true,
};
const shadowObj = shadowStringToObject( shadow );

return (
<Dropdown
Expand All @@ -189,7 +254,9 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
<Icon icon={ shadowIcon } />
</FlexItem>
<FlexItem style={ { flexGrow: 1 } }>
Drop shadow
{ shadowObj.inset
? __( 'Inner shadow' )
: __( 'Drop shadow' ) }
</FlexItem>
{ canRemove && (
<FlexItem
Expand All @@ -213,7 +280,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
<DropdownContentWrapper paddingSize="none">
<div className="block-editor-panel-color-gradient-settings__dropdown-content">
<ShadowPopover
shadow={ shadow }
shadowObj={ shadowObj }
onChange={ onChange }
/>
</div>
Expand All @@ -223,8 +290,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
);
}

function ShadowPopover( { shadow: savedShadow, onChange } ) {
const shadowObj = shadowStringToObject( savedShadow );
function ShadowPopover( { shadowObj, onChange } ) {
const [ shadow, setShadow ] = useState( {
x: shadowObj.x,
y: shadowObj.y,
Expand All @@ -233,6 +299,8 @@ function ShadowPopover( { shadow: savedShadow, onChange } ) {
color: shadowObj.color,
inset: shadowObj.inset,
} );
const __experimentalIsRenderedInSidebar = true;
const enableAlpha = true;

const onShadowChange = ( key, value ) => {
onChange( shadowObjectToString( shadow ) );
Expand All @@ -243,35 +311,58 @@ function ShadowPopover( { shadow: savedShadow, onChange } ) {
};

return (
<div style={ { width: '260px', padding: '16px' } }>
<div className="edit-site-global-styles__shadow-editor-panel">
<VStack>
<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
<Spacer marginBottom={ 4 } />
<ShadowColorPicker
color={ shadow.color }
onChange={ ( value ) => onShadowChange( 'color', value ) }
/>
<Spacer marginBottom={ 4 } />
<Grid id={ 'grid-123' } columns={ 2 } gap={ 6 } rowGap={ 2 }>
<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
<div className="edit-site-global-styles__shadow-editor-color-palette">
<ColorPalette
clearable={ false }
enableAlpha={ enableAlpha }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
value={ shadow.color }
onChange={ ( value ) =>
onShadowChange( 'color', value )
}
/>
</div>
<ToggleGroupControl
value={ shadow.inset ? 'inset' : 'outset' }
isBlock
onChange={ ( value ) =>
onShadowChange( 'inset', value === 'inset' )
}
>
<ToggleGroupControlOption
value="outset"
label={ __( 'Outset' ) }
/>
<ToggleGroupControlOption
value="inset"
label={ __( 'Inset' ) }
/>
</ToggleGroupControl>
<Grid columns={ 2 } gap={ 6 } rowGap={ 2 }>
<ShadowInputControl
label="X position"
label={ __( 'X Position' ) }
value={ shadow.x }
onChange={ ( value ) => onShadowChange( 'x', value ) }
/>
<ShadowInputControl
label="Y position"
label={ __( 'Y Position' ) }
value={ shadow.y }
onChange={ ( value ) => onShadowChange( 'y', value ) }
/>
<ShadowInputControl
label="Blur"
label={ __( 'Blur' ) }
value={ shadow.blur }
onChange={ ( value ) =>
onShadowChange( 'blur', value )
}
/>
<ShadowInputControl
label="Spread"
label={ __( 'Spread' ) }
value={ shadow.spread }
onChange={ ( value ) =>
onShadowChange( 'spread', value )
Expand All @@ -283,49 +374,6 @@ function ShadowPopover( { shadow: savedShadow, onChange } ) {
);
}

function ShadowColorPicker( { color, onChange } ) {
const popoverProps = {
placement: 'left-start',
offset: 36,
shift: true,
};

return (
<Dropdown
popoverProps={ popoverProps }
className="block-editor-tools-panel-color-gradient-settings__dropdown"
renderToggle={ ( { onToggle, isOpen } ) => {
const toggleProps = {
onClick: onToggle,
className: classnames(
'block-editor-panel-color-gradient-settings__dropdown',
{ 'is-open': isOpen }
),
};

return (
<Button
{ ...toggleProps }
style={ { background: color, height: '64px' } }
/>
);
} }
renderContent={ () => (
<DropdownContentWrapper paddingSize="none">
<div className="block-editor-panel-color-gradient-settings__dropdown-content">
<ColorPicker
color={ color }
onChange={ onChange }
enableAlpha
defaultColor={ '#000' }
/>
</div>
</DropdownContentWrapper>
) }
/>
);
}

function ShadowInputControl( { label, value, onChange } ) {
const [ useInput, setUseInput ] = useState( false );

Expand All @@ -334,7 +382,7 @@ function ShadowInputControl( { label, value, onChange } ) {
<HStack justify="space-between">
<Subtitle>{ label }</Subtitle>
<Button
label={ __( 'Label' ) }
label={ __( 'Use custom size' ) }
icon={ settings }
onClick={ () => {
setUseInput( ! useInput );
Expand Down
11 changes: 11 additions & 0 deletions packages/edit-site/src/components/global-styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,17 @@
height: 60px;
}

.edit-site-global-styles__shadow-editor-panel {
$panelPadding: $grid-unit-20;
width: 280px;
padding: $panelPadding;

& .edit-site-global-styles__shadow-editor-color-palette {
// color palette adds empty .components-circular-option-picker
margin-bottom: -3 * $grid-unit-05;
}
}

.edit-site-global-styles-screen-css {
flex: 1 1 auto;
display: flex;
Expand Down

0 comments on commit 736f876

Please sign in to comment.