Shadow: create / edit shadows in the global styles

[madhusudhand]

What problem does this address?

This is a sub task of #44651

With current implementation (in #44651), plugin gives four preset shadows and user can add more presets using theme.json and they appear in the global styles and site editor.

As a next step, add ability to edit or to create a shadow from the editor.

What is your proposed solution?

Following is the suggested design.

custom.shadow.mp4

Find more discussion related to this here

[madhusudhand]

@jasmussen @richtabor I have following thoughts on the editing experience for the shadows.

Current state:
Shadows are available in global styles and block settings and both use a common UI component to show the list of core presets and theme presets.

From the conversation here, the new UI should have options to create or edit a shadow, but it is not clear where this new UI belong.

Are you suggesting to make the same panel (as above) editable, or make it a separate component?
I am thinking better place for it would be in the global style settings as follows. My thoughts are based on color palette editing / creation experience.

Please share your thoughts.

[jasmussen]

I think @jameskoster or @SaxonF may have had a hand in some of those more recent shadow design tools (which look promising!) so I'd appreciate their input.

That said, I don't see global styles having a top level item called Shadows. There may be an aditional space for the increasing amount of controls that don't fit in Typography, Colors, and Layout. But how to structure that may be best informed by #47369.

[jameskoster]

I could potentially see an 'Effects' section where you're able to manage shadows, filters, duotone, and similar styles. Though I would agree that preset management in global styles needs some general design attention.

[jasmussen]

I think "Effects" was recently suggested by @richtabor for something similar, but not sure if that's the right word either. Worst case, could be Shadow & Border to match the panel.

[madhusudhand]

Created #60706 to explore the ideas around shadows editing experience. It is inspired from color palette and addresses the following.

1. Categorizes default, theme and custom shadows
2. default and theme shadows are editable, but their names cannot be changed (should they?)
3. New shadows cannot be added under default or theme shadows.
4. Only custom section allows to shadows to be added and edited.

Following is the initial UI

Editing experience of default/theme shadows.

Editing experience of custom shadows.

Problems / Questions

Since a shadow can be a combination of individual shadow strings (ex: value for default preset outlined has two shadow strings 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1) together becomes final shadow),
editor should have an option to add multiple shadows within a shadow.

Should this panel have tab layout within, each tab for one sub shadow?

I am sure it is not the best ideas and not implemented in the draft PR. It picks, only the first part of the shadow for now.

Also, this initial exploration doesn't include a color picker for the shadow.

@WordPress/gutenberg-design @richtabor Please suggest UI for the complete workflow.

[jameskoster]

Nice work so far, it's exciting to see progress on this.

The thing that stands out most here is the preview UI, this one:

Both in the block inspector, and in global styles, it doesn't work very well imo. In the block editing context, you can see a better, more accurate preview on the canvas, and in global styles they are not interactive, so we could go ahead and show the itemgroup UI, this one:

editor should have an option to add multiple shadows within a shadow

For this feature to scale, and for us not to have to redesign it in the near-term, this detail feels important to me. Here's a mockup of how adding / editing a custom shadow could work:

custom.shadow.mp4

Figma prototype to click through.

• Clicking the + instantly creates a shadow
• Clicking the shadow drills down to the edit interface (similar to editing Elements in the Typography panel)
• Itemgroup in the drilldown lists all shadows
  • Initial shadow cannot be deleted
  • Clicking a shadow opens details in a popover
  • Additional shadows can be added by clicking the +
• Ellipsis menu allows you to rename, duplicate, or delete the shadow

What do y'all think?

---

A couple of small details I noticed in the PR:

• Missing a 'Reset shadows' action for theme/system shadows
• 'Done' button is mis-aligned with title.
• Remove buttons do not work
• System shadows should not be remove-able
• There's a double-stroke between buttons in itemgroup

[madhusudhand]

@jameskoster Thanks for the designs. They look great and addressing all the issues.

I have a question on color selection. How would you propose the color selection in the following design?

I assume it would be the similar experience such as text color selection panel. Can you confirm?

A couple of small details I noticed in the PR:
Missing a 'Reset shadows' action for theme/system shadows
'Done' button is mis-aligned with title.
Remove buttons do not work
System shadows should not be remove-able
There's a double-stroke between buttons in itemgroup

Sorry that I did not give attention to the detailed styles in the first iteration as I was aiming to bring up something quickly. These issues should be addressed along with the proposed designs.

[jameskoster]

I assume it would be the similar experience such as text color selection panel. Can you confirm?

That's correct, yes. The UI should be the same :)

[jameskoster]

A potential alternative popover design;

• Drop shadow / Inset shadow option now a segmented control for single-click switching.
• Added a light-source control for manipulating X and Y position together.

[madhusudhand]

@jameskoster New design looks great. I have taken part of it in the first iteration.
Could you please review the latest changes from here #60706.
Also, posted few questions in the PR, please advise on the same.