Fix: Fixed Position Toggle Button Not Taking Full Height

[Mayank-Tripathi32]

resolves #67401

What?

This PR adds a prop to CustomSelectControl to disable the legacy behavior and enable the new behavior of custom-select-v2. The new behavior, which includes flipping the dropdown, fixes the issue.

Why?

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 causes a visual inconsistency, as users are required to scroll to see the full options.

How?

This PR introduces a new prop to CustomSelectControl that enables the new dropdown flipping behavior when there isn’t enough space below. It also adds the isLegacy={false} prop in the position support of the inspector. The custom isLegacy prop in CustomSelectControl defaults to true to preserve the original behavior by default.

Testing 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

Screencast

Screen.Recording.2024-11-29.at.12.35.38.AM.mov

[Mayank-Tripathi32]

I am not sure why unit test failed on action.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mayank-Tripathi32 <[email protected]>
Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: SainathPoojary <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mirka]

This is not a prop intended to be exposed publicly, and is likely to cause unintended side effects or maintenance headaches when used in this way. I also looked into the blame for the flip logic and it seems like it was a pretty intentional hotfix for #63180. We do need to find a good fix for it though, to unblock CustomSelectControlV2. (cc @ciampo)

[mirka]

(Also I think I'm open to setting flip to true for the legacy version as well, once the z-index issue is addressed.)

[Mayank-Tripathi32]

Can't we expose flip behaviour publicly via props? I think It would make more sense to allow for it instead of changing anything in legacy.

[ciampo]

Hey @Mayank-Tripathi32 , thank you for opening this PR.

Unfortunately, the proposed change goes against the strategy that we planned for this component (see #55023).

The isLegacy prop is meant to remain private. We also plan on creating a new, V2 implementation where we're going to have the freedom of crafting a new API paradigm, while leaving the legacy version untouched for backwards compatibility reasons.

As @mirka also mentioned, we could consider changing the popover's flip behaviour for the legacy version too, given that we can fix the side-effect reported in #63180