Fix: Custom color picker popover position

WordPress · Nov 29, 2021 · d39d1a0 · d39d1a0
1 parent 61d82f7
commit d39d1a0
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 1 deletion.
diff --git 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
@@ -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
@@ -96,6 +96,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
@@ -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
@@ -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
@@ -452,6 +452,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -63,6 +63,7 @@ function ScreenTextColor( { name } ) {
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
+				__experimentalIsRenderedInSidebar
 			/>
 		</>
 	);