A drop shadow is a great design element for various pieces of content, and combination of content. Theme developers were able to use this feature since WordPress 6.2, and there is a Developer Blog tutorial on adding shadow support for themes.
With WordPress 6.5, content creators and no-code site builders can rejoice, as they too can now apply shadows to their blocks. For now, this feature is enabled for four blocks: Button, Image, Columns, and Column.
This first version offers five options for the drop shadow. There are no color, angle, spread, or more blur settings available.
Table of Contents
How to use the shadow controls
You can find the Border & Shadow controls on the bottom end of the Styles Tab of the Block Sidebar.
Button with Drop Shadow
Below, you see an image and a quote in a two-column layout, both with drop shadows applies.
In the video below, see how I added the drop shadows. You also see my failed attempt to apply the shadow to the quote block, so I to accomplish a shadow for the quote I applied it to the single column. I had to fill the column with the white background first to make it work.
Shadow in theme.json
Theme developers can add custom presets for the shadow setting via theme.json and are not limited by the five styles offered in core.
"settings": {
"shadow": {
"presets": [
{
"name": "Red Shadow",
"shadow": "0px 5px 5px 0px red",
"slug": "red-shadow"
},
{
"name": "Purple Shadow",
"shadow": "0px 5px 5px 0px purple",
"slug": "purple-shadow"
}
]
},Shadow presets will also show up in the Drop Shadow UI together with the core presets. See the red and purple variations I added above 🙂
More details on how to add box shadow support to your theme is available in the Developer Blog article: Using the box shadow feature for themes.
Remove core presets
As with everything else in WordPress, some people would like to know how to remove the core presets, either individually or as a whole. All you need is one line in your theme.json file.
"shadow": {
"defaultPresets": false,
}There is always the route of filtering the default theme.json with this code snippet, which you can place in your theme’s functions.php:
add_filter( 'wp_theme_json_data_default', 'themeslug_theme_json_data_default' );
function themeslug_theme_json_data_default( $theme_json ) {
$data = [
'version' => 2,
'settings' => [
'shadow' => [
'presets' => []
]
]
];
return $theme_json->update_with( $data );
}
Shadows for Custom Blocks
Block developers can enable Shadow support for their blocks by adding “shadow”: true to the block.json of their blocks.
{
"supports": {
"shadow": true,
}
}This one line enables the user controls for the box shadow under the Border & Shadow section.
Drop Shadow for Featured Image
With the Gutenberg plugin version 18.0, scheduled to be released on March 27, 2024, you will also be able to apply a box shadow to featured images in your templates and enable some great 3D-like effects.
On Archive templates
On a single post or page template
What’s next for shadow support?
The current implementation is the first iteration. Contributors are working on expanding the feature to the Cover and Group blocks. The design team also explored how a more expanded feature set in the editor could look.
The screenshot shows color, x and y-axis offset, spread, and blur controls.
Shadow: Add UI tools to set custom shadow to a block is the draft PR.
That’s the current stage of Drop Shadow support for the Block editor.
Please don’t hesitate to share your feedback on the feature or the article in the comments. I would also be interested in knowing how you use it and what great designs you will release.
Props for review to @greenshadyand @ironnysh.
Leave a Reply