diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 685adea3a664d6..fb81f800c2b98d 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -45,7 +45,6 @@ function ColorGradientControlInner( {
gradients,
disableCustomColors,
disableCustomGradients,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
className,
label,
@@ -80,9 +79,6 @@ function ColorGradientControlInner( {
: onColorChange
}
{ ...{ colors, disableCustomColors } }
- __experimentalHasMultipleOrigins={
- __experimentalHasMultipleOrigins
- }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
@@ -103,9 +99,6 @@ function ColorGradientControlInner( {
: onGradientChange
}
{ ...{ gradients, disableCustomGradients } }
- __experimentalHasMultipleOrigins={
- __experimentalHasMultipleOrigins
- }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 9c13efba03cdbb..eb78b8b29a41ba 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -111,7 +111,6 @@ export default function ColorGradientSettingsDropdown( {
enableAlpha,
gradients,
settings,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
...props
} ) {
@@ -140,7 +139,6 @@ export default function ColorGradientSettingsDropdown( {
onColorChange: setting.onColorChange,
onGradientChange: setting.onGradientChange,
showTitle: false,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
...setting,
};
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index a69a53e549902a..a5bab5a3ca986c 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -18,9 +18,7 @@ import { useInstanceId } from '@wordpress/compose';
* Internal dependencies
*/
import ColorGradientSettingsDropdown from './dropdown';
-import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+import useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';
const colorsAndGradientKeys = [
'colors',
@@ -39,7 +37,6 @@ export const PanelColorGradientSettingsInner = ( {
settings,
title,
showTitle = true,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
enableAlpha,
} ) => {
@@ -100,7 +97,6 @@ export const PanelColorGradientSettingsInner = ( {
gradients,
disableCustomColors,
disableCustomGradients,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
enableAlpha,
} }
@@ -114,19 +110,8 @@ export const PanelColorGradientSettingsInner = ( {
);
};
-const PanelColorGradientSettingsSingleSelect = ( props ) => {
- const colorGradientSettings = useCommonSingleMultipleSelects();
- colorGradientSettings.colors = useSetting( 'color.palette' );
- colorGradientSettings.gradients = useSetting( 'color.gradients' );
- return (
-
- );
-};
-
-const PanelColorGradientSettingsMultipleSelect = ( props ) => {
- const colorGradientSettings = useMultipleOriginColorsAndGradients();
+const PanelColorGradientSettingsSelect = ( props ) => {
+ const colorGradientSettings = useColorsAndGradientsPalettes();
return (
{
) {
return ;
}
- if ( props.__experimentalHasMultipleOrigins ) {
- return ;
- }
- return ;
+ return ;
};
export default PanelColorGradientSettings;
diff --git a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
deleted file mode 100644
index 6a538a33de44e7..00000000000000
--- a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import useSetting from '../use-setting';
-
-export default function useCommonSingleMultipleSelects() {
- return {
- disableCustomColors: ! useSetting( 'color.custom' ),
- disableCustomGradients: ! useSetting( 'color.customGradient' ),
- };
-}
diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
index ca3ecc26446358..8ed039565ae47a 100644
--- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
+++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -8,7 +8,6 @@ import { _x } from '@wordpress/i18n';
* Internal dependencies
*/
import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
/**
* Retrieves color and gradient related settings.
@@ -19,7 +18,10 @@ import useCommonSingleMultipleSelects from './use-common-single-multiple-selects
* @return {Object} Color and gradient related settings.
*/
export default function useMultipleOriginColorsAndGradients() {
- const colorGradientSettings = useCommonSingleMultipleSelects();
+ const colorGradientSettings = {
+ disableCustomColors: ! useSetting( 'color.custom' ),
+ disableCustomGradients: ! useSetting( 'color.customGradient' ),
+ };
const customColors = useSetting( 'color.palette.custom' );
const themeColors = useSetting( 'color.palette.theme' );
const defaultColors = useSetting( 'color.palette.default' );
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 11ee3e95f4d663..74e79ecec80488 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -274,7 +274,6 @@ export function BorderPanel( props ) {
popoverPlacement="left-start"
size="__unstable-large"
value={ hydratedBorder }
- __experimentalHasMultipleOrigins={ true }
__experimentalIsRenderedInSidebar={ true }
/>
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index d8b804c300eb04..6bf9ff036280d2 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -81,7 +81,6 @@ export default function ColorPanel( {
panelId={ clientId }
settings={ settings }
__experimentalIsItemGroup={ false }
- __experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
{ ...colorGradientSettings }
/>
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 0332bf42b1e090..332f3f6f614cea 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -227,7 +227,6 @@ export default function CoverInspectorControls( {
(
{
- if ( ! colorValue || ! colors ) {
+ if ( ! colorValue || ! colors || colors.length === 0 ) {
return;
}
- if ( hasMultipleColorOrigins ) {
+ if ( ( colors as PaletteObject[] )[ 0 ].colors !== undefined ) {
let matchedColor;
( colors as PaletteObject[] ).some( ( origin ) =>
@@ -126,7 +125,6 @@ const BorderControlDropdown = (
forwardedRef: React.ForwardedRef< any >
) => {
const {
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
border,
colors,
@@ -147,11 +145,7 @@ const BorderControlDropdown = (
} = useBorderControlDropdown( props );
const { color, style } = border || {};
- const colorObject = getColorObject(
- color,
- colors,
- !! __experimentalHasMultipleOrigins
- );
+ const colorObject = getColorObject( color, colors );
const toggleAriaLabel = getToggleAriaLabel(
color,
@@ -207,9 +201,6 @@ const BorderControlDropdown = (
value={ color }
onChange={ onColorChange }
{ ...{ colors, disableCustomColors } }
- __experimentalHasMultipleOrigins={
- __experimentalHasMultipleOrigins
- }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index d7fef513a74eb0..a3a789b5d55ee3 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -25,7 +25,6 @@ export function useBorderControlDropdown(
onChange,
previousStyleSelection,
size = 'default',
- __experimentalHasMultipleOrigins = false,
__experimentalIsRenderedInSidebar = false,
...otherProps
} = useContextSystem( props, 'BorderControlDropdown' );
@@ -95,7 +94,6 @@ export function useBorderControlDropdown(
popoverContentClassName,
popoverControlsClassName,
resetButtonClassName,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
};
}
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 0350ceaff6e7b2..4f291bda44d24e 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -59,7 +59,6 @@ const UnconnectedBorderControl = (
widthUnit,
widthValue,
withSlider,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
...otherProps
} = useBorderControl( props );
@@ -83,9 +82,6 @@ const UnconnectedBorderControl = (
onChange={ onBorderChange }
previousStyleSelection={ previousStyleSelection }
showDropdownHeader={ showDropdownHeader }
- __experimentalHasMultipleOrigins={
- __experimentalHasMultipleOrigins
- }
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
index 72b8ca0ec93c8a..77e2ede942406a 100644
--- a/packages/components/src/border-control/border-control/hook.ts
+++ b/packages/components/src/border-control/border-control/hook.ts
@@ -39,7 +39,6 @@ export function useBorderControl(
size = 'default',
value: border,
width,
- __experimentalHasMultipleOrigins = false,
__experimentalIsRenderedInSidebar = false,
...otherProps
} = useContextSystem( props, 'BorderControl' );
@@ -156,7 +155,6 @@ export function useBorderControl(
widthUnit,
widthValue,
size,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
};
}
diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx
index 2735e3ea2717b1..ce50d017ac51e6 100644
--- a/packages/components/src/border-control/stories/index.tsx
+++ b/packages/components/src/border-control/stories/index.tsx
@@ -138,7 +138,6 @@ export const WithMultipleOrigins = Template.bind( {} );
WithMultipleOrigins.args = {
...Default.args,
colors: multipleOriginColors,
- __experimentalHasMultipleOrigins: true,
};
/**
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 290618fbff8cf9..470b75df7c1829 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -17,10 +17,7 @@ export type Border = {
export type ColorProps = Pick<
ColorPaletteProps,
- | 'colors'
- | 'enableAlpha'
- | '__experimentalHasMultipleOrigins'
- | '__experimentalIsRenderedInSidebar'
+ 'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'
> & {
/**
* This toggles the ability to choose custom colors.
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index a2d2b530b1ebe2..13b791144a07c4 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -167,7 +167,7 @@ export function CustomColorPickerDropdown( {
export const extractColorNameFromCurrentValue = (
currentValue?: ColorPaletteProps[ 'value' ],
colors: ColorPaletteProps[ 'colors' ] = [],
- showMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false
+ showMultiplePalettes: boolean = false
) => {
if ( ! currentValue ) {
return '';
@@ -225,33 +225,32 @@ function UnforwardedColorPalette(
enableAlpha = false,
onChange,
value,
- __experimentalHasMultipleOrigins = false,
__experimentalIsRenderedInSidebar = false,
...otherProps
} = props;
const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
+ const hasMultipleColorOrigins =
+ colors.length > 0 &&
+ ( colors as PaletteObject[] )[ 0 ].colors !== undefined;
const buttonLabelName = useMemo(
() =>
extractColorNameFromCurrentValue(
value,
colors,
- __experimentalHasMultipleOrigins
+ hasMultipleColorOrigins
),
- [ value, colors, __experimentalHasMultipleOrigins ]
+ [ value, colors, hasMultipleColorOrigins ]
);
- // Make sure that the `colors` array has a format (single/multiple) that is
- // compatible with the `__experimentalHasMultipleOrigins` flag. This is true
- // when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
- // either both `true` or both `false`.
+ // Make sure that the `colors` array has a valid format.
if (
colors.length > 0 &&
- __experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )
+ hasMultipleColorOrigins !== areColorsMultiplePalette( colors )
) {
// eslint-disable-next-line no-console
console.warn(
- 'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'
+ 'wp.components.ColorPalette: please specify a valid format for the `colors` prop. '
);
return null;
}
@@ -341,7 +340,7 @@ function UnforwardedColorPalette(
) }
/>
) }
- { __experimentalHasMultipleOrigins ? (
+ { hasMultipleColorOrigins ? (
= {
title: 'Components/ColorPalette',
component: ColorPalette,
argTypes: {
- // Removing the control because setting this prop without changing the
- // format of the `colors` prop can break the component.
- __experimentalHasMultipleOrigins: {
- control: {
- type: null,
- },
- },
as: { control: { type: null } },
onChange: { action: 'onChange', control: { type: null } },
value: { control: { type: null } },
@@ -69,14 +62,8 @@ Default.args = {
],
};
-/**
- * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
- * the `colors` prop is expected to be an array of color palettes, rather
- * than an array of color objects.
- */
export const MultipleOrigins = Template.bind( {} );
MultipleOrigins.args = {
- __experimentalHasMultipleOrigins: true,
colors: [
{
name: 'Primary colors',
diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts
index 4fc3192184f34b..1f9c66c0fb604d 100644
--- a/packages/components/src/color-palette/types.ts
+++ b/packages/components/src/color-palette/types.ts
@@ -74,13 +74,6 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
* Currently active value.
*/
value?: string;
- /**
- * Whether the colors prop is an array of color palettes,
- * rather than an array of color objects.
- *
- * @default false
- */
- __experimentalHasMultipleOrigins?: boolean;
/**
* Whether this is rendered in the sidebar.
*
diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
index ab2fe98966bea5..8a16f0d79e640f 100644
--- a/packages/components/src/gradient-picker/index.js
+++ b/packages/components/src/gradient-picker/index.js
@@ -99,7 +99,6 @@ export default function GradientPicker( {
value,
clearable = true,
disableCustomGradients = false,
- __experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
} ) {
const clearGradient = useCallback(
@@ -107,7 +106,7 @@ export default function GradientPicker( {
[ onChange ]
);
const Component =
- __experimentalHasMultipleOrigins && gradients?.length
+ gradients?.length && gradients[ 0 ].gradients
? MultipleOrigin
: SingleOrigin;
diff --git a/packages/components/src/gradient-picker/stories/index.js b/packages/components/src/gradient-picker/stories/index.js
index c083bf0d42ee6b..c365e4741b6cdc 100644
--- a/packages/components/src/gradient-picker/stories/index.js
+++ b/packages/components/src/gradient-picker/stories/index.js
@@ -87,7 +87,6 @@ WithNoExistingGradients.args = {
export const MultipleOrigins = Template.bind( {} );
MultipleOrigins.args = {
...Default.args,
- __experimentalHasMultipleOrigins: true,
gradients: [
{ name: 'Origin 1', gradients: GRADIENTS },
{ name: 'Origin 2', gradients: GRADIENTS },
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index 420561207b872d..95b746a4c57dcd 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -184,7 +184,6 @@ export default function BorderPanel( { name } ) {
popoverOffset={ 40 }
popoverPlacement="left-start"
value={ border }
- __experimentalHasMultipleOrigins={ true }
__experimentalIsRenderedInSidebar={ true }
size={ '__unstable-large' }
/>
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index b35b64d03b124e..5693ea97eafd5b 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -96,7 +96,6 @@ function ScreenBackgroundColor( { name } ) {
gradients={ gradientsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
disableCustomGradients={ ! areCustomGradientsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
index 22ff1ef1307bed..6f6f6288315ef5 100644
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -70,7 +70,6 @@ function ScreenButtonColor( { name } ) {
className="edit-site-screen-button-color__control"
colors={ colorsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
@@ -87,7 +86,6 @@ function ScreenButtonColor( { name } ) {
className="edit-site-screen-button-color__control"
colors={ colorsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js
index 4a40ebc4d4d80a..425c461700c95c 100644
--- a/packages/edit-site/src/components/global-styles/screen-heading-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js
@@ -132,7 +132,7 @@ function ScreenHeadingColor( { name } ) {
>
@@ -159,7 +159,6 @@ function ScreenHeadingColor( { name } ) {
className="edit-site-screen-heading-text-color__control"
colors={ colorsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
@@ -186,7 +185,6 @@ function ScreenHeadingColor( { name } ) {
gradients={ gradientsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
disableCustomGradients={ ! areCustomGradientsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index 2ceb6eee2e5cb8..3b7bcc6e5fe716 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -90,7 +90,6 @@ function ScreenLinkColor( { name } ) {
className="edit-site-screen-link-color__control"
colors={ colorsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index 4c212adfe33475..9439e5ef0c9d8a 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -47,7 +47,6 @@ function ScreenTextColor( { name } ) {
className="edit-site-screen-text-color__control"
colors={ colorsPerOrigin }
disableCustomColors={ ! areCustomSolidsEnabled }
- __experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar