Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve treatment of custom values in Gutenberg form fields #35558

Open
kjellr opened this issue Oct 12, 2021 · 4 comments
Open

Improve treatment of custom values in Gutenberg form fields #35558

kjellr opened this issue Oct 12, 2021 · 4 comments
Labels
[Feature] UI Components Impacts or related to the UI component system Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.

Comments

@kjellr
Copy link
Contributor

kjellr commented Oct 12, 2021

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:

Screen Shot 2021-10-12 at 11 49 12 AM


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?

@kjellr kjellr added [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. [Feature] UI Components Impacts or related to the UI component system labels Oct 12, 2021
@javierarce
Copy link
Contributor

javierarce commented Oct 14, 2021

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.

image

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
Copy link
Contributor Author

kjellr commented Oct 14, 2021

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
Copy link
Contributor

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 "*".

image

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

image

@kjellr
Copy link
Contributor Author

kjellr commented Nov 18, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system Needs Design Needs design efforts. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants