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 theme.json support for style previews for theme authors #60478

Open
bgardner opened this issue Apr 4, 2024 · 11 comments
Open

Add theme.json support for style previews for theme authors #60478

bgardner opened this issue Apr 4, 2024 · 11 comments
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.

Comments

@bgardner
Copy link

bgardner commented Apr 4, 2024

What problem does this address?

Given #59514 and the conversation in #59444, I think we should allow theme authors to use theme.json to set specific colors that would be given priority over the fallbacks (text color) and (button color/link color). With the merged PR, my Powder theme will result in this, which is less than helpful.

image

What is your proposed solution?

Add support in theme.json for something like this:

{
	"settings": {
		"example": [
			{
				"colors": [ "#0a0a0a", "#6d28d9" ]
			}
		]
	}
}

cc: @richtabor @justintadlock @spencerfinnell

@bgardner bgardner added the [Type] Enhancement A suggestion for improvement. label Apr 4, 2024
@colorful-tones
Copy link
Member

colorful-tones commented Apr 4, 2024

I like the idea of this being a fallback. Perhaps now is an ideal time to propose a new entry in the theme.json for meta info.

{
	"meta": {
		"preview": [
			{
				"colors": [ "#0a0a0a", "#6d28d9" ]
			}
		]
	}
}

However, I hate to see this linger because of such a suggestion as I do think it is a critical piece to surfacing better theme previews.

@bgardner
Copy link
Author

bgardner commented Apr 4, 2024

@colorful-tones Worth noting that my proposal is not meant to be a fallback, rather priority #1. If it does not exist, fall back to what was added in #59514.

@colorful-tones colorful-tones added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Apr 4, 2024
@spencerfinnell
Copy link

Indeed, I think these definitions need to be used first to gain the benefit.

I think a list of colors that can be used where a palette is needed seems like a good starting point -- but some typography options could also be beneficial.

@justintadlock
Copy link
Contributor

➕ 💯

This has come up before a year or two ago on another ticket, so I'm happy to see it being resurfaced. My preview colors never look right without me rearranging my color scheme system in theme.json. While I'm in favor of #59514 as a slightly better fallback (for some use cases), giving us themers control over this is the ideal solution.

This also feels like some very low-hanging fruit that would improve the theme dev experience (and the user experience as a result).

@spencerfinnell
Copy link

This has come up before a year or two ago on another ticket

Previous discussions/attempt to automatically derive a palette in #38918

@t-hamano t-hamano added the [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. label Apr 5, 2024
@richtabor
Copy link
Member

richtabor commented Apr 17, 2024

What about something like this?

It follows the existing format of color.palette and leaves room for future example keys, say for duotone, gradients, etc.

And it's similar to example in block.json.

...
"settings": {
    "example": {
        "color": {
            "palette": [
                "",
                ""
            ]
        }
    },
...

Would be great if the palette values could reference slugs, or leverage variables; not hard-coded color values.

@bgardner
Copy link
Author

@richtabor I would absolutely love this.

@bgardner
Copy link
Author

Since #59514 is now in Gutenberg, what are the chances someone can work on implementing this, per @richtabor, so we can start testing?

...
"settings": {
    "example": {
        "color": {
            "palette": [
                "",
                ""
            ]
        }
    },
...

@mikachan
Copy link
Member

It follows the existing format of color.palette and leaves room for future example keys, say for duotone, gradients, etc.
And it's similar to example in block.json.

I wasn't too familiar with example from block.json, but now having read the docs, I think using settings.example.color.palette would work great, plus it's inline with an existing property.

@bgardner
Copy link
Author

bgardner commented May 22, 2024

Wanted to follow up on this issue (given work done in #61327 and otherwise):

Not as terrible as my original screenshots above:

image

And this screen only shows one as well:

image

It would still be helpful for theme designers to choose, though.

@ndiego
Copy link
Member

ndiego commented Jun 4, 2024

...
"settings": {
    "example": {
        "color": {
            "palette": [
                "",
                ""
            ]
        }
    },
...

Yes, I completely agree with this approach. I was working on a custom theme over the weekend and was baffled by the color indicators. Providing theme authors a way to configure this manually would be a massive improvement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

8 participants