text-shadow option support in Typography Panel

[USERSATOSHI]

What?

Closes #47904

This PR adds text shadow support to the typography panel in the block editor.

Why?

Currently, the text-shadow CSS property is not directly editable for blocks from the Gutenberg typography panel, making it difficult to add shadow effects to text elements without custom CSS.

This PR aims to solve this by adding a Text Shadow control to the typography panel, allowing users to configure text shadows with full control over horizontal offset, vertical offset, blur radius, and shadow color.

This can be useful when users want to:

• Add drop shadows to headings for better readability over images
• Create glow effects for accent text
• Improve text contrast and visual hierarchy

How?

This PR addresses this issue by adding a TextShadowControl component to the Typography Panel. The implementation includes:

• A checkbox to enable/disable text shadow
• Range controls for horizontal offset (-20px to 20px)
• Range controls for vertical offset (-20px to 20px)
• Range controls for blur radius (0px to 20px)
• A color picker for shadow color with alpha support

Testing Instructions

1. Create a new post or page
2. Add a heading block or paragraph block
3. In the block settings sidebar, open the Typography panel
4. Look for the "Text shadow" control
5. Check the "Enable text shadow" checkbox
6. Adjust the horizontal offset, vertical offset, blur radius, and color
7. Verify the text shadow appears as expected
8. Uncheck and re-check the enable checkbox to verify previous settings are restored
9. Test with different colors including transparency
10. Save and view on frontend to confirm shadows render correctly

Screenshots or screencast

Screen.Recording.2025-08-29.at.11.50.09.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @HatlerRyan, @UltimateByte, @burnuser.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: HatlerRyan, UltimateByte, burnuser.

Co-authored-by: USERSATOSHI <[email protected]>
Co-authored-by: hanneslsm <[email protected]>
Co-authored-by: cbirdsong <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ryanwelcher <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[hanneslsm]

Thanks @USERSATOSHI for the PR!
My client was just asking for this feature, so maybe we can get it even into 6.9 :)

Reviewed it on Playground in Brave (Chromium). Reviewing as a designer, apologies if I use any technical terms wrong.

1. The Enable text shadow is not needed, because of the ToolsPanel
2. The color should come first. Let's use a default component here, including making it possible to select color presets
3. I would go with a Unit control instead of a range slider for the horizontal, vertical offset and blur. No need to limit to px only.
4. The reset is tricky because I think we do not have a common component for attributes like this yet. but currently it looks like custom made, which I do not recommend. Let's delete it instead, all attributes can be reset via the ToolsPanel'

Also, with the current implementation it's not possible to add multiple shadows, which I think would be a great enhancement. Let's start by enabling one first though.

[USERSATOSHI]

Hi, Seems like I won't be having bandwidth till Friday, so I will tackle this on 3 Oct if that's fine

[cbirdsong]

I would greatly prefer this use off-the-shelf presets similar to box-shadow: https://developer.wordpress.org/news/2023/01/using-the-box-shadow-feature-for-themes/

[aaronrobertshaw]

Thanks for all the hard work here @USERSATOSHI 💪

After taking this for a bit of a spin, there are a few things I'd like to flag.

1. For new block supports it is best to land them under a stable block support key. In other words, we're avoiding introducing new supports with the __experimental prefix
2. The Style Engine requires a definition for the text shadow support in its PHP config or it will not generate styles for dynamic blocks. Check out the text decoration support for and example to follow
3. The TextShadowControl UI probably needs some refinement before we can proceed here
   • The "enable text shadow" checkbox is probably overkill. If the control is being displayed via the ToolsPanel menu, that might be enough to determine a text shadow should be applied
   • The standard layout for Input and Slider combos in the sidebar is Input first.
   • The reset buttons on each Input/Slider combo is overkill, especially when the whole control can be reset via the ToolsPanel menu
   • There's a UX quirk where if you hit the reset button on all the text shadow inner controls you suddenly get the "enable text shadow" checkbox unchecked due to the empty text shadow value even though you're actively making changes to the shadow
4. I think I agree with Cory that for this block support it would be better to leverage shadow presets. I don't hold a strong opinion though as to whether it should share the same presets as the box shadow support or if it needs its own.

Also, I feel like we'd be best served by combining this and #73320 (cc/ @t-hamano) to make sure the block supports and global styles are all covered fully and interacting correctly.

[aaronrobertshaw]

In recent times, we've avoided landing more __experimental block supports. Once they are in a release they tend to get used and we have to provide backward compatibility anyway. It's easiest to just land new supports as stable.

Suggested change

	const TEXT_SHADOW_SUPPORT_KEY = 'typography.__experimentalTextShadow';
	const TEXT_SHADOW_SUPPORT_KEY = 'typography.textShadow';

[USERSATOSHI]

I’m closing this for now so we can focus on discussing the design and then break the work into smaller PRs.