Changing gutter size to 1-4 px

Hi @alexandrarosu,

I’m using utility classes to add those styles (so that we’re keeping the markup clean and simple). The downside is that it’s difficult to add utility classes for every pixel.

If you set the gutters to 5, then add this gist of CSS to your Customizer > Appearance > Additional CSS panel, you’ll have 4px gutters.

You can manipulate the values to what fits your need. The thing to remember is that the 100% + X value should be twice the negative integer above it. For example, in that gist, I have -2px and 4px (which makes the gutter 4px).

That should help!

Have you considered adding inline styles for the gutters? Then you don’t have to add a utility class for every conceivable usecase, just let the user select a gutter width using RangeControl, or even just type it in using a TextControl field. Then conditionally load the selection in as a pixel value in a style attribute in the JSX.

Possibly a better UI would be to have a Toggle control that turned on a Custom Gutter Width option in the Settings Panel, and use this Toggle to both turn on the setting in the Inspector, and conditionally add the style attribute in the block’s JSX.