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

Tweak switcher to not scale icons down #9310

Merged
merged 6 commits into from Aug 30, 2018

Conversation

@jasmussen
Contributor

jasmussen commented Aug 24, 2018

This PR fixes so the new block icons are not scaled down, and therefore blurry, in the switcher.

Additionally it removes the gray background color from the "block chip". This is in response to similar changes elswhere in the UI.

It also adds a little dropdown arrow on hover, but not sure that adds much value, in use just this one place.

GIF:

switcher

@jasmussen jasmussen self-assigned this Aug 24, 2018

@jasmussen jasmussen requested review from mtias and WordPress/gutenberg-core Aug 24, 2018

@jasmussen jasmussen added this to the 3.7 milestone Aug 24, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Aug 24, 2018

Contributor

I wonder if we should do a more heavy-handed approach when hovering the block switcher. Like this, in conjunction with the tooltip:

image 7

Contributor

mtias commented Aug 24, 2018

I wonder if we should do a more heavy-handed approach when hovering the block switcher. Like this, in conjunction with the tooltip:

image 7

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 24, 2018

Contributor

That isn't bad. Notion does something similar:

screen shot 2018-08-24 at 13 13 32

I'd like to draw a new icon, one that isn't refresh, recycle or retweet. I think I can make this work. Will take a look monday.

Contributor

jasmussen commented Aug 24, 2018

That isn't bad. Notion does something similar:

screen shot 2018-08-24 at 13 13 32

I'd like to draw a new icon, one that isn't refresh, recycle or retweet. I think I can make this work. Will take a look monday.

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Aug 24, 2018

Contributor

It also adds a little dropdown arrow on hover, but not sure that adds much value, in use just this one place.

No a11y objections but I'd say it should appear also on focus (or maybe always be displayed?). Just checked and there's no arrow on focus. Notice also the blue outline focus style, not sure that's desired:

screen shot 2018-08-24 at 13 51 06

Contributor

afercia commented Aug 24, 2018

It also adds a little dropdown arrow on hover, but not sure that adds much value, in use just this one place.

No a11y objections but I'd say it should appear also on focus (or maybe always be displayed?). Just checked and there's no arrow on focus. Notice also the blue outline focus style, not sure that's desired:

screen shot 2018-08-24 at 13 51 06

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 24, 2018

Contributor

So, how about this icon?

screen shot 2018-08-24 at 14 07 51

Here's the SVG in case you'd like to commandeer this PR, I have to step away until monday:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z"/></svg>
Contributor

jasmussen commented Aug 24, 2018

So, how about this icon?

screen shot 2018-08-24 at 14 07 51

Here's the SVG in case you'd like to commandeer this PR, I have to step away until monday:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z"/></svg>
@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Aug 24, 2018

Contributor

Let's try it! And definitely also replace on focus.

Contributor

mtias commented Aug 24, 2018

Let's try it! And definitely also replace on focus.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Aug 24, 2018

Contributor

Quoting a comment by @rosswintle in #9127:

I note that I was working on an iPad when I was finding it difficult. This should be an interface that does not depend on hover. It should be discoverable on touch-only devices too!

Contributor

ZebulanStanphill commented Aug 24, 2018

Quoting a comment by @rosswintle in #9127:

I note that I was working on an iPad when I was finding it difficult. This should be an interface that does not depend on hover. It should be discoverable on touch-only devices too!

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Aug 24, 2018

Contributor

Wrong issue or not, I think it is probably still a good point. Just showing the switcher icon on hover/focus does not cover touch-screen users. Perhaps the switcher icon should always be shown in the corner or on the side of the button?

Contributor

ZebulanStanphill commented Aug 24, 2018

Wrong issue or not, I think it is probably still a good point. Just showing the switcher icon on hover/focus does not cover touch-screen users. Perhaps the switcher icon should always be shown in the corner or on the side of the button?

@rosswintle

This comment has been minimized.

