Site Editor: Some global styles dropdowns are misaligned in Styles screen

Description

The panels such as Color, Typography, etc.. in the Global Styles have an option button on the top right corner:

This button has a calculated prop from the useToolsPanelDropdownMenuProps to position the dropdown to the left of the global styles sidebar.

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

Lines 145 to 156 in 9439252

    
           export function useToolsPanelDropdownMenuProps() { 
        
           	const isMobile = useViewportMatch( 'medium', '<' ); 
        
           	return ! isMobile 
        
           		? { 
        
           				popoverProps: { 
        
           					placement: 'left-start', 
        
           					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px) 
        
           					offset: 259, 
        
           				}, 
        
           		  } 
        
           		: {}; 
        
           }

This prop works well when the panels are in the global styles sidebar,

But not in the Styles screen:

I think the dropdown should be placed like this:

Step-by-step reproduction instructions

Apperance > Design > Styles
Click one of the option buttons

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Please confirm which theme type you used for testing.

Block
Classic
Hybrid (e.g. classic with theme.json)
Not sure

Note: Before attempting any modifications, it may be a good idea to first discuss what the ideal approach would be.

@t-hamano

Thanks for the issue, @t-hamano.

I believe it's best to extend useToolsPanelDropdownMenuProps functionality to allow the usage of custom popover props and fallback to the default ones when they are not defined. Basically, this:

diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 5d5c02d179..d9a818732e 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -117,7 +117,10 @@ function ColorToolsPanel( {
 	panelId,
 	children,
 } ) {
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps( {
+		placement: 'right-start',
+		offset: 18,
+	} );
 	const resetAll = () => {
 		const updatedValue = resetAllFilter( value );
 		onChange( updatedValue );
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index f5dc157d1d..3db540f5fa 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -142,14 +142,20 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
-export function useToolsPanelDropdownMenuProps() {
+export function useToolsPanelDropdownMenuProps( customPopoverProps ) {
 	const isMobile = useViewportMatch( 'medium', '<' );
+
+	const DEFAULT_POPOVER_PROPS = {
+		placement: 'left-start',
+		// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+		offset: 259,
+	};
+
 	return ! isMobile
 		? {
 				popoverProps: {
-					placement: 'left-start',
-					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-					offset: 259,
+					...DEFAULT_POPOVER_PROPS,
+					...customPopoverProps,
 				},
 		  }
 		: {};

@yogeshbhutkar

@yogeshbhutkar The key point is that there is currently no way to know where each panel is being rendered.

The only way I can think of is to provide props or context to the GlobalStylesUI component here so that each panel itself can reference it and determine the position of its popover.

This still seems to be an issue. It's quite a nasty visual bug.

I vaguely remember when it was first implemented, there was always some awareness that useToolsPanelDropdownMenuProps might have this shortcoming. I don't think it was ever supposed to be embedded in each component, instead used in a way that's its props can be passed in to the component. I think refactors have maybe resulted in the behavior becoming intrinsic to the styles components.

I think ideally the Inspector has a way to inject the positioning it requires as a prop. Not sure the best way though, it looks like there's potentially a lot of prop drilling involved. It could perhaps be a prop to the outermost component, and then internally context is used to share the vlaue.

Noting it's still an issue as of WordPress 7.1.2 and Gutenberg 24.0.

I submitted #84048, although it may not be the ideal approach.

Navigation Menu

Repository navigation

Site Editor: Some global styles dropdowns are misaligned in Styles screen #69764

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Please confirm which theme type you used for testing.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	export function useToolsPanelDropdownMenuProps() {
	const isMobile = useViewportMatch( 'medium', '<' );
	return ! isMobile
	? {
	popoverProps: {
	placement: 'left-start',
	// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
	offset: 259,
	},
	}
	: {};
	}

Site Editor: Some global styles dropdowns are misaligned in Styles screen #69764

Description

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Please confirm which theme type you used for testing.

Activity

t-hamano commented on Mar 31, 2025

yogeshbhutkar commented on Mar 31, 2025

t-hamano commented on Mar 31, 2025

talldan commented on Dec 19, 2025

annezazu commented on Sep 25, 2026

t-hamano commented on Oct 3, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions