Skip to content

Feat: Add theme.json support for textShadow - #77745

Closed
USERSATOSHI wants to merge 2 commits into
WordPress:trunkfrom
USERSATOSHI:try/add-text-shadow-in-theme-json
Closed

USERSATOSHI wants to merge 2 commits into
WordPress:trunkfrom
USERSATOSHI:try/add-text-shadow-in-theme-json

Conversation

@USERSATOSHI

Copy link
Copy Markdown
Contributor

What?

Part of #47904
Related with #71419

This PR adds theme.json support for the textShadow typography field.

It updates the schema, theme.json defaults, PHP theme.json processing, and the style engine so settings.typography.textShadow and styles.typography.textShadow are recognized and can generate text-shadow CSS.

Why?

The larger textShadow effort was split into smaller steps.

The first step is making theme.json understand the field end to end. Without this, themes cannot declare textShadow in theme.json, and Gutenberg cannot consistently validate and generate styles for it.

Landing the theme.json layer first reduces scope and gives us a stable base for the later UI work.

How?

This PR adds textShadow support in the theme.json pipeline by updating:

  • the theme.json schema to allow the setting and style field
  • default theme settings to expose settings.typography.textShadow
  • WP_Theme_JSON_Gutenberg metadata and allowlists so the field is accepted and mapped to the text-shadow CSS property
  • the style engine typography definitions so JS style generation includes textShadow
  • documentation and focused tests for the new field

Testing Instructions

  1. Start the local Gutenberg environment.
  2. Create a Test Theme.
  3. Add this theme.json:
{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"typography": {
			"textShadow": true
		}
	},
	"styles": {
		"elements": {
			"heading": {
				"typography": {
					"textShadow": "2px 2px 4px rgba(0,0,0,0.35)"
				}
			}
		},
		"blocks": {
			"core/paragraph": {
				"typography": {
					"textShadow": "1px 1px 0 #ff0000"
				}
			}
		}
	}
}
  1. Open a post or page.
  2. Insert a Heading block and a Paragraph block.
  3. Confirm the styles are applied in the editor.
  4. View the post on the frontend and confirm the styles are applied there as well.
  5. Inspect the rendered CSS and verify that text-shadow is generated from the theme.json values.

Screenshots or screencast

image image

Use of AI Tools

Github Copilot used to generate PR description and test examples.

@github-actions github-actions Bot added the [Package] Style Engine /packages/style-engine label Apr 28, 2026
@USERSATOSHI

Copy link
Copy Markdown
Contributor Author

Duplicate of #73320

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Style Engine /packages/style-engine

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant