Avoid paint on resizable-box handles (#46196)

corentin-gautier · Corentin Gautier · web-flow · commit c64b75189be3 · 2022-12-02T18:37:30.000+01:00
add changelog entry

Co-authored-by: Corentin Gautier &lt;corentin.gautier@consertotech.pro&gt;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -20,6 +20,7 @@
 -   `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)).
 -   `BorderControl`, `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#45985](https://github.com/WordPress/gutenberg/pull/45985)).
 -   `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
 
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
@@ -54,6 +54,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	right: calc(50% - 1px);
 	transition: transform 0.1s ease-in;
 	@include reduce-motion("transition");
+	will-change: transform;
 	opacity: 0;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M`
`54`	`54`	`right: calc(50% - 1px);`
`55`	`55`	`transition: transform 0.1s ease-in;`
`56`	`56`	`@include reduce-motion("transition");`
	`57`	`+ will-change: transform;`
`57`	`58`	`opacity: 0;`
`58`	`59`	`}`
`59`	`60`