Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Edit Site: Expose "global style" tools #19255
Potentially relevant, the "Site Block" (#16998) — if it can become intuitive to select the Site block itself, it makes sense to contextually open the global styles sidebar when that happens. Or possibly vice versa — highlight the site block when the global styles sidebar is open.
I have done some exploring around this. Thanks to @jasmussen and @ItsJonQ for the chats, files and researching on this as I dove into what could be here. Firstly, whatever we do here is a start, so it's important to get something out as a v1 then we can iterate. With that in mind, I focused on the foundations and whilst have some ideas for 'more' those sketches are going to come a little later as this builds up.
The starting functionality seemed to be agreed on to be:
Now, of course, we are going to build up from this, but starting from here is great. This exploration focuses on the sidebar and global style tools, not how you get to this screen or the actual full site editing itself. As noted, this is a plugin in the header.
The flow of this could be using the site block:
Any style applied is global (hence the name), this means you are changing throughout so whilst you only see what you are on content wise, being able to click through makes sense, therefore having this as able to be turned on anywhere in site edit is useful.
Before I dive in, I wanted to clarify the foundational nature of this does mean this is just a start, more to come once we're in a direction here.
I went into a fast mock-up phase where I began exploring what this could look like. For these examples, please note the styling has been removed to focus on the elements. Props to @mtias, @pablohoneyhoney, @jasmussen (and others), who worked on the interface iterations work as I brought in some ideas as I grew these mocks.
This design is pretty much aligned with what we have today. It's also the simplest implementation from a mental model view as expected.
Note though here I have added a few features such as information about 'good contrast' and there is an idea for 'share' to package up whatever styling is made and export.
A key behaviour here is the ability to reset per action and globally. This gives flexibility. However, we might want to on this page have the redo/undo showing and remove resets. A good point to discuss.
The second screen in this traditional sidebar mock shows what could be focusing in on different elements. I drew heavy inspiration from Illustrator here of moving in, zooming into the element and taking focus away from everything else on-page. The styles then come into the sidebar, potentially with a breadcrumb at the top to get back out, although clicking in/out will also give that behaviour.
This is just a suggestion but a way we could expand beyond in later versions and drill down into elements. A 'browse' all might also be great but that feels even more of a power user application.
Note, I added import here also as an option, what if people could import in styles or those they share? As I worked on this, I am not set where share/import goes as much as noting that on this screen. These are areas I would like to explore as we grow this.
The last 2 in traditional sidebar show it higher and wider, both options to explore beyond what we have today.
Whilst the sidebar does lend itself as a pattern we use today, the pop layer also could be an option. I did a little exploration into that just to see. If this was 'fixed on' we would need to add closing. There are some possible benefits to this:
However, the benefits also option to some negatives regarding what space we have, rapidly it could be just like a sidebar.
While I am very open to exploring this for the higher fidelity mocks I did stay with sidebar just because it's what we have today. I would love feedback if we just want to dive into a new pattern right now.
UI of today
There are explorations of next UI coming in, however, I did want to mock what we had today as then we can at least start shipping this feature.
V1 : literal
This version is literally using the elements we have today. There are 2 versions of different colour pickers.
These versions though for me showed 2 issues:
I began thinking about how this could be eased a little, which lead me to the next versions.
V2: new colour picker
I think this is an opportunity to iterate the colour picker and taking inspiration from the exploration work of advancing the interface as noted earlier, I came to the following (note this was in my sketch mocks as really works well).
I thought I could, however, distil even further...
V3: new colour picker and less reset
This removes the repeated word 'reset' and uses the undo/redo. As you are in a mode here, this could work.
I also brought in alignment here to show what that could look like, noting if we do include justified text we should have a note of why this isn't always a great option as a warning, like colour contrast.
A bonus even more distilled screen would be to remove accordions, whilst they are useful for multiple contents and what we have today, this screen could be freed from them.
Well, that was a lot! Thanks for staying with me on this comment as I know this is a lot to upload here but hopefully gives a start into how we can dive into this. I would like to get general feedback on:
From there, I will either iterate or come up with a final set of mocks and we can get this started to be created. After that, I plan to begin to explore beyond the foundational functionality, this is a feature needed now though so it's great to get something out we can then use, gather feedback on and iterate.
Loving the look of these - and looking forward to Global Styles coming to fruition.
I think this version looks so much cleaner - I imagine it relies on each section not having too many controls though?
@karmatosed Amazing job on these designs
It's very much inline with the global styles explorations I've been doing here:
And more recently here:
In terms of feedback...
@jordesign , I think that's a great observation. Since we're starting off simply (as I think we should), we need to have a design that can accommodate more controls. Especially if we want to support functionality like globally modifying styles for blocks (e.g. Button).
@karmatosed I feel like you've acknowledged that challenge when you mentioned:
Off the top of my head, I don't know of a design solution yet. But I'm very glad we're mindful of the potential need for this feature :)
The "Pop" version is actually very interesting. I almost want it to be draggable/moveable, similar to the experience you'd get from the Adobe products like Photoshop/Illustrator. The tricky part is that it introduces a new UX paradigm for controls. Not a bad thing, just something to be aware of.
On that note...
I wonder if perhaps the global style/site editor experience may need to look different? Not strikingly different, but different enough so the user is immediately aware they're now editing global/site things rather than post/page content.
The best example I can think of is Google Slides.
To master slide content editing:
Hope this helps!!!
Again, amazing job
With full-site editing, I imagine most themes will want to migrate from the customizer to these global styles.
Had an idea for showing theme suggestions for fonts and colors, while still allowing customization. I also tried adding a way to quickly switch between pages. Also, since this would be a section in the wp-admin sidebar (replacing the customizer) the Gutenberg top bar could do away with any need for an icon to toggle the sidebar — it would always display.
Thanks for all the great feedback on this.
@jordesign whilst yes the accordions removed seems minimal, I think it could scale if we use spacing and contextual, where you go into each component. I also think we need to limit how many options by default there are. That's a conversation though to find the balance on.
@ItsJonQ I am nodding as yes the 'where' for this panel really needs some wider exploration. That's high on my list of next steps (more to come on those).
@aristath I do think it's important to consider what we bring in or don't from customization options. For example, some might be a block as we enter full site editing, over a global style. I also think we should consider where can we have defaults that bring in options over exposing from the start macro details. Typography scale for example would be something that would work for most over having macro typography control. It's one aspect to explore as this is worked on. That all said, whatever is create does need to be tested for scale as there will be extensibility.
@shaunandrews thanks for these explorations. I know the idea is to first have this in site edit (over outside), but where that entry point is I think is up for debate. There are 3 paths also:
Moving in and out of these is going to be something to curate as it flows. My current thinking as noted is to 'detach' and have a very similar experience to illustrator but I want to explore that a bit more.
In seeing the screens, I would love to explore how to distill down text for example on typography. I think this is a great space I want to iterate with, how little is needed here to guide? Of course this could be something that comes out in usability testing.
Onto next steps! The path I want to suggest is for v1:
Starts and continues to iterate along with design, together, focusing on #19611.