Skip to content

Commit 0ac0057

Browse files
t-hamanot-hamano
authored
Merge 75ccdf4 into dbabf58 
2 parents dbabf58 + 75ccdf4 commit 0ac0057

13 files changed

Lines changed: 94 additions & 51 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/block-editor/src/components/background-image-control/index.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
InheritanceResetButton,
3333
isGlobalStylesInheritanceIndicatorUIEnabled,
3434
} from '../global-styles/inheritance';
35+
import { useToolsPanelItemPopoverProps } from '../global-styles/utils';
3536
import { setImmutably } from '../../utils/object';
3637
import MediaReplaceFlow from '../media-replace-flow';
3738
import { store as blockEditorStore } from '../../store';
@@ -42,12 +43,6 @@ import {
4243

4344
const IMAGE_BACKGROUND_TYPE = 'image';
4445

45-
const BACKGROUND_POPOVER_PROPS = {
46-
placement: 'left-start',
47-
offset: 36,
48-
shift: true,
49-
className: 'block-editor-global-styles-background-panel__popover',
50-
};
5146
const noop = () => {};
5247

5348
/**
@@ -188,6 +183,11 @@ function BackgroundControlsPanel( {
188183
hasLocalOverride,
189184
containerRef,
190185
} ) {
186+
const popoverProps = {
187+
...useToolsPanelItemPopoverProps(),
188+
className: 'block-editor-global-styles-background-panel__popover',
189+
};
190+
191191
if ( ! hasImageValue ) {
192192
return;
193193
}
@@ -196,7 +196,7 @@ function BackgroundControlsPanel( {
196196

197197
return (
198198
<Dropdown
199-
popoverProps={ BACKGROUND_POPOVER_PROPS }
199+
popoverProps={ popoverProps }
200200
renderToggle={ ( { onToggle, isOpen } ) => {
201201
const toggleProps = {
202202
onClick: onToggle,

‎packages/block-editor/src/components/global-styles/border-panel.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import { __ } from '@wordpress/i18n';
1010
import { getValueFromVariable } from '@wordpress/global-styles-engine';
1111
import BorderRadiusControl from '../border-radius-control';
1212
import { useColorsPerOrigin } from './hooks';
13-
import { useToolsPanelDropdownMenuProps } from './utils';
13+
import {
14+
useToolsPanelDropdownMenuProps,
15+
useToolsPanelItemPopoverProps,
16+
} from './utils';
1417
import { setImmutably } from '../../utils/object';
1518
import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
1619
import {
@@ -101,6 +104,7 @@ export default function BorderPanel( {
101104
showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
102105
} ) {
103106
const colors = useColorsPerOrigin( settings );
107+
const itemPopoverProps = useToolsPanelItemPopoverProps();
104108
const areCustomSolidsEnabled = settings?.color?.custom;
105109
const decodeValue = useCallback(
106110
( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
@@ -405,8 +409,8 @@ export default function BorderPanel( {
405409
enableStyle={ showBorderStyle }
406410
label={ __( 'Border' ) }
407411
onChange={ onBorderChange }
408-
popoverOffset={ 40 }
409-
popoverPlacement="left-start"
412+
popoverOffset={ itemPopoverProps.offset }
413+
popoverPlacement={ itemPopoverProps.placement }
410414
value={ border }
411415
__experimentalIsRenderedInSidebar
412416
/>

‎packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.jsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
InheritanceToolsPanelItem,
1717
isGlobalStylesInheritanceIndicatorUIEnabled,
1818
} from './inheritance';
19+
import { useToolsPanelItemPopoverProps } from './utils';
1920

2021
/**
2122
* @typedef {Object} DropdownContentProps
@@ -90,12 +91,6 @@ function DropdownContent( {
9091
);
9192
}
9293

93-
const popoverProps = {
94-
placement: 'left-start',
95-
offset: 36,
96-
shift: true,
97-
};
98-
9994
const LabeledColorIndicators = ( { indicators, label } ) => (
10095
<Stack
10196
className="block-editor-panel-color-gradient-settings__labeled-indicators"
@@ -202,6 +197,7 @@ export default function ColorGradientDropdownItem( {
202197
hasInheritedValue = false,
203198
showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
204199
} ) {
200+
const popoverProps = useToolsPanelItemPopoverProps();
205201
const colorGradientDropdownButtonRef = useRef( undefined );
206202
const itemClassName = clsx( 'block-editor-color-gradient-item', className );
207203
// A local override exists when the user has set a value that shadows an

‎packages/block-editor/src/components/global-styles/filters-panel.jsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { reset as resetIcon } from '@wordpress/icons';
1616
import { getValueFromVariable } from '@wordpress/global-styles-engine';
1717
import {
1818
useToolsPanelDropdownMenuProps,
19+
useToolsPanelItemPopoverProps,
1920
getDuotoneSlugFromPreset,
2021
} from './utils';
2122
import { setImmutably } from '../../utils/object';
@@ -89,14 +90,6 @@ const DEFAULT_CONTROLS = {
8990
duotone: true,
9091
};
9192

92-
const popoverProps = {
93-
placement: 'left-start',
94-
offset: 36,
95-
shift: true,
96-
className: 'block-editor-duotone-control__popover',
97-
headerTitle: __( 'Duotone' ),
98-
};
99-
10093
const LabeledColorIndicator = ( { indicator, label } ) => (
10194
<Stack
10295
className="block-editor-panel-duotone-settings__label-row"
@@ -180,6 +173,11 @@ export default function FiltersPanel( {
180173
defaultControls = DEFAULT_CONTROLS,
181174
showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
182175
} ) {
176+
const popoverProps = {
177+
...useToolsPanelItemPopoverProps(),
178+
className: 'block-editor-duotone-control__popover',
179+
headerTitle: __( 'Duotone' ),
180+
};
183181
const decodeValue = ( rawValue ) =>
184182
getValueFromVariable( { settings }, '', rawValue );
185183
// Always keep the layout className (e.g. `single-column`); only the

‎packages/block-editor/src/components/global-styles/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
export { useSettingsForBlockElement } from './hooks';
2+
export {
3+
ToolsPanelPopoverPropsContext,
4+
useToolsPanelItemPopoverProps,
5+
} from './utils';
26
export {
37
default as TypographyPanel,
48
useHasTypographyPanel,

‎packages/block-editor/src/components/global-styles/shadow-panel-components.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
1414
import clsx from 'clsx';
1515
import { Tooltip } from '@wordpress/ui';
1616
import { InheritanceResetButton } from './inheritance';
17+
import { useToolsPanelItemPopoverProps } from './utils';
1718

1819
/**
1920
* Shared reference to an empty array for cases where it is important to avoid
@@ -135,11 +136,7 @@ export function ShadowPopover( {
135136
hasLocalOverride = false,
136137
onReset,
137138
} ) {
138-
const popoverProps = {
139-
placement: 'left-start',
140-
offset: 36,
141-
shift: true,
142-
};
139+
const popoverProps = useToolsPanelItemPopoverProps();
143140

144141
return (
145142
<Dropdown

‎packages/block-editor/src/components/global-styles/text-shadow-panel.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { shadow as textShadowIcon, Icon, check, reset } from '@wordpress/icons';
1111
import type { TextShadowPreset } from '@wordpress/global-styles-engine';
1212
import clsx from 'clsx';
1313
import { useSettings } from '../use-settings';
14+
import { useToolsPanelItemPopoverProps } from './utils';
1415

1516
type TextShadowValue = string | undefined;
1617

@@ -63,9 +64,7 @@ function getTextShadowPresetSlug( rawValue: TextShadowValue ) {
6364

6465
export function TextShadowPopover( { textShadow, onChange }: TextShadowProps ) {
6566
const popoverProps = {
66-
placement: 'left-start' as const,
67-
offset: 36,
68-
shift: true,
67+
...useToolsPanelItemPopoverProps(),
6968
className: 'block-editor-global-styles__text-shadow-popover',
7069
};
7170

‎packages/block-editor/src/components/global-styles/utils.js‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,33 @@
11
import { useViewportMatch } from '@wordpress/compose';
2+
import { createContext, useContext } from '@wordpress/element';
3+
4+
/**
5+
* Popover props for ToolsPanel dropdown menus (`dropdown`) and item popovers
6+
* (`item`). Defaults to the editor sidebar; consumers rendering the panels
7+
* elsewhere provide their own values.
8+
*/
9+
export const ToolsPanelPopoverPropsContext = createContext( {
10+
dropdown: {
11+
placement: 'left-start',
12+
// Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
13+
offset: 259,
14+
},
15+
item: {
16+
placement: 'left-start',
17+
// Panel padding (16px) + spacing (20px)
18+
offset: 36,
19+
shift: true,
20+
},
21+
} );
222

323
export function useToolsPanelDropdownMenuProps() {
424
const isMobile = useViewportMatch( 'medium', '<' );
5-
return ! isMobile
6-
? {
7-
popoverProps: {
8-
placement: 'left-start',
9-
// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
10-
offset: 259,
11-
},
12-
}
13-
: {};
25+
const { dropdown } = useContext( ToolsPanelPopoverPropsContext );
26+
return ! isMobile ? { popoverProps: dropdown } : {};
27+
}
28+
29+
export function useToolsPanelItemPopoverProps() {
30+
return useContext( ToolsPanelPopoverPropsContext ).item;
1431
}
1532

1633
/**

‎packages/edit-site/src/components/sidebar-global-styles/index.jsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMemo, useState } from '@wordpress/element';
44
import { privateApis as routerPrivateApis } from '@wordpress/router';
55
import { privateApis as editorPrivateApis } from '@wordpress/editor';
66
import { useViewportMatch } from '@wordpress/compose';
7+
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
78
import { useSelect } from '@wordpress/data';
89
import { Button, __experimentalHStack as HStack } from '@wordpress/components';
910
import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
@@ -14,6 +15,13 @@ import { unlock } from '../../lock-unlock';
1415
const { GlobalStylesUIWrapper, GlobalStylesActionMenu } =
1516
unlock( editorPrivateApis );
1617
const { useLocation, useHistory } = unlock( routerPrivateApis );
18+
const { ToolsPanelPopoverPropsContext } = unlock( blockEditorPrivateApis );
19+
20+
// Panel padding (16px) + screen padding (12px) + spacing (4px)
21+
const TOOLS_PANEL_POPOVER_PROPS = {
22+
dropdown: { placement: 'right-start', offset: 32 },
23+
item: { placement: 'right-start', offset: 32, shift: true },
24+
};
1725

1826
const GlobalStylesPageActions = ( {
1927
isStyleBookOpened,
@@ -99,11 +107,15 @@ export default function SidebarGlobalStyles() {
99107
headingLevel={ 2 }
100108
>
101109
<div className="edit-site-styles__content">
102-
<GlobalStylesUIWrapper
103-
path={ section }
104-
onPathChange={ onChangeSection }
105-
settings={ settings }
106-
/>
110+
<ToolsPanelPopoverPropsContext.Provider
111+
value={ TOOLS_PANEL_POPOVER_PROPS }
112+
>
113+
<GlobalStylesUIWrapper
114+
path={ section }
115+
onPathChange={ onChangeSection }
116+
settings={ settings }
117+
/>
118+
</ToolsPanelPopoverPropsContext.Provider>
107119
</div>
108120
</Page>
109121
);

0 commit comments

Comments
 (0)