Global Styles sidebar: allow reseting the value of the line-height provided by the user

[oandregal]

We're adding the theme's value coming from theme.json to the UI controls at #34178

In the post editor, the user can reset the line-height value by clearing the field. In the site editor (global styles panel) the user can't do the same unless it resets all the values.

[oandregal]

FYI @aaronrobertshaw @ramonjd

[aaronrobertshaw]

Thanks @nosolosw for the ping 👍

I haven't had the chance to review the code in #34178 closely yet but hope to do so soon.

To clarify, I believe the issue with resetting the line-height control is only within the Global Styles. In the block editor, simply clearing the field leaves the theme.json as the field's placeholder.

Steps to replicate.

1. Update your theme.json to set a custom line-height for paragraphs
2. Open the site editor and its Global Styles sidebar
3. Switch to the By Block Type tab and expand the paragraph panel
4. Note that your custom theme.json line-height will be displayed
5. Clear the field and note that unless resetting all global styles or manually editing the field, there is no means to return the field's value back to the one set in theme.json.

Possible options

1. We could update the line-height control to provide a reset button, when in the Global Styles context, that on click will reset to the theme's value.

2. If typography tools get switched to the ToolsPanel as in: Typography: Switch to ToolsPanel for block support UI #33744, the current reset behaviour of deselecting a control from the panel's menu would provide the opportunity to reset the control back to the theme's value.

   The ToolsPanel's reset behaviour is under review so might be ruled out

Global Styles

Screen.Recording.2021-08-24.at.10.17.00.pm.mp4

Block Editor

Screen.Recording.2021-08-24.at.10.13.18.pm.mp4

[oandregal]

Thanks for the clarification, Aaron! I've clarified the issue title & description accordingly.

[jasmussen]

I think the tools panel (#34257) could be the right place to provide an option to reset after all. I'm happy to have tried the current approach, but that keeps being the point of feedback that comes back to us, notably that if a control is shown by default on a block, it's not quite as clear that unchecking it is both resetting and hiding. To pair with one of the suggestions for tweaked behavior, it would be worth revisiting this one. In that behavior, default tools cannot be removed/hidden, so we could consider changing the icon from a checkmark to something else, indicating it clears.

I have a bit on my plate, but have put it on my todo to mock this up unless someone else gets to it first.

[mtias]

This should be absorbed entirely by #34345

[annezazu]

Wanted to note the current behavior in 5.9 since it's been some time since this was opened. It's strange to me that the two following experiences are so different.

Styles > Post Title Block

If you clear out the field entirely, the field resets to the original value. This helps protect against the issue originally described here but prevents me from doing something simple: erase the current value and add in my own custom value. If this is a bug (seems like it might be), I'll open a separate issue.

line.height.mov

Styles > Paragraph Block

I can see that the paragraph line height works as expected:

line.height.mov

[oandregal]

This is fixed.