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

[trynet]

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]

@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:

• Edit post
• Set Preferences > Appearance > Display button labels
• Add a two or three paragraphs
• Use the "Drag" feature to move the paragraphs around.

Here is a video.

TestingDragwtextlabels-Firefox.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]

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]

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

[gwwar]

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]

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]

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

[skorasaurus]

can confirm still an issue with Gutenberg 16.8.1 and firefox 118.0.2

[talldan]

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

[talldan]

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]

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 #23497 is another option.