Gutenberg: Add a global option to clear floated blocks.

[jaclyntan]

I tried using the button feature today and for the most part it works perfectly, however if I try to align it, the alignment seems to affect the entire block, making it align weirdly/nest with the other blocks. See screenshots to see what I mean


I assume this is intended because some people might want the buttons within a paragraph of text...? But once an alignment is set on the button it's really hard to reorder the button because the arrows are blocked by the plus button when hovered. Also when the block is within another block it conflicts the hover states between each block.

Also the button block would even more useful if we could also have the ability to add custom classes and title attributes, as well as set a target ie. target="_blank"

Thank you!

[webtrainingwheels]

I can reproduce this issue with the alignment affecting other blocks. I think it's essentially the same issue as this one: https://github.com/WordPress/gutenberg/issues/4127
Basically related to clearing the floats.
Even though you may add a new "block" below your button, the alignment of the button is not cleared, so it will indeed affect the next "block".
It's unexpected because the notion of a "block" is of a self-contained unit which should be unaffected by others, unless specifically nested.

[webtrainingwheels]

@jaclyntan Just an FYI, I found a dedicated issue related to reordering the button block when alignment is applied. I think this is the trouble you are also having?
https://github.com/WordPress/gutenberg/issues/9401

[jaclyntan]

@webtrainingwheels good catch I think that is the same issue. I think it's to do with clearing floats too. The main problem is that the floating inteferes with how the block is able to be removed/edited.

The concept of aligning these blocks is quite confusing as well since I did not expect the button to be aligned in the previous block with a float. I expected the button to the floated right or left within it's own section if that makes sense.

I think the Image blocks may use the same alignment functionality though, but since buttons are smaller in size it's block probably runs into more conflicting issues when floated within other blocks.

I'm not against using floats to align these elements- just as long as the UI doesn't clash within other blocks ^^

[ellatrix]

The movers have been fixed, see https://github.com/WordPress/gutenberg/issues/9401#issuecomment-503069728.

Currently it's indented that the buttons float, so that they have other blocks around them. Perhaps there should also be an option to clear the float so that there is nothing around the button? Cc @jasmussen maybe?

[jasmussen]

Perhaps there should also be an option to clear the float so that there is nothing around the button?

Not entirely sure I understand the context. There's also a separate PR or decision around how/where to show the button URL, i.e. in a popout bubble. This would fix some of the indentation you see here:

But to answer your specific question, should there be an option for a block to clear floats or "self clear"? This issue has come up a number of times, enough to suggest that yes, there probably should be. And maybe this option should even be global to all blocks and we could put it down here in the advanced section, because it really _is_ an advanced thing to do:

[sarahmonster]

The design team discussed this during a triage session in Slack today (Note: You may need a Slack account to log in.)

The overall consensus was that, whilst floats are problematic from a user experience perspective, we need a way of being able to better and more predictably work with them. @joen's solution suggested here, of providing an option to clear a float on a per-block basis, seems like a good compromise solution that will take some of the sting out of the experience for some users, and as such we should do it.

Given the complexity of understanding how floats behave, we'd definitely advise for making it an advanced option as suggested here as well. 👍

[joyously]

I think that Clear should be with the other alignment options, as an additive property.

[paaljoachim]

Another float issue. Just adding it in here:
https://github.com/WordPress/gutenberg/issues/13784

[noisysocks]

_This ticket was mentioned during a #core-editor chat._

This is ready for a dev to pick up, and implementing it would fix https://github.com/WordPress/gutenberg/issues/13784.

[jasmussen]

I just created #21608 which outputs CSS to clear floats when a block is centered.

We might very well decide to _not_ do that, based on discussion. But at least then we will have decided that this particular issue is the one to solve!

[tellthemachines]

Given @jasmussen 's work above, is there anything still required for this ticket? Or is it good to close?

[jasmussen]

is there anything still required for this ticket?

I'm not sure. In CSS you can apply clear: both; to any element, to fix the quirks of floats. It feels fair enough to allow this float clearing on a per-block basis just like applying a CSS class.

Also — sorry for closing and reopening, an embarrassing mis-click!