Allow dragging rotated blocks without selecting them

[swissspidy]

As a follow-up to #2014 and #1974, we should revisit allowing drag & drop of rotated blocks without the need to select them first.

This way, one can more easily position them on the right side of the screen.

[miina]

@swissspidy I'm thinking of picking this up soon, let me know if you already had a potential approach figured out for this. Couldn't find information about it from the previous issues at this moment so I'm assuming that not :)

[swissspidy]

@miina No potential approach in mind, but it might sense to first solve the issue of dragging blocks by clicking anywhere, without the block mover. Getting rid of the block mover (with IgnoreNestedEvents etc.) might affect rotation handling

[miina]

@swissspidy Is the requirement of being able to drag blocks by clicking anywhere logged somewhere? I remember that this was under discussion and the conclusion was that it didn't make sense since otherwise selecting text within a block, for example for making it italic/bold, or for copying etc., would be complicated. Additionally, the cursor style would be confusing -- should it hint clicking or dragging if both actions are available. Basically, the conclusion was that it could be quite confusing UX.

Let me know if there has been an alternative discussion out of GitHub meanwhile.

[miina]

How about being able to drag from any of the borders instead of anywhere? Like it is in Google Slides for example.

[miina]

Also, I'm thinking that perhaps we should keep the rotation while the block is selected -- especially now when the usage of Top Toolbar is enforced it shouldn't be an issue anymore, previously the settings buttons rotated as well and that was quite confusing, however, now that issue is removed. This would also be similar behavior to Google Slides, keeping the block rotated.

Leaving the block rotated gives a better preview of how it actually looks like and removes all the additional movement of a block + makes it much more straightforward to drag/rotate, etc. Thoughts?

cc @amedina @westonruter

[swissspidy]

Is the requirement of being able to drag blocks by clicking anywhere logged somewhere?

Yeah that was the intention, and yes I remember the discussion. I think the goal is to make it more similar to other apps like Instagram, where you can just drag anywhere, and if you want to select some text, you would first tap on it (i.e. select the block) and then perform the action.

This was also the feedback provided by Paul, and I remember @amedina created a card on the project board for it, but I cannot seem to find it anymore.

Also, I'm thinking that perhaps we should keep the rotation while the block is selected

No objections there. Removing the rotation there was more of a workaround for the status quo than anything else. Fixing this would also be relevant for #2211.

But let's hear the others before jumping straight into this :-)

[miina]

I think the goal is to make it more similar to other apps like Instagram, where you can just drag anywhere, and if you want to select some text, you would first tap on it (i.e. select the block) and then perform the action.

What would happen if the user would like to copy some text from a block (selecting part of the text), or selecting part of the Text to mark it italic/bold -- this would basically be impossible then and result in dragging instead? Not sure if hijacking the whole block area by dragging is the best way to go 🤷‍♀ Edit: Perhaps this would make sense in mobile only.

But let's hear the others before jumping straight into this :-)

Yep, agreed. I started looking into positioning the clone correctly when dragging a rotated block but that'll be required in any approach.

[miina]

@swissspidy We could actually implement the removal of the drag handle in a separate issue based on the future discussion, I'll open an issue for that (#2275), couldn't find it right now. Within this issue, we could just implement the tasks stated in the description -- dragging rotated blocks + not having to select a block.

I'll also look into #2181 to remove everything except for the drag handle already from the block, otherwise, it might be confusing if the currently existing arrows are rotated.

[swissspidy]

Testing instructions

1. Create multiple text blocks
2. Rotate the blocks and drag them around
3. Verify that rotation is not reset while dragging

[swissspidy]

Reopening because of issues with the resizing of rotated blocks.

Demo: https://cloudup.com/c_nacwQlmHq

Some issues with rotation:
(1) The grab handles for resizing don't work as expected when rotation happens.
(2) Moving a block outside of the page a bit doesn't work.

[swissspidy]

As for the resizing, we use Gutenberg's ResizableBox component which uses re-resizable under the hood and just sets some sensible defaults.

Perhaps we can somehow incorporate the rotation angle into the onResizeStart / onResize / onResizeStop callbacks.

Others projects like https://github.com/mockingbot/react-resizable-rotatable-draggable demonstrate that this should be possible.

[miina]

Instructions for testing:

• Add a few different block types.
• Make sure that resizing works properly while the blocks are rotated.

Note that there are two known issues:

• Dragging doesn't work right after resizing or rotating, the block needs to be selected again to drag. Fix dragging after resizing / rotation #2352.
• An image doesn't resize together with the resizing box while resizing, it only resizes once finished. Image doesn't resize while resizing #2357.

[csossi]

Verified in QA