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 old hover design #2155

Closed
wants to merge 1 commit into from
Closed

Try old hover design #2155

wants to merge 1 commit into from

Conversation

jasmussen
Copy link
Contributor

There has been discussion on the heaviness of the blocks. Initially this led us to having only the left border on hover. We added a full outline so as to better portray that a paragraph is a block.

However multi selection across blocks works well. If we can get it to work as well with keyboard shortcuts (and show list and quote options in a toolbar), aside from this addressing #539, it seems like there's less of a need for the block outlines to look so heavy.

Screenshot:

screen shot 2017-08-02 at 13 47 24

There has been discussion on the heaviness of the blocks. Initially this led us to having only the left border on hover. We added a full outline so as to better portray that a paragraph is a block.

However multi selection across blocks works well. If we can get it to work as well with keyboard shortcuts (and show list and quote options in a toolbar), aside from this addressing #539, it seems like there's less of a need for the block outlines to look so heavy.
Copy link
Contributor

@timmyc timmyc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this change personally. The one instance where it looked a little different to me was when a neighboring block is selected, and I hover over the next... something about the full square outline next to the single line on the left.

test_gallery___gutenberg_ wordpress_develop _wordpress

The other item, though not related to these changes, is the block settings/delete shortcuts feel a bit "heavier" with this change since there is no line along side of these controls they seem extra bold to me.

@jasmussen
Copy link
Contributor Author

Great feedback, Timmy. I agree, that's the biggest weakness of this. However the items on the side in general bug me — I know why they're there and what value they bring, but they contribute to the heaviness of the UI. See also #2156

Another option — what if we show the cog and trash button only when you are hovering the right area?

That is:

  • When hovering an unselected block on the center, you get the left border and the up/down arrows
  • When hovering the right edge of an unselected block, the cog and trash show up (obv. also on focus)
  • When a block is selected, they all show up

CC: @afercia

Perhaps worth trying before we try moving the cog and trash to the quick toolbar. It feels like there's value in being able to hover and click to remove a block.

@afercia
Copy link
Contributor

afercia commented Aug 4, 2017

When hovering the right edge of an unselected block, the cog and trash show up (obv. also on focus)

Not sure, discoverability might be a problem. I'd rather keep it simple.

@jasmussen
Copy link
Contributor Author

Closing this branch as other efforts are underway.

@jasmussen jasmussen closed this Oct 2, 2017
@jasmussen jasmussen deleted the try/old-hover-design branch October 2, 2017 08:53
ceyhun pushed a commit that referenced this pull request Apr 22, 2020
* Update ref: Correct colors usage in Buttons
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants