Allow switching global styles variations #35619
Conversation
youknowriad
added
[Type] Technical Prototype
youknowriad
requested review from
mtias,
oandregal,
jasmussen and
jorgefilipecosta
|
Size Change: +4.67 kB (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
I've got a question and I presume it's related to this item 😇 Who provides the variations? The theme author via |
This is not defined yet, we have options: registration functions, multiple theme.json files in a theme... This is a POC to show what's possible but we should discuss how best to provide this. (If you want to test, you can fill manually or switch FSE themes and save changes and get back and apply on the previous theme) |
youknowriad
force-pushed
the
try/global-styles-variations
branch
from
d50c6ca to
9803006
Compare
|
This is now updated with "Preview Cards" for each global styles variation. |
|
I'm missing a little background here, sorry. What's a "global styles variation"? And what's the best way to test this PR? |
|
@jasmussen It's like a theme providing multiple theme.json and the user able to switch by clicking the card representing the global styles preview. Of course this is all very POC: the available variations are being fetched from the global styles CPT (so for instance if you edit global styles for a given theme, this variation can show up for another them, this is all very temporary, just a way to test quickly the concept) |
Tried it a few more. I like the idea, it resembles other popular things: block variations extended to the whole site, some plugins that provide a way to easily switch variations (WordPress.com EditingSiteToolkit), some themes that provide "design styles" (go), etc. The main thought I have at the moment is that I feel this should be tied to the theme. Showing user configs from other themes can be problematic (presets that are not defined, etc). |
|
This is a super rough POC but we should not tie it with the saved entities. Can we start by only reading from alternate |
Oh of course! Nice, I can see this working. We might want to enhance this with a hover style on the card, as well as a tooltip. |
|
And it should probably be a Navigator screen, too, where there is a bit more context. It'd allow to have things like dark/light schemes down the road. |
|
Just wanted to leave a note that this was something I was experimenting with our Go theme's set of design patterns, color palettes, and typography pairs. I see a lot of value in this kind of functionality and had a few thoughts.
I'll make an effort to stick around this conversation. This concept of "global style variations" is my favorite piece about our Go theme. |
|
Hi all, wanted to share a few possible variations for this UI that I was playing around with this week.
|
|
Hi all, I chatted with @kellychoffman yesterday about the above UI directions — specifically about how we could iterate on the first direction using the drill down panel navigation. Here’s a slightly updated version: GS-switch-UI.mov
Notes:
|
|
@critterverse I like this direction a lot, I'm focusing more on 5.9 items these days, but I'll come back to this PR quickly after to push it further. |
|
If I can be helpful with CSS'ing up some things, let me know in the moment, happy to help! |
|
Sounds good, thanks for the update @youknowriad 👍 |
|
Hi @critterverse , |
We’ve used the term “Design Styles” when we built Go (which has a similar concept of pre-defined styles). From what I recall, the term tested well on understandability. Just an idea in the pot :) |
youknowriad
force-pushed
the
try/global-styles-variations
branch
from
db7d205 to
f5aee3f
Compare
|
Thanks everyone for your help here. The initial version of this is in. Let's now iterate on design, code quality, documentation, testing... |
youknowriad
added
[Type] Feature
|
🎉 |
bph
added
the
Needs Dev Note
This is a POC for the moment, the idea is to explore a way for extenders to offer multiple global styles variations and the user would be able to pick up one of the variation for its site.
Right now, this just loads the save entities in the global styles CPT and allow the user to switch by clicking the global styles preview.
Missing from this POC: