Structure remains the same: Border & Shadow → Block name, click the plus to add a shadow, the default preset gets added by default.I would imagine we could start with a preset-first design: What do you think?īased on explorations, I have some new concepts to share, that should hopefully be simpler for the first version. We should probably start with 1, as 2 has some compounding effects. This would let the "Layout" section continue to exist for things like Group, which have a Layout panel, but it would also make the Layout section not become a junk drawer for things that don't fit in color or typography. Change Global Styles so that it gets a new "Border & Shadows" section, as well as a "Dimensions" section, to match the panels present for each block.Accept that Global Styles has a trio of Typography, Color, and Layout, and put "Shadows" under Layout.But there's no counterpart in Global Styles for Dimensions and Border - those are put inside "Layout" instead.Īnd so I'm not sure we should add a new "Shadows" in Global Styles. For both Typography and Color, these two blocks (Buttons, Image) have panel counterparts. Layout includes various values - margin and block spacing for Buttons, and border and border radius for Image. Right now you have Typography, Colors, Layout. Working on this mockup made me realize a shortcoming of our current global styles. There should be a new section under global styles, Styles -> Shadows (similar to editing the color palette) where they can be edited. Let me return here with some new mockups! But I'll need to think about how to best surface multiple stacked shadows in the panel when applying a preset. I don't think we should make a read-only preset, they should all be editable. When a preset is clicked, it ads a single row (just like custom shadow), but it remains read-only There would be Default Shadows (defined in Gutenberg) and Theme Shadows (defined in theme.json)Ī theme should be able to define them in theme.json as follows. I would like to imagine shadow presets to behave similar to colors. We might need a different angle component, one that's more of a map/grid, for this to work □ For example it hits me that it might not be possible to represent all box-shadow configurations with this setup, as the angle+depth components assume that the X and Y values will always be the same. Thank you! If it becomes a headache, don't spend too much time on it, we can start simpler if need be. I like this idea and I would like to believe, a formula should transform these values to X,Y (apply in CSS) and also reverse transform them without issues. Shadow: create / edit shadows in the global styles #57100.Shadow: enable shadow for more blocks #57103.Shadow: add shadow in block settings (site editor) #57101.Shadow: Add shadow presets and UI tools in global styles #46502.
Add box shadow support to blocks (using code editor for now).Shadow: add shadow presets support via theme.json #46813.add box-shadow support for blocks via theme.json #41972.Each instance appears in its own row, and on-click reveals the individual property controls in a popover. When a custom shadow is used, it's possible to add more shadows, IE create box-shadow:. The unlink button will detach the shadow properties from the preset and enable customisations.The – button will remove the shadow altogether.Clicking the row will toggle the visibility of the options popover. The selected option appears as a row in the Shadow panel. The + button adds a shadow and opens a popover containing the preset options. 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. Including horizontal, vertical, blur, spread, and colour. Something like the 'Customize shadows' section on the left in this link: ( ) What is your proposed solution?Īdding 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. 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. Similar to padding, margin, typography, etc. 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.