From 5612dad7b123a7efa69f09982a57436c3b0364e2 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Tue, 30 Nov 2021 14:55:57 +0000
Subject: [PATCH] Fix: Custom color picker popover position (#36965)

---
 .../src/components/colors-gradients/control.js           | 4 ++++
 .../colors-gradients/panel-color-gradient-settings.js    | 2 ++
 packages/block-editor/src/hooks/border-color.js          | 1 +
 packages/block-editor/src/hooks/color-panel.js           | 1 +
 packages/block-library/src/cover/edit.js                 | 1 +
 packages/block-library/src/navigation/edit/index.js      | 1 +
 .../block-library/src/separator/separator-settings.js    | 1 +
 packages/block-library/src/social-links/edit.js          | 1 +
 packages/components/src/color-palette/index.js           | 9 ++++++++-
 packages/components/src/color-palette/style.scss         | 7 +++++++
 .../components/global-styles/screen-background-color.js  | 1 +
 .../src/components/global-styles/screen-link-color.js    | 1 +
 .../src/components/global-styles/screen-text-color.js    | 1 +
 13 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 9cb4342fb3a2..783b35a6a5c2 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -36,6 +36,7 @@ function ColorGradientControlInner( {
 	disableCustomColors,
 	disableCustomGradients,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 	className,
 	label,
 	onColorChange,
@@ -109,6 +110,9 @@ function ColorGradientControlInner( {
 							__experimentalHasMultipleOrigins={
 								__experimentalHasMultipleOrigins
 							}
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
 							clearable={ clearable }
 							enableAlpha={ enableAlpha }
 						/>
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 d2b5b383ddf6..02b7c086c27e 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
@@ -93,6 +93,7 @@ export const PanelColorGradientSettingsInner = ( {
 	title,
 	showTitle = true,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 	...props
 } ) => {
@@ -145,6 +146,7 @@ export const PanelColorGradientSettingsInner = ( {
 						disableCustomColors,
 						disableCustomGradients,
 						__experimentalHasMultipleOrigins,
+						__experimentalIsRenderedInSidebar,
 						enableAlpha,
 						...setting,
 					} }
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index 3b206c90df7e..f188e616a471 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -92,6 +92,7 @@ export function BorderColorEdit( props ) {
 			onColorChange={ onChangeColor }
 			clearable={ false }
 			__experimentalHasMultipleOrigins
+			__experimentalIsRenderedInSidebar
 			{ ...colorGradientSettings }
 		/>
 	);
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index e52b628a5a52..9c018f6c649c 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -61,6 +61,7 @@ export default function ColorPanel( {
 				settings={ settings }
 				showTitle={ showTitle }
 				__experimentalHasMultipleOrigins
+				__experimentalIsRenderedInSidebar
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index ff9d1322014e..af05c4752e8f 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -547,6 +547,7 @@ function CoverEdit( {
 				) }
 				<PanelColorGradientSettings
 					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
 					title={ __( 'Overlay' ) }
 					initialOpen={ true }
 					settings={ [
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 90fa24172d08..7bc757afae88 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -437,6 +437,7 @@ function Navigation( {
 					{ hasColorSettings && (
 						<PanelColorSettings
 							__experimentalHasMultipleOrigins
+							__experimentalIsRenderedInSidebar
 							title={ __( 'Color' ) }
 							initialOpen={ false }
 							colorSettings={ [
diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js
index 8ca5da44de11..e1d772ca96ce 100644
--- a/packages/block-library/src/separator/separator-settings.js
+++ b/packages/block-library/src/separator/separator-settings.js
@@ -8,6 +8,7 @@ const SeparatorSettings = ( { color, setColor } ) => (
 	<InspectorControls>
 		<PanelColorSettings
 			__experimentalHasMultipleOrigins
+			__experimentalIsRenderedInSidebar
 			title={ __( 'Color' ) }
 			colorSettings={ [
 				{
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index eebb1218b79b..41dce99b39b8 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -167,6 +167,7 @@ export function SocialLinksEdit( props ) {
 				</PanelBody>
 				<PanelColorSettings
 					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
 					colorSettings={ [
 						{
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index c203991fd461..7052098d115c 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -5,6 +5,7 @@ import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -117,6 +118,7 @@ export default function ColorPalette( {
 	onChange,
 	value,
 	__experimentalHasMultipleOrigins = false,
+	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 	const Component = __experimentalHasMultipleOrigins
@@ -135,7 +137,12 @@ export default function ColorPalette( {
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<Dropdown
-					contentClassName="components-color-palette__custom-color-dropdown-content"
+					contentClassName={ classnames(
+						'components-color-palette__custom-color-dropdown-content',
+						{
+							'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,
+						}
+					) }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 6002b50cb3a0..ff9c198b6531 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -25,3 +25,10 @@
 		padding: 0;
 	}
 }
+
+@include break-medium() {
+	.components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
+		margin-top: #{ -($grid-unit-60 + $grid-unit-15) };
+	}
+}
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 8ed78078a775..b023ac27b62f 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
@@ -105,6 +105,7 @@ function ScreenBackgroundColor( { name } ) {
 				__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 e69b92eb0567..c18580ed1187 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
@@ -71,6 +71,7 @@ function ScreenLinkColor( { name } ) {
 				__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 4b309ed09a2e..599293265ae6 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
@@ -63,6 +63,7 @@ function ScreenTextColor( { name } ) {
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
+				__experimentalIsRenderedInSidebar
 			/>
 		</>
 	);