Blocks: Fix clearing selection on canvas click

[youknowriad]

#812 added a padding around the BlockList container, so in order to dismiss the selection properly, we need to catch clicks on this container.

[youknowriad]

I've noticed that this breaks multi-selection. Looking

[youknowriad]

It's better now, I've updated the dismiss event. It's bound to onMouseUp instead. Let me know how that feels for you.

[aduth]

Instead of capturing the click, can we style it so that it's not occupying the full width of the canvas, letting clicks be captured by the <VisualEditor /> component?

max-width: $visual-editor-max-width;
margin: 0 auto;

[youknowriad]

@aduth I thought that was necessary for #812 but I may be wrong. Looking

Edit: Yep, I think it's not an option, this breaks the image alignment.

[jasmussen]

Yep, the new full width method requires there to be no max width on the blocks. We've been through a few techniques and this was the one that had the fewest tradeoffs.

User experience wise, this works well! Mousedown would be better, but absent that this works well! 👍

[aduth]

It's bound to onMouseUp instead.

Why is this necessary? Feels like we're letting desired behavior of this component be dictated by its descendants.

[aduth]

Maybe we revert to the behavior where block.js calls stopPropagation in its onClick handler, and anything else that bubbles up to VisualEditor is assumed cause the clear?

[youknowriad]

Why is this necessary?

It's necessary because when we click the mouse on a node and release it on a different one, The event target is the first common ancestor I think. This causes the multi-selection to clear itself on release.

I'm updating to use onMouseDown which is better I think (as suggested by @jasmussen)

[youknowriad]

I'm merging this since it's the best solution we have right now.

[mtias]

Perhaps going back to clickOutside and trying to prevent it from happening if you click on the inserter or the sidebar could be worth looking back into.