New presets for line height, padding, and margin

[oandregal]

Currently, themes can express their design choices for colors, gradients, and font sizes via presets, pre-defined sets of values users will see in the editor. In looking at the recently added style attributes (line-height, padding) and the ones that are coming next (margin) #22700 I was thinking about how themes can express their design choices for these properties, especially in line of the growing use of grid systems to power the design of sites by agencies and theme builders.

Should we expand the preset mechanism to line-height, padding, and margin? This will work exactly like colors and font-sizes work today:

• Themes will be able to declare a predefined set of values for them.
• These values will be used to populate the design tools in the editor.
• Users will still be able to use custom values, as they do for font-size & colors.

Tasks

• Padding Add preset for padding and use it in the UI controls #23176
• Line height Add preset for line-height and use it in the UI controls #23177

[oandregal]

By tying this with the work we're doing to be able to control the editor in a more fine-grained way, things like defining presets by the block will be possible. Theme authors will be enabled to do things like: make all font sizes available in the heading block, but only make the small & regular font-sizes available for a paragraph; the same for line-heights, and so on.

[oandregal]

cc @mtias @kjellr @jasmussen @ItsJonQ @youknowriad for thoughts.

[jasmussen]

Should we expand the preset mechanism to line-height & padding? This will work exactly like colors and font-sizes work today:

Yes, I think so. And even margin too. It also just so happens that Q is close to having great design tools available to handle these.

[oandregal]

And even margin too.

Yes! I've updated the issue to better reflect my thinking: that all style attributes should have a matching preset.

[ellatrix]

Is this a 5.5 must have?

[oandregal]

@ellatrix I was thinking that we should, yes. PR for line-height is ready and I hope to get it in for next Gutenberg version. There's a WIP PR for padding as well.

For context, this is the current summary of the state of the new style props to be added in 5.5: #23177 (comment)

[LuisSR]

I'm totally in for this.

It would be very useful if the custom presets output a class instead of inlined styles. This is the way font sizes or colors work and will enable theme authors to apply line-height, paddings and margins per media query, choose whether they prefer to use px, em or rem units, implement golden ratios, etcetera. It's far more flexible than a fixed px value.

Some default keywords can help to guide theme developers and to allow cross-theme compatibility. Maybe the ones already in use for font-size (small, normal, medium, large, huge)?

I was also thinking if this might apply to the spacer block.

[oandregal]

I've removed this ticket from the "5.5 must-have" project. In implementing this, some issues were raised in terms of design (ui complexity) & engineering (consolidate how we store style attributes in markup, etc) that need time to figure out, so they're best simmered.

[oandregal]

Going to close this one. After what Matías suggested at #23177 (comment) and conversations with Jorge, this no longer seems necessary. There may be better ways to do this (like block styles). We can always re-open later if it becomes relevant again.