From e8db6a71a88d499a919013992eac1e9192b502d0 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 10 Nov 2022 10:16:03 +1100 Subject: [PATCH 1/6] Open edit panel and select color when palette item is selected. --- packages/components/src/palette-edit/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index 0b52d309c03fa7..d74f505019aea0 100644 --- a/packages/components/src/palette-edit/index.js +++ b/packages/components/src/palette-edit/index.js @@ -313,6 +313,13 @@ export default function PaletteEdit( { ! elements[ editingElement ].slug; const elementsLength = elements.length; const hasElements = elementsLength > 0; + const editPaletteItem = ( value, collection ) => { + const valueIndex = collection.findIndex( + ( item ) => item.color === value + ); + setIsEditing( true ); + setEditingElement( valueIndex ); + }; return ( @@ -459,14 +466,18 @@ export default function PaletteEdit( { {} } + onChange={ ( value ) => + editPaletteItem( value, gradients ) + } clearable={ false } disableCustomGradients={ true } /> ) : ( {} } + onChange={ ( value ) => + editPaletteItem( value, colors ) + } clearable={ false } disableCustomColors={ true } /> From 9bd9280342e7d57f2aa3572b9df73a3891b67382 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Sat, 12 Nov 2022 07:52:48 +1100 Subject: [PATCH 2/6] Rename Edit label to "List view" since a user can directly edit a color or gradient by clicking on it. --- packages/components/src/palette-edit/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index d74f505019aea0..8c18e17fdce817 100644 --- a/packages/components/src/palette-edit/index.js +++ b/packages/components/src/palette-edit/index.js @@ -398,9 +398,7 @@ export default function PaletteEdit( { } } className="components-palette-edit__menu-button" > - { isGradient - ? __( 'Edit gradients' ) - : __( 'Edit colors' ) } + { __( 'List view' ) } ) } { ! canOnlyChangeValues && ( From e19123081ced7b47911cc12aa695c22522fdad13 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 16 Nov 2022 16:00:18 +1100 Subject: [PATCH 3/6] When clicking a palette item, edit the colors without switching to the list view. Rename "List view" to "Show details" --- .../components/src/color-palette/index.tsx | 6 +- .../components/src/color-palette/types.ts | 2 +- .../components/src/gradient-picker/index.js | 13 +- packages/components/src/palette-edit/index.js | 121 +++++++++++------- 4 files changed, 86 insertions(+), 56 deletions(-) diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx index 8a403d75192064..4c36a8e56df83c 100644 --- a/packages/components/src/color-palette/index.tsx +++ b/packages/components/src/color-palette/index.tsx @@ -70,7 +70,7 @@ function SinglePalette( { } style={ { backgroundColor: color, color } } onClick={ - isSelected ? clearColor : () => onChange( color ) + isSelected ? clearColor : () => onChange( color, index ) } aria-label={ name @@ -118,7 +118,9 @@ function MultiplePalettes( { + onChange( newColor, index ) + } value={ value } actions={ colors.length === index + 1 ? actions : null diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts index f9356634d3ef89..2b1be5a35bb678 100644 --- a/packages/components/src/color-palette/types.ts +++ b/packages/components/src/color-palette/types.ts @@ -24,7 +24,7 @@ type PaletteProps = { /** * Callback called when a color is selected. */ - onChange: ( newColor?: string ) => void; + onChange: ( newColor?: string, index?: number ) => void; value?: string; actions?: ReactNode; }; diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js index 0da35f8736a7c8..ab2fe98966bea5 100644 --- a/packages/components/src/gradient-picker/index.js +++ b/packages/components/src/gradient-picker/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { map } from 'lodash'; - /** * WordPress dependencies */ @@ -28,7 +23,7 @@ function SingleOrigin( { actions, } ) { const gradientOptions = useMemo( () => { - return map( gradients, ( { gradient, name } ) => ( + return gradients.map( ( { gradient, name }, index ) => ( onChange( gradient ) + : () => onChange( gradient, index ) } aria-label={ name @@ -80,7 +75,9 @@ function MultipleOrigin( { + onChange( gradient, index ) + } value={ value } { ...( gradients.length === index + 1 ? { actions } diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index 8c18e17fdce817..0b6374abbdcfa4 100644 --- a/packages/components/src/palette-edit/index.js +++ b/packages/components/src/palette-edit/index.js @@ -89,6 +89,50 @@ export function getNameForPosition( elements, slugPrefix ) { ); } +function ColorPickerPopover( { + isGradient, + element, + onChange, + onClose = () => {}, +} ) { + return ( + + { ! isGradient && ( + + onChange( { + ...element, + color: newColor, + } ) + } + /> + ) } + { isGradient && ( +
+ + onChange( { + ...element, + gradient: newGradient, + } ) + } + /> +
+ ) } + + ); +} + function Option( { canOnlyChangeValues, element, @@ -155,39 +199,11 @@ function Option( { ) } { isEditing && ( - - { ! isGradient && ( - - onChange( { - ...element, - color: newColor, - } ) - } - /> - ) } - { isGradient && ( -
- - onChange( { - ...element, - gradient: newGradient, - } ) - } - /> -
- ) } - + ) } ); @@ -313,13 +329,7 @@ export default function PaletteEdit( { ! elements[ editingElement ].slug; const elementsLength = elements.length; const hasElements = elementsLength > 0; - const editPaletteItem = ( value, collection ) => { - const valueIndex = collection.findIndex( - ( item ) => item.color === value - ); - setIsEditing( true ); - setEditingElement( valueIndex ); - }; + const debounceOnChange = useDebounce( onChange, 100 ); return ( @@ -398,7 +408,7 @@ export default function PaletteEdit( { } } className="components-palette-edit__menu-button" > - { __( 'List view' ) } + { __( 'Show details' ) } ) } { ! canOnlyChangeValues && ( @@ -459,13 +469,34 @@ export default function PaletteEdit( { isGradient={ isGradient } /> ) } + { ! isEditing && editingElement !== null && ( + setEditingElement( null ) } + onChange={ ( newElement ) => { + debounceOnChange( + elements.map( + ( currentElement, currentIndex ) => { + if ( + currentIndex === editingElement + ) { + return newElement; + } + return currentElement; + } + ) + ); + } } + element={ elements[ editingElement ] } + /> + ) } { ! isEditing && ( isGradient ? ( - editPaletteItem( value, gradients ) + onChange={ ( value, index ) => + setEditingElement( index ) } clearable={ false } disableCustomGradients={ true } @@ -473,8 +504,8 @@ export default function PaletteEdit( { ) : ( - editPaletteItem( value, colors ) + onChange={ ( value, index ) => + setEditingElement( index ) } clearable={ false } disableCustomColors={ true } From 57b6dd6c004c4a822344800088bde87aec00fb0f Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 16 Nov 2022 17:50:26 +1100 Subject: [PATCH 4/6] Updated test --- packages/components/src/color-palette/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx index 9918a530918af4..ce81b1241a5f4f 100644 --- a/packages/components/src/color-palette/test/index.tsx +++ b/packages/components/src/color-palette/test/index.tsx @@ -90,7 +90,7 @@ describe( 'ColorPalette', () => { ); expect( onChange ).toHaveBeenCalledTimes( 1 ); - expect( onChange ).toHaveBeenCalledWith( '#fff' ); + expect( onChange ).toHaveBeenCalledWith( '#fff', 1 ); } ); test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => { From a9019742e4f9bfbd22fc28f7d9723c5460261217 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 17 Nov 2022 15:33:21 +1100 Subject: [PATCH 5/6] If, for whatever reason, the returned index does not match a color/gradient with the same incoming value, then just open up the list view editing panel. --- packages/components/src/palette-edit/index.js | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index 0b6374abbdcfa4..8cd4187e464071 100644 --- a/packages/components/src/palette-edit/index.js +++ b/packages/components/src/palette-edit/index.js @@ -6,7 +6,7 @@ import { kebabCase } from 'lodash'; /** * WordPress dependencies */ -import { useState, useRef, useEffect } from '@wordpress/element'; +import { useState, useRef, useEffect, useCallback } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { lineSolid, moreVertical, plus } from '@wordpress/icons'; import { @@ -330,6 +330,19 @@ export default function PaletteEdit( { const elementsLength = elements.length; const hasElements = elementsLength > 0; const debounceOnChange = useDebounce( onChange, 100 ); + const onSelectPaletteItem = useCallback( + ( value, newEditingElementIndex ) => { + const selectedElement = elements[ newEditingElementIndex ]; + const key = isGradient ? 'gradient' : 'color'; + // Ensures that the index returned matches a known element value. + if ( !! selectedElement && selectedElement[ key ] === value ) { + setEditingElement( newEditingElementIndex ); + } else { + setIsEditing( true ); + } + }, + [ isGradient ] + ); return ( @@ -495,18 +508,14 @@ export default function PaletteEdit( { - setEditingElement( index ) - } + onChange={ onSelectPaletteItem } clearable={ false } disableCustomGradients={ true } /> ) : ( - setEditingElement( index ) - } + onChange={ onSelectPaletteItem } clearable={ false } disableCustomColors={ true } /> From 051b23f3434627c7989cd36622172c8d4f444135 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 17 Nov 2022 15:52:04 +1100 Subject: [PATCH 6/6] React Hook useCallback had a missing dependency: 'elements'. --- packages/components/src/palette-edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index 8cd4187e464071..5beccbeebfb85a 100644 --- a/packages/components/src/palette-edit/index.js +++ b/packages/components/src/palette-edit/index.js @@ -341,7 +341,7 @@ export default function PaletteEdit( { setIsEditing( true ); } }, - [ isGradient ] + [ isGradient, elements ] ); return (