Improve treatment of custom values in Gutenberg form fields

[kjellr]

theme.json and block markup can accept a wide range of values that can't (and probably shouldn't appear in the Gutenberg UI. For example:

• CSS variables
• calc()
• clamp()
• min()
• max()
• minmax()
• etc.

All of these are valid block markup. When they are used, Gutenberg currently just shows an empty form field in the UI. For example, here's some sample markup that uses a max() value for padding:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"max(1.25rem, 5vw)","right":"max(1.25rem, 5vw)","bottom":"max(1.25rem, 5vw)","left":"max(1.25rem, 5vw)"}}},"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-group has-background-color has-foreground-background-color has-text-color has-background" style="padding-top:max(1.25rem, 5vw);padding-right:max(1.25rem, 5vw);padding-bottom:max(1.25rem, 5vw);padding-left:max(1.25rem, 5vw)"><!-- wp:paragraph -->
<p>Hello</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Result:

---

We don't want to display these exact CSS calculations, since that'll be too complicated for the user. But we also shouldn't show a blank form field, since the user doesn't know that there's actually a value there. Is there something else we can display in cases like this?

[javierarce]

Here's an idea. We could indicate that all or some of the values are being calculated dynamically showing a message and replacing the calculated field with a button.

• Clicking the button would reveal the empty field.
• Instead of a label that could be too long in some languages, we could use an icon (I used the asterisk one in my example)
• The message could also link to a document giving more information about dynamic values.

Some questions:

• Would it make sense to show the dynamic value? Maybe in a tooltip?
• If the user sets a value manually, could we give the option to revert it to its original calculated value?

Figma file

[kjellr]

Yeah, I think this makes sense. I'm not sure of the label here — "dynamic" doesn't seem specific enough, and "*" feels maybe a little vague. Maybe "custom"? 🤔

Would it make sense to show the dynamic value? Maybe in a tooltip?

In general, no — I think these values would confuse more users.

If the user sets a value manually, could we give the option to revert it to its original calculated value?

Yes, I think so. Some sort of "revert" would be great. I'm not sure if this is possible though, since the value might just come from a pasted-in block pattern. In that case, I'm not sure we'd actually be saving it anywhere.

[shaunandrews]

Maybe this could be simpler, and not treated so importantly. For these "dynamic" values, I think we could just dim the text color and update the unit to the "*".

Then we could use a tooltip to explain the "*" unit when hovered:

[kjellr]

I like that, @shaunandrews! Instead of "This value is calculated automatically", maybe something like "This is a custom dynamic value" or something like that?

Either way, that's a small detail that I think we can refine — I'd love to see a PR to try this out.