{
const toggleProps = {
onClick: onToggle,
- className:
+ className: clsx(
'block-editor-global-styles-background-panel__dropdown-toggle',
+ {
+ 'is-open': isOpen,
+ }
+ ),
'aria-expanded': isOpen,
'aria-label': __(
'Background size, position and repeat options.'
@@ -254,7 +261,6 @@ function BackgroundControlsPanel( {
label={ imgLabel }
toggleProps={ toggleProps }
as="button"
- onToggleCallback={ onToggleCallback }
/>
);
} }
@@ -405,7 +411,7 @@ function BackgroundImageControls( {
title || getFilename( url ) || __( 'Add background image' );
return (
-
@@ -453,7 +459,7 @@ function BackgroundImageControls( {
onFilesDrop={ onFilesDrop }
label={ __( 'Drop to upload' ) }
/>
-
+
);
}
@@ -697,6 +703,146 @@ function BackgroundToolsPanel( {
);
}
+const { Tabs } = unlock( componentsPrivateApis );
+
+function ColorPanelTab( {
+ isGradient,
+ inheritedValue,
+ userValue,
+ setValue,
+ colorGradientControlSettings,
+} ) {
+ return (
+
+ );
+}
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+ -
+
+
+ { indicators.map( ( indicator, index ) => (
+
+
+
+ ) ) }
+
+
+ { label }
+
+
+
+);
+
+function ColorPanelDropdown( {
+ label,
+ indicators,
+ tabs,
+ colorGradientControlSettings,
+} ) {
+ const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+ const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+ return (
+ -
+ {
+ const toggleProps = {
+ onClick: onToggle,
+ className: clsx(
+ 'block-editor-panel-color-gradient-settings__dropdown',
+ { 'is-open': isOpen }
+ ),
+ 'aria-expanded': isOpen,
+ 'aria-label': sprintf(
+ /* translators: %s is the type of color property, e.g., "background" */
+ __( 'Color %s styles' ),
+ label
+ ),
+ };
+
+ return (
+ // no-restricted-syntax
+
+ );
+ } }
+ renderContent={ () => (
+
+
+ { tabs.length === 1 && (
+
+ ) }
+ { tabs.length > 1 && (
+
+
+ { tabs.map( ( tab ) => (
+
+ { tab.label }
+
+ ) ) }
+
+
+ { tabs.map( ( tab ) => {
+ const { key: tabKey, ...restTabProps } =
+ tab;
+ return (
+
+
+
+ );
+ } ) }
+
+ ) }
+
+
+ ) }
+ />
+
+ );
+}
+
export default function BackgroundPanel( {
as: Wrapper = BackgroundToolsPanel,
value,
@@ -706,7 +852,8 @@ export default function BackgroundPanel( {
panelId,
defaultControls = DEFAULT_CONTROLS,
defaultValues = {},
- headerLabel = __( 'Background image' ),
+ headerLabel = __( 'Tools' ),
+ showColorControl = false,
} ) {
/*
* Resolve any inherited "ref" pointers.
@@ -722,6 +869,75 @@ export default function BackgroundPanel( {
_links: _settings[ globalStylesLinksDataKey ],
};
}, [] );
+
+ const colors = useColorsPerOrigin( settings );
+ const gradients = useGradientsPerOrigin( settings );
+ const areCustomSolidsEnabled = settings?.color?.custom;
+ const areCustomGradientsEnabled = settings?.color?.customGradient;
+ const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+ const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+ const encodeColorValue = ( colorValue ) => {
+ const allColors = colors.flatMap(
+ ( { colors: originColors } ) => originColors
+ );
+ const colorObject = allColors.find(
+ ( { color } ) => color === colorValue
+ );
+ return colorObject
+ ? 'var:preset|color|' + colorObject.slug
+ : colorValue;
+ };
+ const encodeGradientValue = ( gradientValue ) => {
+ const allGradients = gradients.flatMap(
+ ( { gradients: originGradients } ) => originGradients
+ );
+ const gradientObject = allGradients.find(
+ ( { gradient } ) => gradient === gradientValue
+ );
+ return gradientObject
+ ? 'var:preset|gradient|' + gradientObject.slug
+ : gradientValue;
+ };
+
+ const decodeValue = ( rawValue ) =>
+ getValueFromVariable( { settings }, '', rawValue );
+ const shouldShowBackgroundColorControls = useHasBackgroundPanel( settings );
+ const backgroundColor = decodeValue( inheritedValue?.color?.background );
+ const userBackgroundColor = decodeValue( value?.color?.background );
+ const gradient = decodeValue( inheritedValue?.color?.gradient );
+ const userGradient = decodeValue( value?.color?.gradient );
+ const hasBackground = () => !! userBackgroundColor || !! userGradient;
+
+ const setBackgroundColor = ( newColor ) => {
+ const newValue = setImmutably(
+ value,
+ [ 'color', 'background' ],
+ encodeColorValue( newColor )
+ );
+ newValue.color.gradient = undefined;
+ onChange( newValue );
+ };
+
+ const setGradient = ( newGradient ) => {
+ const newValue = setImmutably(
+ value,
+ [ 'color', 'gradient' ],
+ encodeGradientValue( newGradient )
+ );
+ newValue.color.background = undefined;
+ onChange( newValue );
+ };
+
+ const resetBackgroundColor = () => {
+ const newValue = setImmutably(
+ value,
+ [ 'color', 'background' ],
+ undefined
+ );
+ newValue.color.gradient = undefined;
+ onChange( newValue );
+ };
+
const resolvedInheritedValue = useMemo( () => {
const resolvedValues = {
background: {},
@@ -749,6 +965,7 @@ export default function BackgroundPanel( {
return {
...previousValue,
background: {},
+ color: undefined,
};
}, [] );
@@ -773,8 +990,6 @@ export default function BackgroundPanel( {
settings?.background?.backgroundPosition ||
settings?.background?.backgroundRepeat );
- const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
-
return (
-
!! value?.background }
@@ -803,7 +1015,6 @@ export default function BackgroundPanel( {
label={ title }
filename={ title }
url={ url }
- onToggle={ setIsDropDownOpen }
hasImageValue={ hasImageValue }
>
@@ -813,12 +1024,8 @@ export default function BackgroundPanel( {
inheritedValue={ resolvedInheritedValue }
displayInPanel
onResetImage={ () => {
- setIsDropDownOpen( false );
resetBackground();
} }
- onRemoveImage={ () =>
- setIsDropDownOpen( false )
- }
defaultValues={ defaultValues }
/>
{
- setIsDropDownOpen( false );
resetBackground();
} }
- onRemoveImage={ () => setIsDropDownOpen( false ) }
/>
) }
-
+ { shouldShowBackgroundColorControls && showColorControl && (
+
+
+
+ ) }
+