From 5fc88e3161858c6218c96bd7b9d01edce91774df Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 23 Nov 2021 19:03:49 +0000 Subject: [PATCH 1/2] Add: Gradient palette editor --- .../src/circular-option-picker/index.js | 12 +- packages/components/src/color-edit/index.js | 329 --------------- packages/components/src/color-edit/style.scss | 6 - packages/components/src/index.js | 2 +- packages/components/src/palette-edit/index.js | 392 ++++++++++++++++++ .../components/src/palette-edit/style.scss | 19 + .../{color-edit => palette-edit}/styles.js | 33 +- packages/components/src/style.scss | 2 +- .../global-styles/color-palette-panel.js | 8 +- .../global-styles/gradients-palette-panel.js | 79 ++++ .../global-styles/screen-color-palette.js | 29 +- .../src/components/global-styles/style.scss | 9 + .../src/components/sidebar/style.scss | 3 +- 13 files changed, 557 insertions(+), 366 deletions(-) delete mode 100644 packages/components/src/color-edit/index.js delete mode 100644 packages/components/src/color-edit/style.scss create mode 100644 packages/components/src/palette-edit/index.js create mode 100644 packages/components/src/palette-edit/style.scss rename packages/components/src/{color-edit => palette-edit}/styles.js (70%) create mode 100644 packages/edit-site/src/components/global-styles/gradients-palette-panel.js diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js index a259d0eb97dce..21de49e39816e 100644 --- a/packages/components/src/circular-option-picker/index.js +++ b/packages/components/src/circular-option-picker/index.js @@ -25,15 +25,17 @@ function Option( { const optionButton = ( - ) } - { canReset && ( - - ) } - - - ) } - - ) } - - - { hasColors && ( - <> - { isEditing && ( - - ) } - { ! isEditing && ( - {} } - clearable={ false } - disableCustomColors={ true } - /> - ) } - - ) } - { ! hasColors && emptyMessage } - - ); -} diff --git a/packages/components/src/color-edit/style.scss b/packages/components/src/color-edit/style.scss deleted file mode 100644 index 186a2f05c782c..0000000000000 --- a/packages/components/src/color-edit/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -@include break-medium() { - .components-color-edit__color-popover.components-popover .components-popover__content.components-popover__content.components-popover__content { - margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 }; - margin-top: #{ -($grid-unit-60 + $border-width) }; - } -} diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 5866cb5b24b95..179c95db1d01f 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -36,7 +36,7 @@ export { } from './card'; export { default as CheckboxControl } from './checkbox-control'; export { default as ClipboardButton } from './clipboard-button'; -export { default as __experimentalColorEdit } from './color-edit'; +export { default as __experimentalPaletteEdit } from './palette-edit'; export { default as ColorIndicator } from './color-indicator'; export { default as ColorPalette } from './color-palette'; export { ColorPicker } from './color-picker'; diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js new file mode 100644 index 0000000000000..8687c4f9ffb19 --- /dev/null +++ b/packages/components/src/palette-edit/index.js @@ -0,0 +1,392 @@ +/** + * External dependencies + */ +import { kebabCase } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useState, useRef, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { lineSolid, moreVertical, plus } from '@wordpress/icons'; +import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import Button from '../button'; +import { ColorPicker } from '../color-picker'; +import { FlexItem } from '../flex'; +import { HStack } from '../h-stack'; +import { ItemGroup } from '../item-group'; +import { VStack } from '../v-stack'; +import GradientPicker from '../gradient-picker'; +import ColorPalette from '../color-palette'; +import DropdownMenu from '../dropdown-menu'; +import Popover from '../popover'; +import { + PaletteActionsContainer, + PaletteEditStyles, + PaletteHeading, + PaletteHStackHeader, + IndicatorStyled, + PaletteItem, + NameContainer, + NameInputControl, + DoneButton, + RemoveButton, +} from './styles'; +import { NavigableMenu } from '../navigable-container'; +import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants'; +import CustomGradientPicker from '../custom-gradient-picker'; + +function NameInput( { value, onChange, label } ) { + return ( + + ); +} + +function Option( { + canOnlyChangeValues, + element, + onChange, + isEditing, + onStartEditing, + onRemove, + onStopEditing, + slugPrefix, + isGradient, +} ) { + const focusOutsideProps = useFocusOutside( onStopEditing ); + const value = isGradient ? element.gradient : element.color; + return ( + + + + + + + { isEditing && ! canOnlyChangeValues ? ( + + onChange( { + ...element, + name: nextName, + slug: slugPrefix + kebabCase( nextName ), + } ) + } + /> + ) : ( + { element.name } + ) } + + { isEditing && ! canOnlyChangeValues && ( + + + + ) } + + { isEditing && ( + + { ! isGradient && ( + + onChange( { + ...element, + color: newColor, + } ) + } + /> + ) } + { isGradient && ( + + onChange( { + ...element, + gradient: newGradient, + } ) + } + /> + ) } + + ) } + + ); +} + +function PaletteEditListView( { + elements, + onChange, + editingElement, + setEditingElement, + canOnlyChangeValues, + slugPrefix, + isGradient, +} ) { + // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them. + const elementsReference = useRef(); + useEffect( () => { + elementsReference.current = elements; + }, [ elements ] ); + useEffect( () => { + return () => { + if ( elementsReference.current.some( ( { slug } ) => ! slug ) ) { + const newElements = elementsReference.current.filter( + ( { slug } ) => slug + ); + onChange( newElements.length ? newElements : undefined ); + } + }; + }, [] ); + return ( + + + { elements.map( ( element, index ) => ( + + + ); +} + +const EMPTY_ARRAY = []; + +export default function PaletteEdit( { + gradients, + colors = EMPTY_ARRAY, + onChange, + paletteLabel, + emptyMessage, + canOnlyChangeValues, + canReset, + slugPrefix = '', +} ) { + const isGradient = !! gradients; + const elements = isGradient ? gradients : colors; + const [ isEditing, setIsEditing ] = useState( false ); + const [ editingElement, setEditingElement ] = useState( null ); + const isAdding = + isEditing && + editingElement && + elements[ editingElement ] && + ! elements[ editingElement ].slug; + + const hasElements = elements.length > 0; + + return ( + + + { paletteLabel } + + { isEditing && ( + { + setIsEditing( false ); + setEditingElement( null ); + } } + > + { __( 'Done' ) } + + ) } + { ! canOnlyChangeValues && ( + + ) } + { canReset && ( + + ) } + + + ) } + + ) } + + + { hasElements && ( + <> + { isEditing && ( + + ) } + { ! isEditing && + ( isGradient ? ( + {} } + clearable={ false } + disableCustomGradients={ true } + /> + ) : ( + {} } + clearable={ false } + disableCustomColors={ true } + /> + ) ) } + + ) } + { ! hasElements && emptyMessage } + + ); +} diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss new file mode 100644 index 0000000000000..748937b649f28 --- /dev/null +++ b/packages/components/src/palette-edit/style.scss @@ -0,0 +1,19 @@ +@include break-medium() { + .components-palette-edit__popover.components-popover .components-popover__content.components-popover__content.components-popover__content { + margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 }; + margin-top: #{ -($grid-unit-60 + $border-width) }; + } +} + +.components-palette-edit__popover { + .components-custom-gradient-picker__gradient-bar { + margin-top: 0; + } + .components-custom-gradient-picker__ui-line { + margin-bottom: 0; + } + .components-custom-gradient-picker { + width: 280px; + padding: 8px; + } +} diff --git a/packages/components/src/color-edit/styles.js b/packages/components/src/palette-edit/styles.js similarity index 70% rename from packages/components/src/color-edit/styles.js rename to packages/components/src/palette-edit/styles.js index 6b9e417466e53..a04991da03a68 100644 --- a/packages/components/src/color-edit/styles.js +++ b/packages/components/src/palette-edit/styles.js @@ -12,7 +12,6 @@ import { HStack } from '../h-stack'; import { space } from '../ui/utils/space'; import { COLORS, CONFIG } from '../utils'; import { View } from '../view'; -import ColorIndicator from '../color-indicator'; import InputControl from '../input-control'; import Item from '../item-group/item'; import { @@ -20,20 +19,15 @@ import { Input, BackdropUI as InputBackdropUI, } from '../input-control/styles/input-control-styles'; +import CircularOptionPicker from '../circular-option-picker'; -export const ColorIndicatorStyled = styled( ColorIndicator )` - && { - display: block; - border-radius: 50%; - border: 0; - height: ${ space( 6 ) }; - width: ${ space( 6 ) }; - margin-left: 0; - padding: 0; - } +export const IndicatorStyled = styled( CircularOptionPicker.Option )` + width: ${ space( 6 ) }; + height: ${ space( 6 ) }; + pointer-events: none; `; -export const ColorNameInputControl = styled( InputControl )` +export const NameInputControl = styled( InputControl )` ${ InputControlContainer } { background: ${ COLORS.gray[ 100 ] }; border-radius: 2px; @@ -47,17 +41,20 @@ export const ColorNameInputControl = styled( InputControl )` } `; -export const ColorItem = styled( Item )` +export const PaletteItem = styled( Item )` padding: 3px 0 3px ${ space( 3 ) }; height: calc( 40px - ${ CONFIG.borderWidth } ); `; -export const ColorNameContainer = styled.span` +export const NameContainer = styled.div` line-height: ${ space( 8 ) }; margin-left: ${ space( 2 ) }; + margin-right: ${ space( 2 ) }; + white-space: nowrap; + overflow: hidden; `; -export const ColorHeading = styled( Heading )` +export const PaletteHeading = styled( Heading )` text-transform: uppercase; line-height: ${ space( 6 ) }; font-weight: 500; @@ -67,16 +64,16 @@ export const ColorHeading = styled( Heading )` } `; -export const ColorActionsContainer = styled( View )` +export const PaletteActionsContainer = styled( View )` height: ${ space( 6 ) }; display: flex; `; -export const ColorHStackHeader = styled( HStack )` +export const PaletteHStackHeader = styled( HStack )` margin-bottom: ${ space( 2 ) }; `; -export const ColorEditStyles = styled( View )` +export const PaletteEditStyles = styled( View )` &&& { .components-button.has-icon { min-width: 0; diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index e5bf92c27e845..cbcc12342aac6 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -4,7 +4,7 @@ @import "./button/style.scss"; @import "./checkbox-control/style.scss"; @import "./circular-option-picker/style.scss"; -@import "./color-edit/style.scss"; +@import "./palette-edit/style.scss"; @import "./color-indicator/style.scss"; @import "./combobox-control/style.scss"; @import "./color-list-picker/style.scss"; diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index a6f34357b7002..fd2c10568de21 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { - __experimentalColorEdit as ColorEdit, + __experimentalPaletteEdit as PaletteEdit, __experimentalVStack as VStack, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -46,7 +46,7 @@ export default function ColorPalettePanel( { name } ) { spacing={ 10 } > { !! themeColors && !! themeColors.length && ( - ) } - + { !! themeGradients && !! themeGradients.length && ( + + ) } + { !! defaultGradients && + !! defaultGradients.length && + !! defaultPaletteEnabled && ( + + ) } + + + ); +} diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js index 5bf98cd22d996..23f09b3d0434a 100644 --- a/packages/edit-site/src/components/global-styles/screen-color-palette.js +++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js @@ -2,14 +2,21 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; +import { useState } from '@wordpress/element'; /** * Internal dependencies */ import ColorPalettePanel from './color-palette-panel'; +import GradientPalettePanel from './gradients-palette-panel'; import ScreenHeader from './header'; function ScreenColorPalette( { name } ) { + const [ currentTab, setCurrentTab ] = useState( 'solid' ); const parentMenu = name === undefined ? '' : '/blocks/' + name; return ( @@ -21,7 +28,27 @@ function ScreenColorPalette( { name } ) { 'Color palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.' ) } /> - + + + + + { currentTab === 'solid' && } + { currentTab === 'gradients' && ( + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 0429695eb99bd..c6db98ddfd7c3 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -68,3 +68,12 @@ text-transform: uppercase; font-weight: 500; } + +.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle { + margin-right: $grid-unit-20; + margin-left: $grid-unit-20; + width: unset; + .components-toggle-group-control { + min-height: $grid-unit-40; + } +} diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index b74ba0b937027..9744b269a073e 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -62,7 +62,8 @@ padding: 0 $grid-unit-20; } -.edit-site-global-styles-color-palette-panel { +.edit-site-global-styles-color-palette-panel, +.edit-site-global-styles-gradient-palette-panel { padding: $grid-unit-20; } From 1bf6384f41c6651d2625043e47cac6aada564cdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 25 Nov 2021 12:38:04 +0100 Subject: [PATCH 2/2] Use gradient as in any other screen --- .../src/components/global-styles/screen-color-palette.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js index 23f09b3d0434a..4bbf5a5b62938 100644 --- a/packages/edit-site/src/components/global-styles/screen-color-palette.js +++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js @@ -41,12 +41,12 @@ function ScreenColorPalette( { name } ) { label={ __( 'Solid' ) } /> { currentTab === 'solid' && } - { currentTab === 'gradients' && ( + { currentTab === 'gradient' && ( ) }