Show comment
Hide comment
@rosswintle

rosswintle Aug 24, 2018

Contributor

Ignore me. Have been on holiday and seem to have forgotten how to use GitHub. 🤦‍♂️

Contributor

rosswintle commented Aug 24, 2018

Ignore me. Have been on holiday and seem to have forgotten how to use GitHub. 🤦‍♂️

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Aug 25, 2018

Member

Perhaps the switcher icon should always be shown in the corner or on the side of the button?

We could always have a different solution for mobile.

Member

karmatosed commented Aug 25, 2018

Perhaps the switcher icon should always be shown in the corner or on the side of the button?

We could always have a different solution for mobile.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 27, 2018

Contributor

Pushed a few fixes. On desktop breakpoints, you'll see this:

desktop

On mobile breakpoints, you'll see this:

mobile

Your thoughts are welcome.

Contributor

jasmussen commented Aug 27, 2018

Pushed a few fixes. On desktop breakpoints, you'll see this:

desktop

On mobile breakpoints, you'll see this:

mobile

Your thoughts are welcome.

jasmussen added some commits Aug 24, 2018

Tweak switcher to not scale icons down
This PR fixes so the new block icons are not scaled down, and therefore blurry, in the switcher.

Additionally it removes the gray background color from the "block chip". This is in response to similar changes elswhere in the UI.

It also adds a little dropdown arrow on hover, but not sure that adds much value.
@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 27, 2018

Contributor

I pushed a few fixes to improve mobile, add consistency, and refine the code. I also made sure it was friendly to colored icons. Though note that it appears the inline styles for foreground and background colors are not output as part of the hasColors prop, CC: @jorgefilipecosta.

Here's how it looks now:

transform

One thing that seems very positive about the idea of having a fixed width switcher, is that it anchors the block. As you transform from one block to another and everything changes, one thing stays both in place, and due to the transform icon showing on focus, stays the same as well. This anchoring has a real emotional effect and makes it feel resilient, to me.

Contributor

jasmussen commented Aug 27, 2018

I pushed a few fixes to improve mobile, add consistency, and refine the code. I also made sure it was friendly to colored icons. Though note that it appears the inline styles for foreground and background colors are not output as part of the hasColors prop, CC: @jorgefilipecosta.

Here's how it looks now:

transform

One thing that seems very positive about the idea of having a fixed width switcher, is that it anchors the block. As you transform from one block to another and everything changes, one thing stays both in place, and due to the transform icon showing on focus, stays the same as well. This anchoring has a real emotional effect and makes it feel resilient, to me.

@ZebulanStanphill

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Aug 27, 2018

Contributor

Wow, that feels very nice! I think this is definitely an improvement over master.

Contributor

ZebulanStanphill commented Aug 27, 2018

Wow, that feels very nice! I think this is definitely an improvement over master.

@TheJeffr0

This comment has been minimized.

Show comment
Hide comment
@TheJeffr0

TheJeffr0 Aug 28, 2018

I like Kevin Hoffman's proposal but I like this idea even more. Ever since the Convert Block option was moved to the toolbar, I thought it should have its own icon so users know at a glance what it does. One thing I don't understand though is that when you hover over a block in the editor, you see the block's label in the top right corner. If that label is shown, why isn't the left most icon always the change block type icon. This would eliminate having to hover over that icon to see the convert block type option. As it stands, the icon mimicking the block being edited acts like a visual label, something that already exists in the top right corner of the block.

TheJeffr0 commented Aug 28, 2018

I like Kevin Hoffman's proposal but I like this idea even more. Ever since the Convert Block option was moved to the toolbar, I thought it should have its own icon so users know at a glance what it does. One thing I don't understand though is that when you hover over a block in the editor, you see the block's label in the top right corner. If that label is shown, why isn't the left most icon always the change block type icon. This would eliminate having to hover over that icon to see the convert block type option. As it stands, the icon mimicking the block being edited acts like a visual label, something that already exists in the top right corner of the block.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 28, 2018

Contributor

This would eliminate having to hover over that icon to see the convert block type option. As it stands, the icon mimicking the block being edited acts like a visual label, something that already exists in the top right corner of the block.

We've been trying to balance things for a while here, with the hover outlines and hover label and the switcher. It's a very very delicate balance to achieve our goals and keep everyone happy. In this case, the Switcher interface is not available for every block, only blocks where transformations are reversible (i.e. lossless). If it is to double as a block type indicator, which I think is a totally fair proposal, we need to be mindful that it doesn't cause confusion with its dual roles. But I'll give this a shot.

Note that as a separate exploration (see #9053 (comment)), we might show the block type icon for the selected block in the top toolbar as part of explorations into nested block UIs. That would essentially always show the icon of the selected block, sidebar open or not.

Contributor

jasmussen commented Aug 28, 2018

This would eliminate having to hover over that icon to see the convert block type option. As it stands, the icon mimicking the block being edited acts like a visual label, something that already exists in the top right corner of the block.

We've been trying to balance things for a while here, with the hover outlines and hover label and the switcher. It's a very very delicate balance to achieve our goals and keep everyone happy. In this case, the Switcher interface is not available for every block, only blocks where transformations are reversible (i.e. lossless). If it is to double as a block type indicator, which I think is a totally fair proposal, we need to be mindful that it doesn't cause confusion with its dual roles. But I'll give this a shot.

Note that as a separate exploration (see #9053 (comment)), we might show the block type icon for the selected block in the top toolbar as part of explorations into nested block UIs. That would essentially always show the icon of the selected block, sidebar open or not.

@TheJeffr0

This comment has been minimized.

Show comment
Hide comment
@TheJeffr0

TheJeffr0 Aug 28, 2018

Ahh ok, now I know why some blocks had the convert block option and some didn't. I thought any block could be converted to any other block. Knowing that now, it doesn't make sense to show the block change icon all the time.

TheJeffr0 commented Aug 28, 2018

Ahh ok, now I know why some blocks had the convert block option and some didn't. I thought any block could be converted to any other block. Knowing that now, it doesn't make sense to show the block change icon all the time.

@hedgefield

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Aug 28, 2018

Has there been any consideration given to always showing the transform icon instead of the block icon? That seems like a clear and consistent indication of what the button does for the untrained observer.

hedgefield commented Aug 28, 2018

Has there been any consideration given to always showing the transform icon instead of the block icon? That seems like a clear and consistent indication of what the button does for the untrained observer.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 28, 2018

Contributor

Has there been any consideration given to always showing the transform icon instead of the block icon?

Yes, I think that's a fair option too. The way it's designed now is to actually be a callback to the classic paragraph dropdown, but just different enough to imply that it has augmented functionality.

Given the attention this issue is receiving currently, how would you feel about us getting this merged in to the next release, getting a feel for it, and then revisiting if need be?

Contributor

jasmussen commented Aug 28, 2018

Has there been any consideration given to always showing the transform icon instead of the block icon?

Yes, I think that's a fair option too. The way it's designed now is to actually be a callback to the classic paragraph dropdown, but just different enough to imply that it has augmented functionality.

Given the attention this issue is receiving currently, how would you feel about us getting this merged in to the next release, getting a feel for it, and then revisiting if need be?

@hedgefield

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Aug 28, 2018

I'd say it's definitely more helpful than the current implementation, shipping and iterating seems fine.

hedgefield commented Aug 28, 2018

I'd say it's definitely more helpful than the current implementation, shipping and iterating seems fine.

@tofumatt

This is cool; I'm fine with the code and the implantation but it's quite broken in IE11:

2018-08-28 12 11 58

I can try to help with a fix a bit later, but I'm a bit pressed for time this second 😅

jasmussen added some commits Aug 29, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 29, 2018

Contributor

Thanks for the review @tofumatt, I believe I have addressed all points. Comments were clarified, SVG attributes added (btw let's also look at https://github.com/webpack-contrib/svg-inline-loader), and IE11 should be addressed:

ie11

Contributor

jasmussen commented Aug 29, 2018

Thanks for the review @tofumatt, I believe I have addressed all points. Comments were clarified, SVG attributes added (btw let's also look at https://github.com/webpack-contrib/svg-inline-loader), and IE11 should be addressed:

ie11

@jasmussen jasmussen requested a review from tofumatt Aug 29, 2018

@mtias

mtias approved these changes Aug 29, 2018

Love how this turned out.

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Aug 29, 2018

Member

Tested locally and works great. I am wary about merging with failing tests, even when they are Docker-related. 🤷‍♂️

Member

tofumatt commented Aug 29, 2018

Tested locally and works great. I am wary about merging with failing tests, even when they are Docker-related. 🤷‍♂️

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 29, 2018

Contributor

Made the dropdown arrow slightly larger:

screen shot 2018-08-29 at 14 12 24

Let's either wait for the tests to pass or if 3.7 needs to ship before that, yolo. Tests pass for me too.

Contributor

jasmussen commented Aug 29, 2018

Made the dropdown arrow slightly larger:

screen shot 2018-08-29 at 14 12 24

Let's either wait for the tests to pass or if 3.7 needs to ship before that, yolo. Tests pass for me too.

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 29, 2018

Contributor

@jasmussen I really like this and think it should land as-is!

But… would love if a slight delay on the hover animation was considered in a follow-up PR, or if the animation was something a little tamer (maybe with a slight fade-out as the block icon moves up, and a fade-in as the switcher icon moves into place?). I like the effect a lot but it feels slightly aggressive. Which is something I never thought I'd say about a small animation like this, but there you go :)

Contributor

chrisvanpatten commented Aug 29, 2018

@jasmussen I really like this and think it should land as-is!

But… would love if a slight delay on the hover animation was considered in a follow-up PR, or if the animation was something a little tamer (maybe with a slight fade-out as the block icon moves up, and a fade-in as the switcher icon moves into place?). I like the effect a lot but it feels slightly aggressive. Which is something I never thought I'd say about a small animation like this, but there you go :)

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 29, 2018

Contributor

Thanks Chris. It's intentionally fast so as to never make you feel like you need to "wait". I imagine a more elaborate animation is nice the first few times but becomes distracting after a while.

However I might be wrong, and I would love to review a tweaked animation!

Contributor

jasmussen commented Aug 29, 2018

Thanks Chris. It's intentionally fast so as to never make you feel like you need to "wait". I imagine a more elaborate animation is nice the first few times but becomes distracting after a while.

However I might be wrong, and I would love to review a tweaked animation!

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 29, 2018

Contributor

@jasmussen I did a small iteration that fades the icons in and out as they move, and changes the movement speed to 0.2s.

https://www.dropbox.com/s/q18q0cug1x8it8s/demo.mov?dl=0

Video link above shows the animation in this branch on the left, and my modification on the right, for comparison purposes. (Dropbox instead of GIF because a GIF was compressing too much for the subtle opacity change to be clear.)

Gist for the changed block-switcher/style.scss file: https://gist.github.com/chrisvanpatten/12a49e0ffd46e33c776b7f444e07c733 (changes on lines 35 and 62)

Contributor

chrisvanpatten commented Aug 29, 2018

@jasmussen I did a small iteration that fades the icons in and out as they move, and changes the movement speed to 0.2s.

https://www.dropbox.com/s/q18q0cug1x8it8s/demo.mov?dl=0

Video link above shows the animation in this branch on the left, and my modification on the right, for comparison purposes. (Dropbox instead of GIF because a GIF was compressing too much for the subtle opacity change to be clear.)

Gist for the changed block-switcher/style.scss file: https://gist.github.com/chrisvanpatten/12a49e0ffd46e33c776b7f444e07c733 (changes on lines 35 and 62)

@kevinwhoffman

This comment has been minimized.

Show comment
Hide comment
@kevinwhoffman

kevinwhoffman Aug 29, 2018

Contributor

Reverting to the pilcrow (¶) icon and the addition of the dropdown arrow improve the clarity and affordance of the control. It's more obvious now that the current block is a paragraph and that it has the potential to change as indicated by the arrow.

However I'm not in favor of the hover effect with the circular arrows icon for the following reasons:

  • The sliding animation and icon change is jarring and inconsistent with any of the other existing controls in the editor.
  • Once a new block is selected, the arrows icon stays in place so the new block type is not reflected in the control until focus is removed.
  • The icon seems to be based on the concept of "block-switching" which is an unfamiliar concept to the average user who is more likely using the control because they want to format some text.
  • The icon as proposed in #9310 (comment) looks very similar to the existing icon for reusable blocks.

Reusable block icon seen below:
image

Contributor

kevinwhoffman commented Aug 29, 2018

Reverting to the pilcrow (¶) icon and the addition of the dropdown arrow improve the clarity and affordance of the control. It's more obvious now that the current block is a paragraph and that it has the potential to change as indicated by the arrow.

However I'm not in favor of the hover effect with the circular arrows icon for the following reasons:

  • The sliding animation and icon change is jarring and inconsistent with any of the other existing controls in the editor.
  • Once a new block is selected, the arrows icon stays in place so the new block type is not reflected in the control until focus is removed.
  • The icon seems to be based on the concept of "block-switching" which is an unfamiliar concept to the average user who is more likely using the control because they want to format some text.
  • The icon as proposed in #9310 (comment) looks very similar to the existing icon for reusable blocks.

Reusable block icon seen below:
image

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 29, 2018

Contributor

The icon seems to be based on the concept of "block-switching" which is an unfamiliar concept to the average user who is more likely using the control because they want to format some text.

An unfamiliar concept is not necessarily a bad concept :) There's definitely a past legacy to account for, but new concepts are inevitable with Gutenberg.

I think this PR solves the discoverability problem — at least partially — and once someone discovers the interface, its purpose is clear.

Contributor

chrisvanpatten commented Aug 29, 2018

The icon seems to be based on the concept of "block-switching" which is an unfamiliar concept to the average user who is more likely using the control because they want to format some text.

An unfamiliar concept is not necessarily a bad concept :) There's definitely a past legacy to account for, but new concepts are inevitable with Gutenberg.

I think this PR solves the discoverability problem — at least partially — and once someone discovers the interface, its purpose is clear.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 30, 2018

Contributor

Tests pass, and the iterative improvement is approved. Merging and then we can continue to refine.

Contributor

jasmussen commented Aug 30, 2018

Tests pass, and the iterative improvement is approved. Merging and then we can continue to refine.

@jasmussen jasmussen merged commit 9a25ed1 into master Aug 30, 2018

2 checks passed

codecov/project 50.57% (-0.02%) compared to d2074ef
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/switcher-tweaks branch Aug 30, 2018

@lkraav

This comment has been minimized.

Show comment
Hide comment
@lkraav

lkraav Aug 31, 2018

It feels weird for the "Transform" icon to stay, after you've made the target block selection. It's like the brain is looking for a confirmation "did it do the right thing?". Right now, you can only get confirmation if you mouse away from the "Transform" control and its icon circles back to the chosen target block icon.

lkraav commented Aug 31, 2018

It feels weird for the "Transform" icon to stay, after you've made the target block selection. It's like the brain is looking for a confirmation "did it do the right thing?". Right now, you can only get confirmation if you mouse away from the "Transform" control and its icon circles back to the chosen target block icon.

@lkraav

This comment has been minimized.

Show comment
Hide comment
@lkraav

lkraav Aug 31, 2018

"Transform To" should probably be sentence case?

lkraav commented Aug 31, 2018

"Transform To" should probably be sentence case?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment