Blocks: Floated button block takes more space when it gets focus

[gziolo]

Issue Overview

Floated button block takes more space when it gets focus. This causes the following block to display differently depending on the focus of the button.

Steps to Reproduce (for bugs)

1. Add a new button.
2. Make it floated to left.
3. Add another block.
4. Click on the button block and observe how 2nd block changes.

Browser: Chrome
System: macOS

Expected Behavior

Floated button block has always the same width.

Current Behavior

Issues around the floated button, because it’s born with a min-width so it looks weird.

Screenshots / Video

/cc @jasmussen

[jasmussen]

After thinking about this, I think maybe this is okay.

For the time being it is intentional that an unselected block is a preview, and a selected block can show extended configuration controls, in this case an input field for the URL. Many other blocks are likely to do similar things, and so long as the preview looks accurate when the block is unselected perhaps that's okay.

However I also can't quite perceive all the ways this can go wrong. We might indeed need some tweaks to how floats are handled, in case they break more deeply than the above.

As such, I would suggest we keep this issue open, but on the backburner.

[jasmussen]

While the recent improvement to floats hasn't fixed this issue, it has nonetheless made the experience much less jarring and more predictable:

Clicks on buttons do what you expect them to, and although it's perhaps not ideal that things shift around a lot when you select them, it is a design principle that a selected block can show additional controls, in this case a URL bar.

As such, I'm going to close this for now, we can then revisit if need be. One solution would be to redesign the URL bar of the button.

[gziolo]

Much better, thanks 👍