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 placed before Columns can't be resized inline #8206

Closed
chrisvanpatten opened this issue Jul 25, 2018 · 5 comments
Closed

Spacer placed before Columns can't be resized inline #8206

chrisvanpatten opened this issue Jul 25, 2018 · 5 comments
Labels
[Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended

Comments

@chrisvanpatten
Copy link
Contributor

chrisvanpatten commented Jul 25, 2018

Describe the bug
All the fixes applied to nested blocks with collapsed margins make it impossible to resize a Spacer from the drag handle when it's placed before a Columns block.

To Reproduce
Steps to reproduce the behavior:

  1. Insert a spacer block
  2. Insert a columns block immediately after
  3. Try to grab the drag handle on the spacer block
  4. Note that the in-between inserter covers it

Expected behavior
You should be able to grab the drag handle on the Spacer block.

Screenshots
kapture 2018-07-25 at 15 31 04

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Safari 11.1.1
  • Gutenberg: master
@chrisvanpatten
Copy link
Contributor Author

FWIW, variations on this issue have been reported at a few points but I believe this is the first report of this specific to the Columns block. It appears fixed in all other contexts.

@designsimply designsimply added [Type] Bug An existing feature does not function as intended [Feature] Blocks Overall functionality of blocks Needs Testing Needs further testing to be confirmed. labels Jul 26, 2018
@ZebulanStanphill
Copy link
Member

What I have started to realize from UI issues like this is that you should not have any block UI attached to the current block that covers up the content of the currently-selected block.

My suggestion would be to change the sibling inserter to appear below the edge of the currently selected block. Maybe it would look like a semi-circle or something, or maybe it would just look similar to how it does now, but shifted downward.

Also, just in general the sibling inserter button seems a bit too large. The one that appears in the empty placeholder block is a bit smaller, and I think it makes sense for the sibling inserter to be the same size.

This also ties into the whole issue of the sibling inserter not being the trailing inserter. Right now, the sibling inserter is attached to and positioned from the top of blocks. I think the sibling inserters should appear below blocks, and they should always be positioned outside of the border of the selected block content. See the discussion in #7271.

To complicate things further, this also may tie in to the switch to having the arrow movers and ellipsis appear above/below the block. If they are shown in a bar below the block, then you could just throw the sibling inserter into that same bar. Actually, that is pretty much what already happens on mobile.

On yet another related note, I wonder if having the block hover outline extend beyond the actual block borders is a good idea. It results in odd situations like this one, for one. I think something like the block hierarchy mockup shown in #6459 (comment) may be a better solution to selecting parent blocks.

@chrisvanpatten
Copy link
Contributor Author

This has improved in 3.6 but only about the top half of the spacer icon is actually selectable. Better than before, but still a bit off.

@ZebulanStanphill
Copy link
Member

Related: #8881 and #8883.

@chrisvanpatten
Copy link
Contributor Author

Working on a PR for this.

@chrisvanpatten chrisvanpatten removed the Needs Testing Needs further testing to be confirmed. label Oct 4, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants