Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Block inserter panel visibility issue on mobile and tablet while building a page or post #68791

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Fix: Block inserter panel visibility issue on mobile and tablet while building a page or post #68791

wants to merge 1 commit into from

Conversation

Kallyan01
Copy link

@Kallyan01 Kallyan01 commented Jan 20, 2025 •
edited
Loading

Closes #68790

What?

This pull request updates the behavior of the block inserter panel to close automatically after interacting with a block (dragging and dropping or clicking to add) on mobile or tablet devices.

Why?

  • On smaller screens, leaving the block inserter panel open after block interaction obstructs the editing canvas, reducing usability.
  • Closing the panel after the user interacts with a block ensures a smoother and more intuitive editing experience, especially on touch devices.

How?

Added onClose() callback to monitor block interaction events (e.g., dragstart, click) and trigger the closure of the block panel.

Testing Instructions

  • Open the WordPress Gutenberg editor in a mobile or tablet browser.
  • Click the block inserter button to open the panel.
  • Perform the following actions and verify the behavior:
  • Drag and Drop: Drag a block from the panel and drop it onto the editor canvas. The panel should close automatically.
  • Click: Click on a block to add it to the editor. The panel should close automatically.

Screenshots or screencast

Screen.Recording.2025-01-21.at.1.50.39.AM.mov

@Kallyan01
feat: added auto close block selection panel when user clicks on the …
950a587 
…block or start dragging the block in mobile or tablet devices
@Kallyan01 Kallyan01 requested a review from ellatrix as a code owner January 20, 2025 20:10
@github-actions GitHub Actions
Copy link

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: Kallyan01 <[email protected]>

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

@Kallyan01 Kallyan01 closed this Jan 20, 2025
@github-actions GitHub Actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Kallyan01! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jan 20, 2025
@Kallyan01 Kallyan01 deleted the fix/block-inserter-panel-issue branch January 20, 2025 20:12
@Kallyan01 Kallyan01 restored the fix/block-inserter-panel-issue branch January 20, 2025 20:12
@Kallyan01 Kallyan01 reopened this Jan 20, 2025
@Kallyan01 Kallyan01 closed this Jan 20, 2025
@Kallyan01 Kallyan01 reopened this Jan 20, 2025
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Package] Block editor /packages/block-editor labels Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Block Inserter Panel Does Not Close After Interaction on Mobile/Tablet web editor
2 participants
@Kallyan01 @t-hamano