Shadow: Add UI tools to set custom shadow to a block

[madhusudhand]

What?

** Work in progress: do not review the code yet! **.
Creating this PR to gain some early design feedback.

This add the necessary UI tooling to add, edit shadow of a block in global styles.
To be able to test the support is enabled for the Button block only.

NOTE: A preview component is introduced to view the shadow changes in live action. This component doesn't render actual block (such as button) yet. It is just a rectangle with global styles applied. It will be replaced with the implementation of #42919

Testing Instructions

1. Activate a block theme such as archeo.
2. Go to global styles -> Blocks -> Button -> Shadows
3. Click Add new shadow
4. Expand newly added shadow and try setting the values and view the preview.
5. It is possible to add/delete multiple shadows
6. Save the changes
7. View the buttons on the frontend with given shadow settings.

Screenshots or screencast

Issues

Related issues: #44651

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[jasmussen]

Looks good! Despite activating Archeo, and checking out the PR I wasn't able to see the Shadow property. Nice work though.

Two parts to this, 1 is the addition of the inline preview, #42919. Can this be built in a way so that it works for every block?

The other thing is that the shadow controls themselves need some design. I'll put on my todo list to take a stab at this, but I would imagine they use an itemgroup in the inspector, and actual shadow customization happens in a flyout, just like colors.

Because the latter is likely going to be a bit of work on its own, I wonder if it might make sene to extract the preview parts in a separate PR so that it can land sooner?

[beafialho]

Nice work @madhusudhand! I think the customisation controls are great. A few questions:

• What does the "inset" toggle do? Might be ok to remove the "?" there.
• Would it be possible to be able to define the hover states of these buttons as well?

[madhusudhand]

@jasmussen thanks for the feedback.

checking out the PR I wasn't able to see the Shadow property

Currently shadow is enable only for the button block. Did you try building this code. I will have a check if there are any issues.

The other thing is that the shadow controls themselves need some design. I'll put on my todo list to take a stab at this

Thanks. This is created quickly using the available controls to test and to give a broader picture of functionality in action. UI will adopt the final designs later.

wonder if it might make sene to extract the preview parts in a separate PR so that it can land sooner?

That makes sense. I will be extracting the code to separate PR.

[madhusudhand]

@beafialho

What does the "inset" toggle do?

It describes if the shadow is inner or outer.

without inset (outer shadow)	with inset (inner shadow)

Would it be possible to be able to define the hover states of these buttons as well?

Yes, all the states can have specific shadows. However, in the first iteration only default state is considered. I will create an issue to take care of the states.

[jasmussen]

I did build the code, but it's possible my env. was acting up. I can try again.

[beafialho]

It describes if the shadow is inner or outer.

Oh, I see! We should also have a way to define an outline shadow.

[scruffian]

This is amazing work, thank you. I wonder if it would make more sense to offer a set of defaults to begin with?

[jasmussen]

Hey @madhusudhand, I got the PR working, nice work! Here's a GIF showing drilling into the Button block, and adding and configuring a shadow:

Excellent work. A couple of quick notes:

• The preview at the top is crucial. I'm happy to see you're already on top of potentially expanding that to the other blocks (Global Styles: display inline preview on per-block settings #42919).
• The accordion for each shadow work, but can we use an ItemGroup like color and gradients instead? That would afford showing the controls in a flyout instead of inline in the inspector.
• This PR shows how shadows can exist in Global Styles, but I imagine we'd want to eventually surface these styles in the post editor as well, so shadows can be added or configured on a per-post basis.

Based on this PR and the above questions, I added some fresh mockups in this issue. The following is the relevant part, and is inspired by this PR and flow:

• Shadows are stacked in an ItemGroup instead of accordions
• Shadows are configured in a flyout, like Colors
• For the first mockup, I used an angle picker and a "depth" slider instead of X/Y positions, but would love feedback
• Because we need a place to put this, ideally without creating an entirely new panel, I imagined that we could rename the Border panel to "Border & Shadow". I don't love that name, and I don't think we need to solve this immediately, but it's something that would be good to think about, in terms of the relationship between local and global changes and structure.

What do you think?

[madhusudhand]

@jasmussen Thanks for the inputs. This looks great. I will update the layouts.
I have shared further thoughts on presets here

CC: @scruffian