Update: Make the color popover on the gradient picker appear as expected

WordPress · Dec 10, 2021 · 327725e · 327725e
1 parent 620b395
commit 327725e
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -132,6 +132,9 @@ function ColorGradientControlInner( {
 							__experimentalHasMultipleOrigins={
 								__experimentalHasMultipleOrigins
 							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							clearable={ clearable }
 						/>
 					) }

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -110,6 +110,20 @@ function MultiplePalettes( {
 	);
 }
 
+export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
+	return (
+		<Dropdown
+			contentClassName={ classnames(
+				'components-color-palette__custom-color-dropdown-content',
+				{
+					'is-rendered-in-sidebar': isRenderedInSidebar,
+				}
+			) }
+			{ ...props }
+		/>
+	);
+}
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -139,13 +153,8 @@ export default function ColorPalette( {
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
-				<Dropdown
-					contentClassName={ classnames(
-						'components-color-palette__custom-color-dropdown-content',
-						{
-							'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,
-						}
-					) }
+				<CustomColorPickerDropdown
+					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -28,7 +28,6 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
   contentClassName="components-color-palette__custom-color-dropdown-content"
-  key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
 >
@@ -179,33 +178,39 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         data-wp-c16t={true}
         data-wp-component="VStack"
       >
-        <Dropdown
-          contentClassName="components-color-palette__custom-color-dropdown-content"
+        <CustomColorPickerDropdown
+          isRenderedInSidebar={false}
           key=".0"
           renderContent={[Function]}
           renderToggle={[Function]}
         >
-          <div
-            className="components-dropdown"
-            tabIndex="-1"
+          <Dropdown
+            contentClassName="components-color-palette__custom-color-dropdown-content"
+            renderContent={[Function]}
+            renderToggle={[Function]}
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-color-palette__custom-color"
-              onClick={[Function]}
-              style={
-                Object {
-                  "background": "#f00",
-                  "color": "#000",
-                }
-              }
+            <div
+              className="components-dropdown"
+              tabIndex="-1"
             >
-              #f00
-            </button>
-          </div>
-        </Dropdown>
+              <button
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker"
+                className="components-color-palette__custom-color"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "background": "#f00",
+                    "color": "#000",
+                  }
+                }
+              >
+                #f00
+              </button>
+            </div>
+          </Dropdown>
+        </CustomColorPickerDropdown>
         <SinglePalette
           actions={
             <ButtonAction

diff --git a/packages/components/src/custom-gradient-bar/constants.js b/packages/components/src/custom-gradient-bar/constants.js
@@ -1,8 +1,3 @@
-export const COLOR_POPOVER_PROPS = {
-	className: 'components-custom-gradient-picker__color-picker-popover',
-	position: 'top',
-};
-
 export const GRADIENT_MARKERS_WIDTH = 16;
 export const INSERT_POINT_WIDTH = 16;
 export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;

diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
@@ -8,8 +8,8 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 
@@ -18,8 +18,8 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  */
 import Button from '../button';
 import { ColorPicker } from '../color-picker';
-import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
+import { CustomColorPickerDropdown } from '../color-palette';
 
 import {
 	addControlPoint,
@@ -31,7 +31,6 @@ import {
 	getHorizontalRelativeGradientPosition,
 } from './utils';
 import {
-	COLOR_POPOVER_PROPS,
 	GRADIENT_MARKERS_WIDTH,
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
@@ -74,6 +73,33 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 	);
 }
 
+function GradientColorPickerDropdown( {
+	isRenderedInSidebar,
+	gradientPickerDomRef,
+	...props
+} ) {
+	const popoverProps = useMemo( () => {
+		const result = {
+			className:
+				'components-custom-gradient-picker__color-picker-popover',
+			position: 'top',
+		};
+		if ( isRenderedInSidebar ) {
+			result.anchorRef = gradientPickerDomRef.current;
+			result.position = isRTL() ? 'bottom right' : 'bottom left';
+			result.__unstableForcePosition = true;
+		}
+		return result;
+	}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );
+	return (
+		<CustomColorPickerDropdown
+			isRenderedInSidebar={ isRenderedInSidebar }
+			popoverProps={ popoverProps }
+			{ ...props }
+		/>
+	);
+}
+
 function ControlPoints( {
 	disableRemove,
 	disableAlpha,
@@ -83,6 +109,7 @@ function ControlPoints( {
 	onChange,
 	onStartControlPointChange,
 	onStopControlPointChange,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const controlPointMoveState = useRef();
 
@@ -134,7 +161,9 @@ function ControlPoints( {
 		const initialPosition = point?.position;
 		return (
 			ignoreMarkerPosition !== initialPosition && (
-				<Dropdown
+				<GradientColorPickerDropdown
+					gradientPickerDomRef={ gradientPickerDomRef }
+					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					key={ index }
 					onClose={ onStopControlPointChange }
 					renderToggle={ ( { isOpen, onToggle } ) => (
@@ -244,7 +273,6 @@ function ControlPoints( {
 							) }
 						</>
 					) }
-					popoverProps={ COLOR_POPOVER_PROPS }
 				/>
 			)
 		);
@@ -258,10 +286,14 @@ function InsertPoint( {
 	onCloseInserter,
 	insertPosition,
 	disableAlpha,
+	__experimentalIsRenderedInSidebar,
+	gradientPickerDomRef,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
-		<Dropdown
+		<GradientColorPickerDropdown
+			gradientPickerDomRef={ gradientPickerDomRef }
+			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 			className="components-custom-gradient-picker__inserter"
 			onClose={ () => {
 				onCloseInserter();
@@ -314,7 +346,6 @@ function InsertPoint( {
 					} }
 				/>
 			) }
-			popoverProps={ COLOR_POPOVER_PROPS }
 		/>
 	);
 }

diff --git a/packages/components/src/custom-gradient-bar/index.js b/packages/components/src/custom-gradient-bar/index.js
@@ -78,6 +78,7 @@ export default function CustomGradientBar( {
 	onChange,
 	disableInserter = false,
 	disableAlpha = false,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const gradientPickerDomRef = useRef();
 
@@ -134,6 +135,10 @@ export default function CustomGradientBar( {
 				{ ! disableInserter &&
 					( isMovingInserter || isInsertingControlPoint ) && (
 						<ControlPoints.InsertPoint
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							gradientPickerDomRef={ gradientPickerDomRef }
 							disableAlpha={ disableAlpha }
 							insertPosition={ gradientBarState.insertPosition }
 							value={ controlPoints }
@@ -151,6 +156,9 @@ export default function CustomGradientBar( {
 						/>
 					) }
 				<ControlPoints
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
 					disableAlpha={ disableAlpha }
 					disableRemove={ disableInserter }
 					gradientPickerDomRef={ gradientPickerDomRef }

diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
@@ -104,7 +104,11 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	);
 };
 
-export default function CustomGradientPicker( { value, onChange } ) {
+export default function CustomGradientPicker( {
+	value,
+	onChange,
+	__experimentalIsRenderedInSidebar,
+} ) {
 	const gradientAST = getGradientAstWithDefault( value );
 	// On radial gradients the bar should display a linear gradient.
 	// 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 } ) {
 	return (
 		<div className="components-custom-gradient-picker">
 			<CustomGradientBar
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
 				background={ background }
 				hasGradient={ hasGradient }
 				value={ controlPoints }

diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
@@ -106,6 +106,7 @@ export default function GradientPicker( {
 	clearable = true,
 	disableCustomGradients = false,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const clearGradient = useCallback( () => onChange( undefined ), [
 		onChange,
@@ -136,6 +137,9 @@ export default function GradientPicker( {
 			content={
 				! disableCustomGradients && (
 					<CustomGradientPicker
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
 						value={ value }
 						onChange={ onChange }
 					/>

diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
@@ -127,6 +127,7 @@ function Option( {
 					) }
 					{ isGradient && (
 						<CustomGradientPicker
+							__experimentalIsRenderedInSidebar
 							value={ value }
 							onChange={ ( newGradient ) =>
 								onChange( {