Dropdown active option indicator misaligned

[dcalhoun]

Description

The indicator for the currently selected option within a dropdown menu is misaligned.

This appears to have been introduced in the 22.5 release via #50665 or #50907.

Step-by-step reproduction instructions

1. Add a Heading block¹.
2. Tap the "Change level" button (an H2 icon) to open the heading level dropdown menu.

Expected behaviour

The check mark indicating the selected option is flush to the right.

Actual behaviour

The check mark indicating the selected option is slightly to the right of center.

Screenshots or screen recording (optional)

Correct (22.4)	Incorrect (22.5)

WordPress information

• WordPress version: 6.2.2
• Gutenberg version: 16.0.0
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: iPhone 13 mini
• Operating system: iOS 16.5.1
• WordPress app version: 22.5

Footnotes

1. Reproducing via heading level may not be possible due to https://github.com/WordPress/gutenberg/issues/51996, but this can be reproduced via block or text alignment dropdown menus as well. ↩

[dcalhoun]

@fluiddot not a disruptive or new regression, but it appears this may be the result of recent changes to the Cell component.

[fluiddot]

@fluiddot not a disruptive or new regression, but it appears this may be the result of recent changes to the Cell component.

That's interesting. In the tests we made when updating the Cell component, we covered the different components that used it. However, seems I overlooked DropdownMenu. I'll try to take a quick look in the next few weeks to plan a fix, maybe we could use the RadioControl component as a replacement here 🤔.

[devmuhib009]

I just checked in my android mobile, heading display label the label at the top. There is no check mark on android.

[devmuhib009]

As heading label displaying at the top of H2 heading, it does not allow to select the H2 heading in mobile. I tried to select the H2 heading in various way, but once I change heading from H2 to another, I can't get back to original one.

[fluiddot]

Hey @devmuhib009, thanks for chiming in 👋 . Per the screenshot you shared, it appears you are using the Gutenberg editor in the browser. The original issue only affects the mobile native version of the editor, which is embedded in the WordPress/Jetpack app. Hence, it can only be reproduced using the app.

[SinghCod3r]

@dcalhoun , i want to work on this issue. please assign this to me.

[dcalhoun]

Hey @SinghCod3r. Thank you for your willingness to contribute.

The native mobile editor (Gutenberg Mobile) is currently in a hiatus. We are exploring a different, WebView-based approach in GutenbergKit. If you are interested, I suggest looking for opportunities to contribute to that project.