search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.55k stars 4.22k forks source link

Shadow: create / edit shadows in the global styles #57100

Closed madhusudhand closed 6 months ago

madhusudhand commented 11 months ago

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.

https://github.com/WordPress/gutenberg/assets/846565/7aefcd92-5840-4452-9cf1-0a4f5b118671

Find more discussion related to this here

madhusudhand commented 9 months ago

@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.

image

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.

image image

Please share your thoughts.

jasmussen commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 7 months ago

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?

image

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 commented 7 months ago

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:

Screenshot 2024-04-15 at 15 15 51

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:

Screenshot 2024-04-15 at 15 17 53

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:

https://github.com/WordPress/gutenberg/assets/846565/7aefcd92-5840-4452-9cf1-0a4f5b118671

Figma prototype to click through.

What do y'all think?

A couple of small details I noticed in the PR:

madhusudhand commented 7 months ago

@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?

image

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

image

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 commented 7 months ago

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 commented 7 months ago

A potential alternative popover design;

Screenshot 2024-05-01 at 17 26 28
madhusudhand commented 7 months ago

@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.