Add property editor to handle spacing, padding etc.

[bjarnef]

With block list editor clients sometimes want to adjust padding, margin etc.
We can of course use a numeric or decimal input, but sometimes top/bottom and left/right needs to be different.

I noticed in the Wordpress block list editor they have an setting to e.g. set 10 for all or adjust the values for top, bottom, left and right.
https://wptavern.com/gutenberg-11-3-introduces-dimensions-panel-adds-button-padding-support-and-speeds-up-the-inserter

Another thing is that sometimes we may want to set a numeric value, but configurate the unit, e.g. px or rem in a dropdown next to it?

Could this maybe be configurable with key/name (e.g. px/PX, rem/REM), but also re-used for other stuff, e.g. a text input with a dropdown which could be a suffix? ... or maybe as prefix with country code in a phone number property editor?

Maybe even as a social media picker? Facebook, Twitter, etc. in prefix and URL as value. Then you could set an icon in frontend based on this value. Currently we often use a repeatable textstring to list social media (and parse the URL) or use separate properties... but Nested Content or Block List editor could also be used. However I find the first two approaches simpler and sufficient for most projects 😁

[leekelleher]

@bjarnef I like the suggestion. 💯 The padding/margin settings would definitely be useful.

I could see a few editors coming out of this idea. As you say a textbox with dropdown, (something I'd considered a while ago). It could potentially be something like the Tuple editor I dev'd for Umbraco v7, (there's a demo of Tuple at Umbraco Virtual in 2018. Similar with a Social Links picker editor, (see #8).

On a slight (but related) tangent, I wonder what Contentment should be, and whether it's the right place for small ad-hoc property-editors? I've started a topic called Too many property-editors? #190. I'd be interested in your thoughts on this.

[bjarnef]

@leekelleher thanks for sharing. The social links property looks cool and now we can use SVG icons in core it would be easier to customize without including loads of font icons. Maybe an option to set icon and color theme? But could also be used for other stuff, e.g. we neeed to show some contact details: phone (icon + text), email (icon + text), fax? (icon + text) .. not sure about the latter one though 😅

I agree we should include a bunch of property editors, so it should be something which is valuable to content editors or something that can be re-used in UI.