Spacer block: Add clear:both; to clear any floats around it

[mapk]

Fixes #15099. Adds a clear:both; to the Spacer block so that it clears any floated blocks and functions as a Spacer block should.

How has this been tested?

Locally.

Screenshots

Current result adding Spacer block under floated images

Proposed result adding Spacer block that clears floats

Types of changes

Added minor CSS. I tested under various use cases.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[kjellr]

This works well:

Before:

After:

I'm trying to think of a reasonable scenario when you wouldn't want this to clear floats, and I'm coming up empty. I'd love a gut check from @jasmussen though just to be sure.

If we do include this, I agree with @marekhrabe that we should provide a similar rule on the front end too. To do that, we'd need to add a new file at packages/block-library/src/spacer/style.scss, and add a style to clear .wp-block-spacer. Then just add it to the list of includes at packages/block-library/src/style.scss.

[jasmussen]

I'm trying to think of a reasonable scenario when you wouldn't want this to clear floats, and I'm coming up empty. I'd love a gut check from @jasmussen though just to be sure.

The one that comes to mind is the following (pseudo) markup:

1. Image, floated right
2. Text
3. Spacer below text
4. Text

And the spacer in 3 is inserted in order to "fill out" the space below the text in 2, so the text in 4 clears the floated image.

I would actually suggest that your "before" image, Kjell, is the desired behavior. The UI is just not very pretty — but it's actually representative of the markup below — because of the weirdness of hwo floats work. The block actually does span the full width, it's just the content of the block that's "floating around".

I do recognize what I'm describing above is the 1% use case, and is likely not what the user expects. So I have no objections to this PR shipping. But I can imagine a future where float clearing is a toggle in the "advanced" section of blocks, and it's then up to blocks themselves to decide whether they should clear by default or not.

[mapk]

And the spacer in 3 is inserted in order to "fill out" the space below the text in 2, so the text in 4 clears the floated image.

Good scenario! And you're right, it does follow the structure of the markup this way, but as agreed, it's probably a 1% scenario that would want this. Based on that, I'm okay forcing the Spacer block to clear floats because I believe this would be the more common use case.

So I have no objections to this PR shipping.

Thanks, @jasmussen! I'll also work on the frontend stylesheet as mentioned by both @kjellr and @jorgefilipecosta.

Thanks everyone for this great feedback! 🥇

Oh, yeah, BTW, I love this thought!

But I can imagine a future where float clearing is a toggle in the "advanced" section of blocks, and it's then up to blocks themselves to decide whether they should clear by default or not.

[jorgefilipecosta]

Hi @mapk, what if we add the clear both style to the selector .block-editor-block-list__block[data-type="core/spacer"]?
It seems a more robust style that does not rely as much on the space block internals. There is a small issue with the approach I suggested, in my tests the spacer toolbar border is cut a bit. I guess we may debug the problem separately and even with this small visual issue the UX with that selector seems improved (in my opinion).

[mapk]

There is a small issue with the approach I suggested, in my tests the spacer toolbar border is cut a bit. I guess we may debug the problem separately and even with this small visual issue the UX with that selector seems improved (in my opinion).

@jorgefilipecosta I'm a bit unclear if you'd like me to make that change, or because you found some issues, to just leave it as is. Can you clarify?

I've also added a stylesheet for the frontend. Thanks for the guide there, @kjellr!

[kjellr]

@jorgefilipecosta I'm a bit unclear if you'd like me to make that change, or because you found some issues, to just leave it as is. Can you clarify?

Tying this to the core block itself, instead of its inner container would push the floated block outside of the entire spacer block. For instance, here's the current approach:

... and here's what would happen if the floating was cleared at .block-editor-block-list__block[data-type="core/spacer"]:

This technically feels a little better. It does have a small toolbar overlap issue, but that could be easily solved by setting the toolbar z-index to a value above 81. I'm not sure if that has other unintended consequences though.

Your current approach here is in line with the way floated blocks appear inside of blocks like the Paragraph block:

So I think it's fine to keep the current approach for now.

[kjellr]

Left one very small CSS note. Once that's all set, I think we're good to go!

[kjellr]

Really minor note, but this list is arranged alphabetically. Can you move this line up to the correct alphabetical spot?

[mapk]

Haha, totally! Thanks for catching that one.

[mapk]

@kjellr or @jorgefilipecosta one last review please. 😄

[kjellr]

🎉 Looks great, thanks for the fix, @mapk!