search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

Drag & Drop seems to be broken in Firefox when Preferences > Appearance is switched to “Display button labels” #29511

Open trynet opened 3 years ago

trynet commented 3 years ago

Environment: DesktopServer PHP 7.1.13 WP 5.7-RC2-50482 Gutenberg 10.1.0 No other plugins active Themes Tested TwentyTwentyOne TwentyTwenty Hansen

FYI - The Move Up and Move Down work as expected.

bph commented 3 years ago

@trynet Thanks for sending in your first bug report.👏 🎉

It seems to work with Chrome. Tested it with a paragraph block or an image block In Firefox dragging doesn't work. Tested it in both: WP 5.7 RC2 with and without the Gutenberg plugins installed. So this is happening with the latest WP version.

Steps to reproduce:

Here is a video.

https://user-images.githubusercontent.com/39980/109882784-680b6980-7c48-11eb-9057-0492eb91a760.mp4

What's really odd is that there is no error message in the browser console. It is working as expected when the preference Display button labels is switched off.

WordPress: 5.7-RC2-50482 Theme: Twenty-Twenty-one Firefox:87.0b5 (64-bit) (Developer Edition) MacOS: 10.15.7 Gutenberg: deactivated.

talldan commented 3 years ago

This seems to be a bug with Firefox.

When using text labels, the button text is shown using an ::after pseudeo element. The button element has no proper text content.

This Codepen example shows what happens in Firefox. If you try dragging the first button with text, only the words 'Drag Me' can be dragged on, dragging on any of the area outside of the text (but still inside the button) doesn't work.

The second button with no text can't be dragged at all because it has no text, which is what happens with this bug: https://codepen.io/talldan/pen/LYbrawp

Try this in Chrome and the entire area of both buttons are draggable.

I think this can be fixed by making the Drag button not use a pseudo element and have proper 'Drag' text content. Even after that, only the word 'Drag' in the button will be draggable 😬

hellofromtonya commented 3 years ago

@youknowriad What about this issue, i.e. is this one to be fixed for 5.7 RC3?

gwwar commented 3 years ago

Let's maybe move this to a 5.7.x release. The potential fix here looks like it might be a little risky to try at this point in the WP 5.7 release cycle.

noisysocks commented 3 years ago

Let's maybe move this to a 5.7.x release. The potential fix here looks like it might be a little risky to try at this point in the WP 5.7 release cycle.

Agreed.

bph commented 3 years ago

@noisysocks Would this be an issue for the 5.7.x board?

skorasaurus commented 11 months ago

can confirm still an issue with Gutenberg 16.8.1 and firefox 118.0.2

talldan commented 10 months ago

I'll try to follow up with the firefox bug tracker. I had pretty good success recently getting another Firefox bug fixed.

talldan commented 10 months ago

I was sure there was an existing firefox bug report for this, but couldn't find one, so I've made a new one - https://bugzilla.mozilla.org/show_bug.cgi?id=1862019

edit: that one was closed as a duplicate, this is the ticket now, which has been open for 14 years, so I'm not expecting a fix anytime soon - https://bugzilla.mozilla.org/show_bug.cgi?id=568313

talldan commented 2 months ago

We could possibly look at changing the draggable button to <div role="button"> to solve this. I know it's not ideal, but there aren't many other options for fixing this in Firefox.

Completely changing how drag and drop works, like https://github.com/WordPress/gutenberg/pull/23497 is another option.