Group: Add support for shadows

[noisysocks]

While creating a block theme yesterday I hit a wall when trying to add a drop shadow to my header. I was surprised to learn that you can't currently set a Shadow on Group, Row, Stack or Grid blocks.

I searched around and can see that Group was an item in #57103 but it was left out of #57982 as it needed more testing. Not sure if there's been any update since then? cc. @madhusudhand @vcanales

[madhusudhand]

One of the common issue with shadows for group block is overlaps. Shadow of a first group block is hidden behind the following group block due to stacking.

Steps:

1. Activate a theme such as Adventurer
2. Navigate to global styles and apply shadow to group block

Since the shadow is now available in global styles (since Gutenberg 18.5, WordPress 6.6), it becomes a more common issue if the support enabled for group block.
It is delayed until WordPress 6.7 which gives more time to observe the feedback and fix all issues.

[bgardner]

This morning, I was thinking about this and planned to create an issue. Thank you, @noisysocks, for addressing it first. While I understand there are some considerations when adding style support to the Group block, we need to work through them. The Group block is likely the most popular block for using the shadow style. For instance, if this support is implemented, I could remove three block styles from my Powder theme: https://github.com/bgardner/powder/blob/main/functions.php#L60-L64.

[andreawetzel]

I found this issue while trying to figure out how to add a shadow to a group. This would be a great feature to have for designing cards within a grid layout.

[ndiego]

One of the common issue with shadows for group block is overlaps. Shadow of a first group block is hidden behind the following group block due to stacking.

We definitely need to get this resolved for 6.7, as it's one of the first blocks you'd expect to be able to add shadow to.

If anyone wants to enable this manually in a theme for testing purposes, you can use the following code:

function addShadowSupport( settings, name ) {

	// Bail early if the block does not have supports.
	if ( ! settings?.supports ) {
		return settings;
	}

	// Only apply to Group blocks.
  	if ( name === 'core/group' ) {
		return Object.assign( {}, settings, {
			supports: Object.assign( settings.supports, {
				shadow: true,
			} ),
		} );
	}

	return settings;
}

wp.hooks.addFilter(
	'blocks.registerBlockType',
	'modify-block-supports/add-shadow-support',
	addShadowSupport,
);

[carolinan]

If the concern is that groups with shadows may need to have margins or padding applied automatically, I don't think we should do that, I think that styling needs to be up to the theme developer/designer/user.

Here is a screenshot of Twenty Twenty-Four with the "Deep" shadow applied to the group from the global styles.

Shadows are cut off by the block above or below

And here is a single post with a full width group, followed by a spacer block, and then two full width groups after eachother.

Deep:

Natural:

Nested

Here is a group with a background color, padding, and another group inside. Using the outline shadow, the background color between the block and the shadow is white, even if the parent group has a different background color set, but this may be a feature not a bug:

With negative margins

A wide group with padding, followed by a default width group that has a negative top margin.

[ndiego]

If the concern is that groups with shadows may need to have margins or padding applied automatically, I don't think we should do that, I think that styling needs to be up to the theme developer/designer/user.

I agree. Adding shadow can be a complex action. For edge cases, like two shadowed groups next to one another, it requires some understanding of CSS, much like negative margin does. I think this is fine and we should not be automatically applying any additional styling when a shadow is added. I have already added shadow manually in all my projects, and it works as expected.

I recommend we add shadow to Group as soon as possible and let folks experiment with it.