Spacing visualizers not displaying accurately when adjusting margin/padding using spacing steps

[ndiego]

Description

In testing the Twenty Twenty-Three theme, I noticed that the margin and padding visualizers appear incorrectly or quite glitchy when adjusting spacing using the new spacing step functionality. Switching to manual sliders greatly improves the visualizers.

Step-by-step reproduction instructions

1. In Twenty Twenty-Three (or another theme that supports spacing steps) add a paragraph to the page.
2. Add margin and padding and adjust the spacing steps, notice the visualizers.
3. Switch to manual padding and margin and notice the visualizers look much more accurate.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.1 Beta
• Twenty Twenty-Three Theme
• Gutenberg 14.1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

@jasmussen and @glendaviesnz sorry for the ping, but I know you both have been working on step spacing and wanted to make sure you saw this. 🙏

[annezazu]

@talldan pinging you since you previously fixed #41823 and might have some context on these controls too!

[jasmussen]

I have noticed a little bit of lag, and some height calculation issues. And from your visual here, it looks like margin goes inwards instead of outwards.

[talldan]

I'm not sure about the calculation, as I haven't looked at that part of the code.

When I tested trunk it seems like there's another new regression that has been introduced:

Kapture.2022-09-27.at.12.55.04.mp4

This time in both the post and site editor.

edit: found a fix for this - #44484. AFAIK, it's only a gutenberg plugin bug, so not something that needs to be backported.

[talldan]

I've put together a fix in #44485, though I'm not seeing the exact same issues as in the screen cap.

[talldan]

Have merged that PR now which closed this, but let me know if there are any other issues you spot in testing.