{ tooltipText ? (
{ optionButton }
) : (
diff --git a/packages/components/src/color-edit/index.js b/packages/components/src/color-edit/index.js
deleted file mode 100644
index ed960a838a4a67..00000000000000
--- a/packages/components/src/color-edit/index.js
+++ /dev/null
@@ -1,329 +0,0 @@
-/**
- * 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 ColorPalette from '../color-palette';
-import DropdownMenu from '../dropdown-menu';
-import Popover from '../popover';
-import {
- ColorActionsContainer,
- ColorEditStyles,
- ColorHeading,
- ColorHStackHeader,
- ColorIndicatorStyled,
- ColorItem,
- ColorNameContainer,
- ColorNameInputControl,
- DoneButton,
- RemoveButton,
-} from './styles';
-import { NavigableMenu } from '../navigable-container';
-
-function ColorNameInput( { value, onChange } ) {
- return (
-
- );
-}
-
-function ColorOption( {
- canOnlyChangeValues,
- color,
- onChange,
- isEditing,
- onStartEditing,
- onRemove,
- onStopEditing,
- slugPrefix,
-} ) {
- const focusOutsideProps = useFocusOutside( onStopEditing );
- return (
-
-
-
-
-
-
- { isEditing && ! canOnlyChangeValues ? (
-
- onChange( {
- ...color,
- name: nextName,
- slug: slugPrefix + kebabCase( nextName ),
- } )
- }
- />
- ) : (
- { color.name }
- ) }
-
- { isEditing && ! canOnlyChangeValues && (
-
-
-
- ) }
-
- { isEditing && (
-
-
- onChange( {
- ...color,
- color: newColor,
- } )
- }
- />
-
- ) }
-
- );
-}
-
-function ColorPaletteEditListView( {
- colors,
- onChange,
- editingColor,
- setEditingColor,
- canOnlyChangeValues,
- slugPrefix,
-} ) {
- // When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
- const colorReference = useRef();
- useEffect( () => {
- colorReference.current = colors;
- }, [ colors ] );
- useEffect( () => {
- return () => {
- if ( colorReference.current.some( ( { slug } ) => ! slug ) ) {
- const newColors = colorReference.current.filter(
- ( { slug } ) => slug
- );
- onChange( newColors.length ? newColors : undefined );
- }
- };
- }, [] );
- return (
-
-
- { colors.map( ( color, index ) => (
- {
- if ( editingColor !== index ) {
- setEditingColor( index );
- }
- } }
- onChange={ ( newColor ) => {
- onChange(
- colors.map( ( currentColor, currentIndex ) => {
- if ( currentIndex === index ) {
- return newColor;
- }
- return currentColor;
- } )
- );
- } }
- onRemove={ () => {
- setEditingColor( null );
- const newColors = colors.filter(
- ( _currentColor, currentIndex ) => {
- if ( currentIndex === index ) {
- return false;
- }
- return true;
- }
- );
- onChange(
- newColors.length ? newColors : undefined
- );
- } }
- isEditing={ index === editingColor }
- onStopEditing={ () => {
- if ( index === editingColor ) {
- setEditingColor( null );
- }
- } }
- slugPrefix={ slugPrefix }
- />
- ) ) }
-
-
- );
-}
-
-const EMPTY_ARRAY = [];
-
-export default function ColorEdit( {
- colors = EMPTY_ARRAY,
- onChange,
- paletteLabel,
- emptyMessage,
- canOnlyChangeValues,
- canReset,
- slugPrefix = '',
-} ) {
- const [ isEditing, setIsEditing ] = useState( false );
- const [ editingColor, setEditingColor ] = useState( null );
- const isAdding =
- isEditing &&
- editingColor &&
- colors[ editingColor ] &&
- ! colors[ editingColor ].slug;
-
- const hasColors = colors.length > 0;
-
- return (
-
-
- { paletteLabel }
-
- { isEditing && (
- {
- setIsEditing( false );
- setEditingColor( null );
- } }
- >
- { __( 'Done' ) }
-
- ) }
- { ! canOnlyChangeValues && (
-
-
- { 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 186a2f05c782cc..00000000000000
--- 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 5866cb5b24b950..179c95db1d01f3 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 00000000000000..8687c4f9ffb191
--- /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 && (
+
+
+ { 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 00000000000000..748937b649f281
--- /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 6b9e417466e53f..a04991da03a686 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 e5bf92c27e8456..cbcc12342aac69 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 a6f34357b70027..fd2c10568de216 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 5bf98cd22d996e..4bbf5a5b629382 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 === 'gradient' && (
+
+ ) }
);
}
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 0429695eb99bd0..c6db98ddfd7c31 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 b74ba0b9370276..9744b269a073e5 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;
}