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

Spacer block: Can't grab the block's height adjuster #16646

Closed
mapk opened this issue Jul 17, 2019 · 9 comments · Fixed by #17136
Closed

Spacer block: Can't grab the block's height adjuster #16646

mapk opened this issue Jul 17, 2019 · 9 comments · Fixed by #17136
Assignees
Labels
[Block] Spacer Affects the Spacer Block Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress

Comments

@mapk
Copy link
Contributor

mapk commented Jul 17, 2019

Describe the bug
I can't grab the block's height adjuster due to the block below showing the Insert block appender over it.

To reproduce
Steps to reproduce the behavior:

  1. Add a Spacer block.
  2. Add another block below it.
  3. Select the Spacer block again.
  4. Try moving the cursor to the node on the bottom of the Spacer block to adjust its height.
  5. Observe the Block Inserter appender appearing preventing you from grabbing the node.

Expected behavior
I expected to be able to grab the node to the adjuster without it being hidden under the block appender.

Screenshots

spacer-hover

Desktop (please complete the following information):

  • OSX
  • Firefox 68.0
  • Gutenberg 6.1
@mapk mapk added Needs Design Feedback Needs general design feedback. [Block] Spacer Affects the Spacer Block labels Jul 17, 2019
@mtias
Copy link
Member

mtias commented Jul 18, 2019

This is pretty annoying.

@enriquesanchez
Copy link
Contributor

Discussed during today's Design triage in Slack.

The team agreed that this was a larger issue around the placement of the appender. A couple of suggestions came up:

  1. Have the appender appear in between two blocks when you hover long enough, moving them slightly apart.

  2. Have the appender positioned just outside the main block UI so it doesn't overlap any of the block's UI. Quick mockup:

mockup

Concerns about accessibility and mobile support should be considered.

@mtias
Copy link
Member

mtias commented Aug 21, 2019

Let's try how a delay of 2s or so feels for this. It might give a decent baseline since it'd appear when you want to, but not be in the way during most common operations.

@karmatosed karmatosed removed the Needs Design Needs design efforts. label Aug 21, 2019
@shaunandrews
Copy link
Contributor

I worked up a mockup showing what it could be like to only show the inserter after hovering for a second, and then moving blocks out of the way to make room:

navigation and inserter

@shaunandrews
Copy link
Contributor

inserter animation 2

Here's another iteration on the animation above. This time, I made the line thinner and had it transition in earlier than the + icon.

mapk added a commit that referenced this issue Aug 22, 2019
…doesn't interfere with other UI elements. Kind of fixes #16646. I wanted to try a delay on the inserter, but animating the display attribute in CSS isn't possible. I think that's why the Inserter uses the opacity instead, but opacity still takes up space even when opacity is set to 0.
@jasmussen
Copy link
Contributor

Looks great, Shaun.

A question will likely surface whether this makes it harder to get to the sibling inserter. Which it might. But at the same time it also makes the act of inserting between two blocks more intentional and less fiddly, and opens up blocks like #17143 for happening. In that vein, I would suggest this is a fine tradeoff to make.

What's the next step to get this shipping? I'll juggle some labels.

@jasmussen jasmussen added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Aug 23, 2019
@shaunandrews
Copy link
Contributor

this makes it harder to get to the sibling inserter.

...and...

makes the act of inserting between two blocks more intentional and less fiddly.

Exactly! This does make it harder to find the sibling inserter — and we may want to look at adding a tip about this somewhere — but it also makes the pattern a little more intentional and understandable once learned. It also reduces the amount of "stuff" that pops in-and-out when moving a cursor around a page with lots of blocks.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Aug 28, 2019
kjellr pushed a commit that referenced this issue Aug 30, 2019
* Reduce the padding around the sibling inserter icon so that the icon doesn't interfere with other UI elements. Kind of fixes #16646. I wanted to try a delay on the inserter, but animating the display attribute in CSS isn't possible. I think that's why the Inserter uses the opacity instead, but opacity still takes up space even when opacity is set to 0.

* Switched hard coded padding number to existing variable.
@kjellr
Copy link
Contributor

kjellr commented Sep 24, 2019

I'm going to reopen this one. #17136 was an improvement, but it still requires some very careful mousework to differentiate between the resizer and the inserter.

@kjellr kjellr reopened this Sep 24, 2019
@mtias
Copy link
Member

mtias commented Aug 30, 2020

This seems to be working fairly well now with the latest design adjustments. There's probably some further improvements that could be done to the in-between inserter in general.

@mtias mtias closed this as completed Aug 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Spacer Affects the Spacer Block Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress
Projects
None yet
7 participants