WordPress.org

WordPress Developer Blog

Drop Shadow updates in WordPress 6.5

Drop Shadow updates in WordPress 6.5

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.

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.

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.

6 responses to “Drop Shadow updates in WordPress 6.5”

  1. NICHOLAS AMOL GOMES Avatar

    Hi Great to see you worldpess article shadow block support

  2. Sam Brockway Avatar

    Great article – just a heads up the Table of Contents is not working on this article 💜

    (404)

  3. Mrinal Haque Avatar
    Mrinal Haque

    Playing with ‘shadow’ is a cool feature. I really like this feature and the smoothness of this article.

  4. Birgit Pauli-Haack Avatar

    Thank you, Sam. Nice catch on the borked ToC. It’s fixed now.

  5. KafleG Avatar

    A great feature is coming in every WordPress update. This is going to be a very cool feature. Excited for the release.

  6. David Degner Avatar

    This is the feature that I didn’t know I needed, but will help my portfolio site.

Leave a Reply

Your email address will not be published. Required fields are marked *