What problem does this address?

So as of Gutenberg 14.1 and in the upcoming WordPress 6.1 release, there will be support added for themes to register box shadows for specific blocks within the theme.json file.

Similar to padding, margin, typography, etc. I feel like it would be beneficial to actually have a box shadow component either for importing from a package for custom blocks or supported in core blocks which would enable users to create the exact shadow effect they are looking for.

What is your proposed solution?

Adding a box-shadow component within one of the packages which can be imported for custom block development or supported in core blocks which would enable users to create the exact shadow effect they are looking for.

Something like the 'Customize shadows' section on the left in this link: (https://box-shadow.dev/)

Including horizontal, vertical, blur, spread, and colour.

I searched issues for 'box shadow' and 'box-shadow' and couldn't find anything on this, however, I know it might already be something being looked at, apologies if so.

Design

• Shadow panel is empty by default.
• Clicking + opens a menu where you can choose shadows from three categories:
  • Core presets ('Natural', 'Deep', 'Sharp', etc.)
  • User-generated presets from global styles (Shadow: create / edit shadows in the global styles #57100)
  • A custom shadow
• When a preset is added;
  • Clicking the row will re-open the menu so you can switch to a different preset
  • Clicking the – icon will remove the shadow
  • Clicking the unlink icon will detach the shadow properties, essentially switching from the preset to a custom shadow...
• When custom shadow(s) are added;
  • Clicking a row will open a popover where you can edit the associated shadow properties.
  • Clicking + will add a new shadow to the stack
  • Clicking ⋮ will allow you to save the custom shadow as a preset for future use

Tasks

• add box-shadow support for blocks via theme.json #41972
• Shadow: add shadow presets support via theme.json #46813
• Add box shadow support to blocks (using code editor for now). #46896
• Shadow: Add shadow presets and UI tools in global styles #46502
• Shadow: add shadow in block settings (site editor) #57101
• Shadow: enable shadow for more blocks #57103
• Shadow: create / edit shadows in the global styles #57100