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

Edit Site: Expose "global style" tools #19255

Open
mtias opened this issue Dec 19, 2019 · 8 comments
Open

Edit Site: Expose "global style" tools #19255

mtias opened this issue Dec 19, 2019 · 8 comments

Comments

@mtias
Copy link
Contributor

@mtias mtias commented Dec 19, 2019

edit-site provides a great context to explore ideas from #9534 (comment) without disrupting the main editor by registering a plugin in the header. The plugin would register a sidebar similar to this:

image

But it needs more design explorations.

cc @ItsJonQ

@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Dec 20, 2019

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.

@mtias

This comment has been minimized.

Copy link
Contributor Author

@mtias mtias commented Dec 20, 2019

In edit-site I think the site block should be the implicit context.

@karmatosed karmatosed self-assigned this Jan 7, 2020
@karmatosed karmatosed moved this from Inbox to Needs design in Full site editing Jan 7, 2020
@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Jan 9, 2020

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.

Foundation functionality

The starting functionality seemed to be agreed on to be:

  • Typography: scale and alignment. Over settings specifics, for step one a scale is moved up and down.
  • Colours: specifically simmering this down to 3 (text, background and primary) just for the start. The variations can be inferred, for example, you pick a red primary and then a hover state can be added.

Sketch

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:

  • Enter site editing
  • See this section
  • This section is also available when in site edit to be activated from a link somewhere.

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.

Iterations

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.

Traditional sidebar

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.

Global styles_ i1_ mock

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.

Global styles_ i1_ mock drilling

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.

Global styles_ i1_ mock _ higher sidebar

Global styles_ i1_ mock _ wider sidebar

Pop

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:

  • Able to move around page and 'position' to suit.
  • Smaller UI so more focus on content.

However, the benefits also option to some negatives regarding what space we have, rapidly it could be just like a sidebar.

Global styles_ i1_ mock _ pop

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:

  • The colour picker limitations.
  • Way too much repeated UI.

Global styles_ i2_ existing UI

Global styles_ i2_ existing UI mod

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).

Global styles_ i2_ existing UI_ mod 3

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.

Global styles_ i2_ existing UI_ mod 2

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.

Global styles_ i2_ existing UI_ mod 5

Feedback

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:

  • What direction do you prefer?
  • What is missing or you expected to be here?
  • What icon could represent this if we go for an icon link?

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.

@karmatosed karmatosed moved this from Needs design to Needs design feedback in Full site editing Jan 9, 2020
@jordesign

This comment has been minimized.

Copy link

@jordesign jordesign commented Jan 12, 2020

Loving the look of these - and looking forward to Global Styles coming to fruition.

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.

I think this version looks so much cleaner - I imagine it relies on each section not having too many controls though?

@ItsJonQ

This comment has been minimized.

Copy link
Contributor

@ItsJonQ ItsJonQ commented Jan 13, 2020

@karmatosed Amazing job on these designs 😍 !

It's very much inline with the global styles explorations I've been doing here:
#9534 (comment)
https://github.com/WordPress/gutenberg/tree/try/block-style-system

And more recently here:
https://github.com/itsjonq/wp-gs

In terms of feedback...

I imagine it relies on each section not having too many controls though?

@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:

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.

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.

There are some strong visual cues that you're jumping from slide content editing:
Screen Shot 2020-01-13 at 10 31 08 AM

To master slide content editing:

Screen Shot 2020-01-13 at 10 31 16 AM

Hope this helps!!!

Again, amazing job 🤗 . I really love and appreciate you diving into this with such enthusiasm!

@aristath

This comment has been minimized.

Copy link

@aristath aristath commented Jan 14, 2020

With full-site editing, I imagine most themes will want to migrate from the customizer to these global styles.
With that in mind, I think it would be safe to assume that there will be more than a couple controls there... There are themes out there with 500 controls in the customizer. And though most of them won't be required (because for example the header background-color will be defined in the "header" block itself), there will still be themes that will add a fair amount of options. A usual scenario for typography options would be body-font-family, headers-font-family, base-font-size, typography-scale. So that's 4 controls just to cover the bare minimum themes add for typography - and most of them add a lot more than just the bare minimum.
The structure needs to be built in such a way that it will allow for complex scenarios.

@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Jan 14, 2020

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.

gutenmizer

--

image

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Jan 20, 2020

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:

  • Site edit: global styles: applying across.
  • Document edit: styling just for that document (page/post/content)
  • Component edit: specific instance styling: just for that button for example.

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:

Development

Starts and continues to iterate along with design, together, focusing on #19611.

Design

  • Styling for individual components. New issue for those new components such as color picker.
  • Exploring where the panel could go for global styles (our baseline being sidebar). Add to this issue.
  • Flow diagrams for this to be added to #19611.
  • Smaller device explorations to be added to this issue.
@karmatosed karmatosed added this to Needs design feedback in Global styles Jan 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Full site editing
Needs design feedback
Global styles
Needs design feedback
7 participants
You can’t perform that action at this time.