Inserter: Fix unresponsive Browse All Button on Quick Inserter for Mobile Screens.

[yogeshbhutkar]

Fixes: #67338

What?

This PR resolves a bug that causes the Browse All button in the Quick Inserter to become unresponsive when clicked on mobile devices. The issue occurs because the Quick Inserter opens in a full-screen dialog on mobile, obscuring the sidebar Inserter. With this fix, clicking Browse All on mobile will close the Quick Inserter and seamlessly open the sidebar Inserter.

How?

A new prop has now been added to the <QuickInserter /> component called closeQuickInserter which is used to close the Dialog/Dropdown exclusively on mobile devices when clicked. It precedes the old logic to open the Inserter via click event on Browse All.

Testing Instructions

1. On a mobile screen, navigate to editing a post.
2. Try pressing the Plus (+) button inline with the block. It should open a full-screen dialog with a Browse All button at the bottom.
3. Try pressing the Browse All Button, and observe that the Quick Inserter Dialog is closed and the Sidebar Inserter opens up.

Screenshots or screencast

Screen.Recording.2024-11-27.at.2.49.16.PM.mov

[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: yogeshbhutkar <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ellatrix <[email protected]>

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

[ellatrix]

What if you adjust the z-index so that the in-between inserter's popover is under the "all blocks" modal?

[yogeshbhutkar]

Thank you for the review, @ellatrix! It seems that the approach with z-index adjustments isn't producing the desired results. I believe properly closing the Browse All panel is the most effective solution moving forward. Please let me know if you have any additional suggestions or insights.

[Mamaduka]

Maybe we should always close Quick Inserter via the "Browse All" button when Global (Inserter) is engaged. If I remember correctly, the focus also moves to the latter; not sure what's the point of keeping another popup open.

Cc @jeryj, this might overlap with one of the bugs you're working on.

[Mamaduka]

@yogeshbhutkar, let's see what others think about the suggestion above - #67339 (comment).