Skip to content

Fix: Custom color picker popover position #36965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jorgefilipecosta merged 1 commit into from
Nov 30, 2021
Merged

Fix: Custom color picker popover position #36965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/colors-gradients/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function ColorGradientControlInner( {
disableCustomColors,
disableCustomGradients,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
className,
label,
onColorChange,
Expand Down Expand Up @@ -109,6 +110,9 @@ function ColorGradientControlInner( {
__experimentalHasMultipleOrigins={
__experimentalHasMultipleOrigins
}
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
clearable={ clearable }
enableAlpha={ enableAlpha }
/>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export const PanelColorGradientSettingsInner = ( {
title,
showTitle = true,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
enableAlpha,
...props
} ) => {
Expand Down Expand Up @@ -145,6 +146,7 @@ export const PanelColorGradientSettingsInner = ( {
disableCustomColors,
disableCustomGradients,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
enableAlpha,
...setting,
} }
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/border-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export function BorderColorEdit( props ) {
onColorChange={ onChangeColor }
clearable={ false }
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
{ ...colorGradientSettings }
/>
);
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export default function ColorPanel( {
settings={ settings }
showTitle={ showTitle }
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
>
{ enableContrastChecking && (
<ContrastChecker
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/cover/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,7 @@ function CoverEdit( {
) }
<PanelColorGradientSettings
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
title={ __( 'Overlay' ) }
initialOpen={ true }
settings={ [
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,7 @@ function Navigation( {
{ hasColorSettings && (
<PanelColorSettings
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
title={ __( 'Color' ) }
initialOpen={ false }
colorSettings={ [
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/separator/separator-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const SeparatorSettings = ( { color, setColor } ) => (
<InspectorControls>
<PanelColorSettings
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
title={ __( 'Color' ) }
colorSettings={ [
{
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/social-links/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ export function SocialLinksEdit( props ) {
</PanelBody>
<PanelColorSettings
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
title={ __( 'Color' ) }
colorSettings={ [
{
Expand Down
9 changes: 8 additions & 1 deletion packages/components/src/color-palette/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -117,6 +118,7 @@ export default function ColorPalette( {
onChange,
value,
__experimentalHasMultipleOrigins = false,
__experimentalIsRenderedInSidebar = false,
} ) {
const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
const Component = __experimentalHasMultipleOrigins
Expand All @@ -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(
Copy link
Contributor

@ntsekouras ntsekouras Nov 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we just pass down a css class instead of introducing a new API?

Copy link
Member Author

@jorgefilipecosta jorgefilipecosta Nov 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We would need add a property like customColorContentClassName, to ColorPalette, and ColorGradientPanels etc. A block wanting to have the color picker appear in the correct position would need to explicitly know the class to add.
It seems preferable to have a flag that changes the positioning behavior. The fact we use a class to do that is an implementation detail, e.g: on mobile, the way to do it may be different.

'components-color-palette__custom-color-dropdown-content',
{
'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,
}
) }
renderContent={ renderCustomColorPicker }
renderToggle={ ( { isOpen, onToggle } ) => (
<button
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/color-palette/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Copy link
Contributor

@ntsekouras ntsekouras Nov 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really coupled with internal class names of other components. Do you think we could avoid them or extract them somehow?

Copy link
Member Author

@jorgefilipecosta jorgefilipecosta Nov 30, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we are changing the position of a popover, I'm not sure how we can avoid relying on the classes the component defines. And unfortunately, this is not the first time we do it, searching for ".components-popover__content" on the codebase we find lots of matches used on each place we change something related to the popover, in some cases even outside the components package while on this case we are inside the components package.
It is not an ideal solution but it seems to be consistent with what we are doing on similar cases.

margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
margin-top: #{ -($grid-unit-60 + $grid-unit-15) };
}
}
1 change: 1 addition & 0 deletions packages/edit-site/src/components/global-styles/screen-background-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ function ScreenBackgroundColor( { name } ) {
__experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
/>
</>
);
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/global-styles/screen-link-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ function ScreenLinkColor( { name } ) {
__experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
/>
</>
);
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/global-styles/screen-text-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function ScreenTextColor( { name } ) {
__experimentalHasMultipleOrigins
showTitle={ false }
enableAlpha
__experimentalIsRenderedInSidebar
/>
</>
);
Expand Down