Skip to content

Commit 8e04929

Browse files
jorgefilipecostajorgefilipecosta
authored
Update: Make the color popover on the gradient picker appear as expected (#37115)
1 parent d3b1327 commit 8e04929

File tree

9 files changed

+106
-43
lines changed

9 files changed

+106
-43
lines changed

‎packages/block-editor/src/components/colors-gradients/control.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,9 @@ function ColorGradientControlInner( {
132132
__experimentalHasMultipleOrigins={
133133
__experimentalHasMultipleOrigins
134134
}
135+
__experimentalIsRenderedInSidebar={
136+
__experimentalIsRenderedInSidebar
137+
}
135138
clearable={ clearable }
136139
/>
137140
) }

‎packages/components/src/color-palette/index.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,20 @@ function MultiplePalettes( {
110110
);
111111
}
112112

113+
export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
114+
return (
115+
<Dropdown
116+
contentClassName={ classnames(
117+
'components-color-palette__custom-color-dropdown-content',
118+
{
119+
'is-rendered-in-sidebar': isRenderedInSidebar,
120+
}
121+
) }
122+
{ ...props }
123+
/>
124+
);
125+
}
126+
113127
export default function ColorPalette( {
114128
clearable = true,
115129
className,
@@ -139,13 +153,8 @@ export default function ColorPalette( {
139153
return (
140154
<VStack spacing={ 3 } className={ className }>
141155
{ ! disableCustomColors && (
142-
<Dropdown
143-
contentClassName={ classnames(
144-
'components-color-palette__custom-color-dropdown-content',
145-
{
146-
'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,
147-
}
148-
) }
156+
<CustomColorPickerDropdown
157+
isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
149158
renderContent={ renderCustomColorPicker }
150159
renderToggle={ ( { isOpen, onToggle } ) => (
151160
<button

‎packages/components/src/color-palette/test/__snapshots__/index.js.snap‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
2828
exports[`ColorPalette Dropdown should render it correctly 1`] = `
2929
<Dropdown
3030
contentClassName="components-color-palette__custom-color-dropdown-content"
31-
key=".0"
3231
renderContent={[Function]}
3332
renderToggle={[Function]}
3433
>
@@ -179,33 +178,39 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
179178
data-wp-c16t={true}
180179
data-wp-component="VStack"
181180
>
182-
<Dropdown
183-
contentClassName="components-color-palette__custom-color-dropdown-content"
181+
<CustomColorPickerDropdown
182+
isRenderedInSidebar={false}
184183
key=".0"
185184
renderContent={[Function]}
186185
renderToggle={[Function]}
187186
>
188-
<div
189-
className="components-dropdown"
190-
tabIndex="-1"
187+
<Dropdown
188+
contentClassName="components-color-palette__custom-color-dropdown-content"
189+
renderContent={[Function]}
190+
renderToggle={[Function]}
191191
>
192-
<button
193-
aria-expanded={false}
194-
aria-haspopup="true"
195-
aria-label="Custom color picker"
196-
className="components-color-palette__custom-color"
197-
onClick={[Function]}
198-
style={
199-
Object {
200-
"background": "#f00",
201-
"color": "#000",
202-
}
203-
}
192+
<div
193+
className="components-dropdown"
194+
tabIndex="-1"
204195
>
205-
#f00
206-
</button>
207-
</div>
208-
</Dropdown>
196+
<button
197+
aria-expanded={false}
198+
aria-haspopup="true"
199+
aria-label="Custom color picker"
200+
className="components-color-palette__custom-color"
201+
onClick={[Function]}
202+
style={
203+
Object {
204+
"background": "#f00",
205+
"color": "#000",
206+
}
207+
}
208+
>
209+
#f00
210+
</button>
211+
</div>
212+
</Dropdown>
213+
</CustomColorPickerDropdown>
209214
<SinglePalette
210215
actions={
211216
<ButtonAction

‎packages/components/src/custom-gradient-bar/constants.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
export const COLOR_POPOVER_PROPS = {
2-
className: 'components-custom-gradient-picker__color-picker-popover',
3-
position: 'top',
4-
};
5-
61
export const GRADIENT_MARKERS_WIDTH = 16;
72
export const INSERT_POINT_WIDTH = 16;
83
export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;

‎packages/components/src/custom-gradient-bar/control-points.js‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { colord } from 'colord';
88
* WordPress dependencies
99
*/
1010
import { useInstanceId } from '@wordpress/compose';
11-
import { useEffect, useRef, useState } from '@wordpress/element';
12-
import { __, sprintf } from '@wordpress/i18n';
11+
import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
12+
import { __, sprintf, isRTL } from '@wordpress/i18n';
1313
import { plus } from '@wordpress/icons';
1414
import { LEFT, RIGHT } from '@wordpress/keycodes';
1515

@@ -18,8 +18,8 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
1818
*/
1919
import Button from '../button';
2020
import { ColorPicker } from '../color-picker';
21-
import Dropdown from '../dropdown';
2221
import { VisuallyHidden } from '../visually-hidden';
22+
import { CustomColorPickerDropdown } from '../color-palette';
2323

2424
import {
2525
addControlPoint,
@@ -31,7 +31,6 @@ import {
3131
getHorizontalRelativeGradientPosition,
3232
} from './utils';
3333
import {
34-
COLOR_POPOVER_PROPS,
3534
GRADIENT_MARKERS_WIDTH,
3635
MINIMUM_SIGNIFICANT_MOVE,
3736
KEYBOARD_CONTROL_POINT_VARIATION,
@@ -74,6 +73,33 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
7473
);
7574
}
7675

76+
function GradientColorPickerDropdown( {
77+
isRenderedInSidebar,
78+
gradientPickerDomRef,
79+
...props
80+
} ) {
81+
const popoverProps = useMemo( () => {
82+
const result = {
83+
className:
84+
'components-custom-gradient-picker__color-picker-popover',
85+
position: 'top',
86+
};
87+
if ( isRenderedInSidebar ) {
88+
result.anchorRef = gradientPickerDomRef.current;
89+
result.position = isRTL() ? 'bottom right' : 'bottom left';
90+
result.__unstableForcePosition = true;
91+
}
92+
return result;
93+
}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );
94+
return (
95+
<CustomColorPickerDropdown
96+
isRenderedInSidebar={ isRenderedInSidebar }
97+
popoverProps={ popoverProps }
98+
{ ...props }
99+
/>
100+
);
101+
}
102+
77103
function ControlPoints( {
78104
disableRemove,
79105
disableAlpha,
@@ -83,6 +109,7 @@ function ControlPoints( {
83109
onChange,
84110
onStartControlPointChange,
85111
onStopControlPointChange,
112+
__experimentalIsRenderedInSidebar,
86113
} ) {
87114
const controlPointMoveState = useRef();
88115

@@ -134,7 +161,9 @@ function ControlPoints( {
134161
const initialPosition = point?.position;
135162
return (
136163
ignoreMarkerPosition !== initialPosition && (
137-
<Dropdown
164+
<GradientColorPickerDropdown
165+
gradientPickerDomRef={ gradientPickerDomRef }
166+
isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
138167
key={ index }
139168
onClose={ onStopControlPointChange }
140169
renderToggle={ ( { isOpen, onToggle } ) => (
@@ -244,7 +273,6 @@ function ControlPoints( {
244273
) }
245274
</>
246275
) }
247-
popoverProps={ COLOR_POPOVER_PROPS }
248276
/>
249277
)
250278
);
@@ -258,10 +286,14 @@ function InsertPoint( {
258286
onCloseInserter,
259287
insertPosition,
260288
disableAlpha,
289+
__experimentalIsRenderedInSidebar,
290+
gradientPickerDomRef,
261291
} ) {
262292
const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
263293
return (
264-
<Dropdown
294+
<GradientColorPickerDropdown
295+
gradientPickerDomRef={ gradientPickerDomRef }
296+
isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
265297
className="components-custom-gradient-picker__inserter"
266298
onClose={ () => {
267299
onCloseInserter();
@@ -314,7 +346,6 @@ function InsertPoint( {
314346
} }
315347
/>
316348
) }
317-
popoverProps={ COLOR_POPOVER_PROPS }
318349
/>
319350
);
320351
}

‎packages/components/src/custom-gradient-bar/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export default function CustomGradientBar( {
7878
onChange,
7979
disableInserter = false,
8080
disableAlpha = false,
81+
__experimentalIsRenderedInSidebar,
8182
} ) {
8283
const gradientPickerDomRef = useRef();
8384

@@ -134,6 +135,10 @@ export default function CustomGradientBar( {
134135
{ ! disableInserter &&
135136
( isMovingInserter || isInsertingControlPoint ) && (
136137
<ControlPoints.InsertPoint
138+
__experimentalIsRenderedInSidebar={
139+
__experimentalIsRenderedInSidebar
140+
}
141+
gradientPickerDomRef={ gradientPickerDomRef }
137142
disableAlpha={ disableAlpha }
138143
insertPosition={ gradientBarState.insertPosition }
139144
value={ controlPoints }
@@ -151,6 +156,9 @@ export default function CustomGradientBar( {
151156
/>
152157
) }
153158
<ControlPoints
159+
__experimentalIsRenderedInSidebar={
160+
__experimentalIsRenderedInSidebar
161+
}
154162
disableAlpha={ disableAlpha }
155163
disableRemove={ disableInserter }
156164
gradientPickerDomRef={ gradientPickerDomRef }

‎packages/components/src/custom-gradient-picker/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,11 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
104104
);
105105
};
106106

107-
export default function CustomGradientPicker( { value, onChange } ) {
107+
export default function CustomGradientPicker( {
108+
value,
109+
onChange,
110+
__experimentalIsRenderedInSidebar,
111+
} ) {
108112
const gradientAST = getGradientAstWithDefault( value );
109113
// On radial gradients the bar should display a linear gradient.
110114
// On radial gradients the bar represents a slice of the gradient from the center until the outside.
@@ -121,6 +125,9 @@ export default function CustomGradientPicker( { value, onChange } ) {
121125
return (
122126
<div className="components-custom-gradient-picker">
123127
<CustomGradientBar
128+
__experimentalIsRenderedInSidebar={
129+
__experimentalIsRenderedInSidebar
130+
}
124131
background={ background }
125132
hasGradient={ hasGradient }
126133
value={ controlPoints }

‎packages/components/src/gradient-picker/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export default function GradientPicker( {
106106
clearable = true,
107107
disableCustomGradients = false,
108108
__experimentalHasMultipleOrigins,
109+
__experimentalIsRenderedInSidebar,
109110
} ) {
110111
const clearGradient = useCallback( () => onChange( undefined ), [
111112
onChange,
@@ -136,6 +137,9 @@ export default function GradientPicker( {
136137
content={
137138
! disableCustomGradients && (
138139
<CustomGradientPicker
140+
__experimentalIsRenderedInSidebar={
141+
__experimentalIsRenderedInSidebar
142+
}
139143
value={ value }
140144
onChange={ onChange }
141145
/>

‎packages/components/src/palette-edit/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ function Option( {
127127
) }
128128
{ isGradient && (
129129
<CustomGradientPicker
130+
__experimentalIsRenderedInSidebar
130131
value={ value }
131132
onChange={ ( newGradient ) =>
132133
onChange( {

0 commit comments

Comments
 (0)