Position Toggle Button Not Taking Full Height

[SainathPoojary]

Description

In the WordPress block editor, the “Position” toggle button options in the Group block settings do not take up the full height of the settings panel. This results in a visual inconsistency, as users must scroll to view the full options.

Related Trac ticket: https://core.trac.wordpress.org/ticket/62605

Step-by-step reproduction instructions

1. Open the WordPress block editor.
2. Add a “Group” block to the page.
3. Select the “Group” block.
4. In the block settings panel on the right, locate the “Position” toggle button.
5. Observe that the “Position” toggle options do not extend to fill the full height of the settings panel.
6. Attempt to interact with the toggle options

Screenshots, screen recording, code snippet

My.Movie.mp4

Environment info

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins: None activated

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

[Infinite-Null]

Hi @SainathPoojary,

Thank you for pointing this out. I was able to reproduce the issue, and I agree that this could be inconvenient for users, specially when they have selected sticky as the position.

Supplemental Artifacts

Screen.Recording.2024-11-28.at.10.46.34.PM.mov

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0

[Mayank-Tripathi32]

Hello @SainathPoojary @Infinite-Null, I believe this issue stems from the lack of directional opening support in the CustomSelectControl component. I am currently exploring whether this functionality is supported in Ariakit. If it’s not, I will work on implementing it.

[ciampo]

Thank you all for reporting.

The popover's height adapts to the available viewport space without causing — so, in that sense, it's working as intended.

At the same time, I understand that the behaviour may be inconvenient and disorienting. As explained in #67403 (review), our preferred solution would be to enable the popover to flip — although at the moment we're not able to enable such behavior, since it would cause the bug flagged in #63180 to happen. Ideally, we'd first fix #63180 and then enable the popover to flip when there isn't enough space.