Shadows in Global Styles with WordPress 6.2

Shadows are an important part of a design – they help to establish a hierarchy of content and help bring focus to particular areas of a site. With WordPress 6.2 it is now possible to add and modify shadows to some blocks using Global Styles and theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML..

Use in theme.json

To apply a shadow using theme.json, you can add this to a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.’s definition:

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "2px 2px #000000"
        }
    }
}

Themes can also define preset shadows like this:

"settings": {
		"shadow": {
			"preset": [
				{
					"name": "Shadow Name",
					"slug": "slug",
					"shadow": "5px 5px 0px -2px #FFFFFF, 5px 5px #000000"
				}
			]
		}
}

If your theme provides a preset then the blocks can use it like this:

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "var(--wp--preset--shadow--slug)"
        }
    }
}

Use in Global Styles

Users can also modify these styles using the Global Styles UIUI User interface.

Navigate to Styles > Blocks > Button and you’ll see a Shadow option:

When you select the “Shadow” option you will be able to select from a variety of different shadow presets:

Note: This is currently only available on the Button block. There are plans to make it available for more blocks.

Props to @bph and @webcommsat for review .

#6-2, #dev-notes, #dev-notes-6-2