From 204cd8b9411171e703f1c751031b6c243e4d5966 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 27 Dec 2022 23:56:00 +0000 Subject: [PATCH] Remove: __experimentalHasMultipleOrigins prop from colors and gradients (#46315) --- .../components/colors-gradients/control.js | 7 ----- .../components/colors-gradients/dropdown.js | 2 -- .../panel-color-gradient-settings.js | 26 +++---------------- .../use-common-single-multiple-selects.js | 11 -------- ...se-multiple-origin-colors-and-gradients.js | 6 +++-- packages/block-editor/src/hooks/border.js | 1 - .../block-editor/src/hooks/color-panel.js | 1 - .../src/cover/edit/inspector-controls.js | 1 - .../src/navigation/edit/index.js | 1 - .../src/post-featured-image/overlay.js | 1 - .../block-library/src/social-links/edit.js | 1 - .../component.tsx | 2 -- .../border-box-control-split-controls/hook.ts | 2 -- .../border-box-control/component.tsx | 7 ----- .../border-box-control/hook.ts | 2 -- .../border-control-dropdown/component.tsx | 17 +++--------- .../border-control-dropdown/hook.ts | 2 -- .../border-control/component.tsx | 4 --- .../src/border-control/border-control/hook.ts | 2 -- .../src/border-control/stories/index.tsx | 1 - .../components/src/border-control/types.ts | 5 +--- .../components/src/color-palette/index.tsx | 21 +++++++-------- .../src/color-palette/stories/index.tsx | 13 ---------- .../components/src/color-palette/types.ts | 7 ----- .../components/src/gradient-picker/index.js | 3 +-- .../src/gradient-picker/stories/index.js | 1 - .../components/global-styles/border-panel.js | 1 - .../global-styles/screen-background-color.js | 1 - .../global-styles/screen-button-color.js | 2 -- .../global-styles/screen-heading-color.js | 4 +-- .../global-styles/screen-link-color.js | 1 - .../global-styles/screen-text-color.js | 1 - 32 files changed, 25 insertions(+), 132 deletions(-) delete mode 100644 packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 685adea3a664d..fb81f800c2b98 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 9c13efba03cdb..eb78b8b29a41b 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 a69a53e549902..a5bab5a3ca986 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 6a538a33de44e..0000000000000 --- 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 ca3ecc2644635..8ed039565ae47 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 11ee3e95f4d66..74e79ecec8048 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 d8b804c300eb0..6bf9ff036280d 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 0332bf42b1e09..332f3f6f614ce 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 d7fef513a74eb..a3a789b5d55ee 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 0350ceaff6e7b..4f291bda44d24 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 72b8ca0ec93c8..77e2ede942406 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 2735e3ea2717b..ce50d017ac51e 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 290618fbff8cf..470b75df7c182 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 a2d2b530b1ebe..13b791144a07c 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 4fc3192184f34..1f9c66c0fb604 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 ab2fe98966bea..8a16f0d79e640 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 c083bf0d42ee6..c365e4741b6cd 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 420561207b872..95b746a4c57dc 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 b35b64d03b124..5693ea97eafd5 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 22ff1ef1307be..6f6f6288315ef 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 4a40ebc4d4d80..425c461700c95 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 2ceb6eee2e5cb..3b7bcc6e5fe71 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 4c212adfe3347..9439e5ef0c9d8 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