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.

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

Dragging blocks from the Inserter Library does not "cleanup" on drop #55173

Open
kjohnson opened this issue Oct 9, 2023 · 3 comments
Open

Dragging blocks from the Inserter Library does not "cleanup" on drop #55173

kjohnson opened this issue Oct 9, 2023 · 3 comments
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Testing Needs further testing to be confirmed. [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. [Type] Bug An existing feature does not function as intended

Comments

@kjohnson
Copy link
Contributor

kjohnson commented Oct 9, 2023

Description

When dragging a block from the Inserter Library and dropping the block into the Block List, the draggable component does not seem to reset properly resulting in a drag cursor when no longer dragging.

We have a workaround for this which listens to the dragend event and manually removes the is-dragging-components-draggable class from the <body/> tag, see impress-org/givewp#7014.

Note: We are not able to reproduce this when using the WordPress Block Editor, but rather when using the @wordpress components.

Update: This seems to only be an issue when the blocks do not support multiple instances.

supports: {
    multiple: false,
},

Workaround

We have a temporary work around to reset the drag cursor by listening to the dragend event.

document.addEventListener('dragend', () => {
    // Reset the drag cursor.
    document.body.classList.remove('is-dragging-components-draggable');

    // Scroll the interface down by 1px to force a repaint and reset the popover position.
    document.getElementsByClassName('interface-interface-skeleton__body')[0].scrollBy(0,1);
});

Step-by-step reproduction instructions

  1. Open the Inserter Library (sidebar)
  2. Drag a block into the Block List
  3. Drop the block on a dropzone

Screenshots, screen recording, code snippet

2023-10-10 11 19 44

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

@JasonTheAdams
Copy link

An interesting detail to this is that the issue goes away if the sidebar is closed — which is the behavior of the post editor after a block is dropped. So if i drop a block and manually close the sidebar, the app returns to a usable state. It almost seems like the event of closing the block list triggers the cleanup.

@jordesign jordesign 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 Needs Testing Needs further testing to be confirmed. labels Oct 9, 2023
@kjohnson
Copy link
Contributor Author

kjohnson commented Oct 10, 2023

Update: This seems to only be an issue when the blocks do not support multiple instances.

supports: {
    multiple: false,
},

Copy link

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

@github-actions github-actions bot added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Nov 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Testing Needs further testing to be confirmed. [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants