Add more resizing handles

[swissspidy]

To do

• Consolidate styling for resizing handles (currently split across 2 files)
• Fix styling for resizing handles (some look different on hover)
• Change block position when dragging from top or left (side or corner)
• E2E Tests

Fixes #2985.

[swissspidy]

Current WIP screenshots:

[swissspidy]

@miina I think this is a good opportunity to extract the onResize callbacks into a bunch of smaller helper functions. Those are currently quite large. Thoughts?

[miina]

I think this is a good opportunity to extract the onResize callbacks into a bunch of smaller helper functions. Those are currently quite large.

Sounds good to me! It is getting quite large, especially when we'll add more calculations for additional handles.

By "Rotation handles" in the title, do you mean "resizing handles"? Or is the plan to add more rotation handles as well?

[swissspidy]

By "Rotation handles" in the title, do you mean "resizing handles"? Or is the plan to add more rotation handles as well?

Imagine additional rotation handles at every blue dot 😄 Yes, I meant resizing handles.

[swissspidy]

Change block position when dragging from top or left (side or corner)

@miina In case you wanna tackle this one, that would be greatly appreciated 😄 It would probably take me way longer to dig through the logic there.

[miina]

I can try 😄

[miina]

Note:
Would be good to get #2863 merged first since it reduces the complexity with Text block by removing the area added for dragging only.

[swissspidy]

Alright! That one's on my list for reviewing today anyway 🙂

[googlebot]

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

[miina]

@googlebot I consent.

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[miina]

The corners are working OK now as well, however, now there's a bug with the block still continuing to change the position when moving the mouse even when it's not resizing anymore due to the minimum size limit.

Looking into this now.

[miina]

The issue mentioned above is fixed now as well, will add e2e tests and should be done.

Actually, will check also if this can be fixed:

amp-wp/assets/src/stories-editor/components/resizable-box/index.js

Lines 214 to 219 in cc10a5d

	// @todo Figure out why calculating the new top / left position doesn't work in case of small height value.
	// @todo Remove this temporary fix.
	if ( appliedHeight < 60 ) {
	diff.left = diff.left / ( 60 / appliedHeight );
	diff.right = diff.right / ( 60 / appliedHeight );
	}

^ It's a bit more noticeable now with the corner handles. If it seems to remain a mystery then will create a separate issue for it.

[miina]

Just for information that dragging from the resizing handles seems to work as expected in e2e tests, started adding those, will finish tomorrow.

[miina]

E2e tests are added now. The resizing part should be ready for testing/reviewing.

[swissspidy]

@miina Please review this when you get a chance 🙂
It affects #2992 a bit, so would be nice if this one's in before that.

[swissspidy]

Ah, will need to fix the merge conflict first. Doing that tomorrow.

And for #2992 I'll just rebase it on this branch. That seems to work fine.

[miina]

Thanks for fixing the tests folder name, too.