Global Styles: Add textShadow style support #73320
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
commented
Nov 15, 2025
Comment on lines
+13
to
+14
| // Reset the text shadow from the global styles. | ||
| text-shadow: none; |
Contributor
Author
There was a problem hiding this comment.
I wasn't sure whether to add this, but if we don't reset the shadow, the placeholder is very hard to see.
t-hamano
added
[Type] Enhancement
|
Size Change: +29 B (0%) Total Size: 2.49 MB
ℹ️ View Unchanged
|
t-hamano
requested review from
ajitbohra,
ellatrix,
fabiankaegy,
juanmaguitar and
tellthemachines
as code owners
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
I tested this PR locally and the textShadow global style seems to work as described. Test setup:
Results: – In the post editor, the heading block correctly receives the global – The paragraph block uses the block-level override from – Links inside the paragraph show the shadow normally, and on hover the shadow is removed as expected thanks to – When I insert a new Paragraph block and leave it empty, the placeholder text (“Type / to choose a block”) does not inherit – On the front end, the same textShadow behavior matches what I see in the editor (headings, paragraphs and links all Overall, from a theme author’s perspective, the behavior looks consistent and the feature works well in my tests. 
|
Contributor
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Thanks for all the work on this @t-hamano 👍
This might just be me but splitting up the changes for the block support here, makes it much harder to actually confirm that all the places required have been updated.
Reviewing the changes as they are currently though there are a couple of minor issues:
- Need to update: docs/reference-guides/theme-json-reference/styles-versions.md
- Text shadow should be added to the
VALID_SETTINGSin the theme.json class too - Needs to update docs/reference-guides/theme-json-reference/theme-json-living.md for settings after update above
- Once setting for text shadow has been added we also need a default setting value in
lib/theme.json - Also, it looks like the style engine's PHP typography config hasn't been updated here or in #71419
Contributor
Author
|
@aaronrobertshaw Thanks for the review!
This is the main reason why I split the tasks. Also, since this PR is solely focused on style, I purposely left out the settings. That said, if addressing everything at once is easier, I'm happy to prioritize #71419 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
text-shadowoption support in Typography Panel #71419What?
This PR allows
text-shadowCSS styles to be defined in theme.json.Why? How?
Looking at #47904, the Text Shadow support seems to be a feature requested by many users.
However, to fully implement this, we need to discuss the following at least:
This PR is the first small feature improvement, allowing us to simply define
text-shadowunder thestyles.typography.Testing Instructions
For example, use a theme.json like the one below and make sure it works correctly in all scenarios:
{ "$schema": "../../schemas/json/theme.json", "version": 3, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" } }, "styles": { "typography": { "textShadow": "1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;" }, "blocks": { "core/paragraph": { "typography": { "textShadow": "1px 1px 2px red, 0 0 1em red, 0 0 0.2em red;" } } }, "elements": { "link": { ":hover": { "typography": { "textShadow": "none" } } } } } }Screenshots or screencast