Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Try a new hover and select approach to improve nested block selection #6773
This PR aims to solve a number of issues we've had around selecting nested and parent blocks. Watch the GIF first:
It also tries to take the vinegar out of the hover label, and makes it feel much less fiddly to work with blocks in nested situations.
It does this by making the parent block side padding much wider than the nested block padding. But only in a visual way, using negative margins on the UI. That means the appearance of the blocks should not change visually, the goal is still to be 1:1 with the front-end, and further enhancements to nested block paddings are coming in #6408.
For starters, please try out this branch and get a feel for it. Depending on feedback and aside from polish, there are two remaining to-do's for this branch:
Your thoughts and feedback are appreciated.
@jasmussen thanks for the ping. Tested with columns and two quotes. First impression is that is not immediately clear when/why the "breadcrumb" labels appear and when not. They appear on hover, but not when the block is selected, that's a bit confusing.
Aside: I guess the breadcrumb labels were introduced specifically for the nested block but they also reveal that sometimes there's the need to identify what a block is. They're basically visible labels, I wonder if it could be beneficial to always show them, at least when the block is selected.
The color contrast of the breadcrumb label is not sufficient. See
.editor-block-list__breadcrumb has two background CSS properties, the latter prevails and it's
$blue-medium-300 #66C6E4 with white text. The contrast ratio of 1.95:1 https://jdlsn.com/color/?type=hex&color=FFFFFF&color2=66C6E4 should be at least 4.5:1
In some cases, for example when hovering the "horizontal inserter" the label appears:
That's potentially very confusing, as users may think the label is related to the inserter.
Keyboard interaction: yes as you pointed out there's the need to improve it. Also, the "Add block" plus icon appear only on focus, which makes them hardly discoverable.
This was referenced
May 18, 2018
3a0aac3 changes the behavior to tab to the block focus stop first if there are inner children, before proceeding to the inner blocks (in order, so ArrowDown from a previous block).
b2c869a adds an overlay on small screen unselected root blocks so that it's required to tap on a nested block wrapper before tapping one of its child blocks.
Looking good! Some thing to address:
Pushed a few fixes:
I worry that will make it a bit fiddly to know what you're interacting with. The biggest challenge is that this will make the block toolbar sit in a fashion that might make it look detached.
We can definitely explore addressing that — perhaps the block toolbar gets a little triangle arrow that shows what it's connected to. But I think this should be explored separately.
The sibling inserter does need a little further love since the most recent iteration, but at least now you don't accidentally invoke it all the time. But can you clarify why you'd want to click the label? The label doesn't do anything anymore, it's purely informative.
I know. This is because we reserve 28px to the left of all blocks for the side UI, so the clickable area to select the parent actually starts outside of that clickable area:
Right now the extra wide padding is present on all top level blocks, but not on nested blocks. Some options:
@jasmussen I think making the up/down arrows double as drag handles is a great idea. I think that if you did that, you could also make the block toolbar double as a drag handle as well, providing more than enough space to drag a block from without adding any additional weight to the UI.
Right now, I think the dragging from the side of blocks is kind of confusing. It looks like you are outside the block boundaries, and there is little indicator that the side area is connected to the block. This could be resolved with adding a hover effect to the side of blocks, but I would prefer if the side padding was simply done away with and the arrow buttons and/or block toolbar were made into drag handles.
Good feedback, thank you, and thanks for the rebase help!
I agree the sibling inserter needs a little love. The plus in the middle is the only clickable element, which helped make it somewhat more intentional to access, but this isn't working when you are trying to insert above the block you have selected, because the plus sits behind the block toolbar.
The line indicates where the block will be inserted — perhaps we could color it according to the theme to make it more clear what it means, but I'm not sure if removing it is the solution.
Does it make sense to simply not be able to use the sibling inserter before or after the block that is selected? Does it make sense to require that you simply have no block selected in order to use the sibling inserter? I feel like the answer to both of those are "no", but I'm not sure how to reconcile it otherwise.
Another solution is to show the plus to the left or right of the sibling inserter, but I tried this in the branch and it conflicted with the side UI. Perhaps we can show it waaay left or waaay right of the block, to not conflict?
This should be fixed in #6909
I think it's already too crowded to add a line on hover. Maybe the line could only be shown when we hover the button directly. Just my opinion. The issue for me is not related to the selected block.
Also, I personally don't like the "blue" color of the hover outlines, I know it's done on purpose but it feels odd with the rest of the UI
Okay, from an experience and CSS point of view, this is now ready.
This PR brings a new way of selecting blocks, including parent blocks, both for mouse, keyboard and mobile users. It refactors a lot of variables and refines a bunch of styles in order to get there, and the hover label has been re-thoughts.
Other than that, I think it's ready for a final review.
referenced this pull request
Jun 1, 2018
Jun 1, 2018
Well, it does work for me — it's just that you have to click and drag and it's not a great experience yet.
It was my intention to create a separate ticket for this, including a ticket to improve the sibling inserter and theme the hover color, per feedback in this thread. But it's been a whirlwind so creating that ticket is still on my "todo". But the gist is I'm going to suppose sort of a rejiggering of dragondrop so it's only the label that becomes the drag handle, and not the sides. But I'm sure lots of discussion and idea refinement will ensue.