What problem does this address?

We've introduced a number of new design tools to the Gutenberg interface. Many of these tools make sense for more seasoned users, especially those with a technical understanding of how websites are built.

For users that are new to website building, it would be beneficial to improve the amount of information we give them when using each individual tool. What does the tool do? Why would you use it? What changes will it make visually?

What is your proposed solution?

Some ways we can improve this:

• Fix the visualizer and get it working for margin and padding: BoxControlVisualizer: Create a new separate component, and fix existing issues #40057
• Add support for snap to grid with design tool adjustments #41491
• Add support for the visualizer to other design tools other than Margin and Padding (block gap, content width/height etc).
• Add more design tool explanation text and preview gifs #41818

Design Work

There's some existing design work in this Figma, that encompasses some of the points above: