Resizable Box: Avoid paint on resizable-box handles

[corentin-gautier]

What?

Avoid browser paint on resizable box handles animation

Why?

There's paint triggered when animating the resizable-box handle

How?

A simple will-change: transform avoids the repaint

Testing Instructions

1. Open the dev console and enable the paint flashing (under rendering)
2. Hover over a resizable block handle (image block for exemple)
3. There shouldn't be paint on the handle

Screenshots

Before

Screen.Recording.2022-11-30.at.15.15.29.mov

After

Screen.Recording.2022-11-30.at.16.04.42.mov

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @corentin-gautier! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[aaronrobertshaw]

Nice tweak @corentin-gautier 👍

This tests as advertised for me:

✅ Additional paint as avoided when applying this PR's changes
✅ ResizableBox component continues to look and function as per trunk in Storybook
✅ ResizableBox continues to function as before in the editor e.g. on Cover block

Before we merge this, we'll need a quick changelog entry given it touches the components package.

Example changelog diff

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 00c1aea07e..7a0d390654 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,7 @@
 -   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
 -   `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)).
 -   `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)).
+-   `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196))
 
 ### Experimental
 

[corentin-gautier]

@aaronrobertshaw I added the changelog entry 👍