Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add format attribute to the palette's color property #68885

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

unscripted
Copy link
Member

What?

Enhances the JSON schema for WordPress theme.json to enable color swatches and the color picker functionality for hex values within JSON in VS Code.

This PR adds the format attribute to the palette's color property and sets color as the value.

Why?

This change improves the developer experience by visually displaying color values through swatches and enabling a color picker in VS Code. It simplifies working with color-related properties in theme.json and style variations, reducing errors and enhancing productivity.

How?

Updates the JSON schema to include the "format": "color" attribute to the palette's color property.

Testing Instructions

  1. Open a WordPress project in VS Code.
  2. Add or update a theme.json file with color-related settings (e.g., settings.color.palette).
  3. Verify that color swatches are displayed next to color values in VS Code.
  4. Ensure the color picker activates when editing color values.
  5. Confirm compatibility with various color formats, including:
    • Hex (#3858e9)
    • Hex with alpha (#3858e950)

Test theme.json

{
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#3858e9",
					"name": "Hex",
					"slug": "hex"
				},
				{
					"color": "#3858e950",
					"name": "Hex with Alpha",
					"slug": "hex-alpha"
				}
			]
		},
	}
}

Screenshots or screencast

Screenshot 2025-01-25 at 3 33 06 PM

Copy link

github-actions bot commented Jan 25, 2025

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.

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

Co-authored-by: unscripted <[email protected]>
Co-authored-by: carolinan <[email protected]>

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

@carolinan carolinan added [Type] Enhancement A suggestion for improvement. Developer Experience Ideas about improving block and theme developer experience labels Jan 27, 2025
@carolinan
Copy link
Contributor

Note to testers: you need to point the $schema in theme.json to the updated file.
"$schema": "../../plugins/gutenberg/schemas/json/theme.json", or similar.

I liked the experience of selecting the colors in theme.json in VSCode, but I wont pretend to understand how it works 😄 so this is not a code review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Developer Experience Ideas about improving block and theme developer experience [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants