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

Try: Remove hover styles #18862

Merged
merged 2 commits into from Dec 3, 2019
Merged

Try: Remove hover styles #18862

merged 2 commits into from Dec 3, 2019

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Dec 2, 2019

As part of ongoing efforts to improve block selection navigation mode has recieved some visual enhancements and ability to "drill down" through nested blocks (#17088). In addition to this, a breadcrumb bar has been added (#17089), which provides a permanently visible visual indicator of which block you're editing, and a quick tool to let you pick the parent.

In light of that, there is less reason to have a hover style for blocks at all. So this PR removes it, and with it, the block breadrumb.

hvoer

There are a number of reasons for considering this.

  1. It drastically reduces the cognitive load of mousing over a document. This is especially visible as it helps surface the sibling inserter instead:

sibling

  1. The breadcrumb on hover has not proven that useful in practice. Given that it's plenty visible in Navigation Mode, and the block type including the parent hierarchy is surfaced in the breadcrumb, the hover label is redundant.

navigation mode

3. Perhaps most importantly, it helps suggest the best interface for selecting parent blocks.

In comlex nesting situations, the hover style would "flicker on" when tiny hit areas were hovered. But this is not the best way to select the parent block, as it requires extremely fine motor skills. The presence of the hover effect seemed to suggest that this is the primary interface for selecting parent blocks, when in fact the breadcrumb bar, or the selection tool are far better equipped methods to do so.

columns

Would love your thoughts, thank you!

@karmatosed

This comment has been minimized.

Copy link
Member

karmatosed commented Dec 2, 2019

Visually I prefer this, it absolutely has less cognitive strain. My only ponder is in distilling this back are we losing the wayfinding, but that's a case of needing to bring it in other ways that aren't as distracting.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Dec 3, 2019

Closes #11133 and #16334.

I like this change. It removes the distraction of the hover title popping up as you move your mouse around. Several months ago, I wouldn't have been in favor of this change, but I've found that the only time when I use the hover title is when trying to select parent blocks. But now that we have the block navigation menu, breadcrumb bar, and select tool, the hover title is no longer needed.

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 3, 2019

One aspect of removing the hover effect is that it is intrinsically a desktop affordance, and one that is very much biased towards sighted users. Removing it might help us rely on other affordances that are more cross-platform and potentially, accessible.

left: auto;
right: 0;
}
display: none;

This comment has been minimized.

Copy link
@youknowriad

youknowriad Dec 3, 2019

Contributor

Now, this is only rendered in navigation mode right? we could simplify the block.js code to do this and avoid doing it in CSS. Fine to do it later though.

This comment has been minimized.

Copy link
@jasmussen

jasmussen Dec 3, 2019

Author Contributor

Yes, this would be shown only in navigation/select mode.

Copy link
Contributor

youknowriad left a comment

LGTM 👍

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 3, 2019

Alright, given the approval, the positive comments, and the thumbs up, I'm going to merge this so we can try it in the plugin.

@jasmussen jasmussen merged commit 1d685f4 into master Dec 3, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@jasmussen jasmussen deleted the try/remove-hover-styles branch Dec 3, 2019
@bigvibes909

This comment has been minimized.

Copy link

bigvibes909 commented Dec 3, 2019

Great, thanks. The most important reason for this imo is that those annoying labels actually prevent me from clicking the three vertical dots in order to access blocks (in some circumstances, like when they're nested).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.