Gutenberg: Table aligned left, doesn't clear the float after it

Created on 28 Nov 2018  路  4Comments  路  Source: WordPress/gutenberg

See the following screenshot.
If I align a table to left (or right), there should be a clear: both after it so I can add blocks below it.
Now I can't find any way to do this.

image

[Block] Table [Status] Duplicate [Type] Enhancement

All 4 comments

Tested and confirmed that a left-aligned table block is floated left with content wrapping around it. I am not sure clearing the float is the correct route and would like to explore other potential solutions such as being able set the width of a table because it's also possible that someone would want to add a table that is left-aligned that does not clear the float:

screen shot 2018-11-28 at 2 14 55 pm
Tested with WordPress 4.9.8 and Gutenberg 4.5.1 master @ e4fd51cb5 using Firefox 63.0.3 on macOS 10.13.6.

Now I can't find any way to do this.

You can do this by adding an additional CSS class for the block that comes _after_ your table block by clicking on that block, going to Settings > Block > Advanced, adding a class name such as clearfix, then going to Appearance > Customize > Additional CSS and adding CSS such as .clearfix { clear:both; }.

Thanks, @fmonts! We discussed this ticket in the design triage this week (A slack login may be necessary to view that link), and I want to share a few notes:

  • I believe this applies to all floated blocks. This is generally the way that floats behave, and isn鈥檛 necessarily a Gutenberg issue.
  • That doesn't mean we can't solve it though. We should consider giving the user options to adjust this sort of thing, but caveat that it鈥檚 an advanced issue. Most non-technical users will not understand what it means to "clear" a "float" (We just present these as "Alignments" in the UI).
  • While not directly related, it may also be worth keeping an eye on https://github.com/WordPress/gutenberg/issues/13784, which also asks some float-clearing questions.

I suggested this two years ago, but I'll do it again here: Add an alignment option for Clear, alongside all the other alignments. It can apply to any block easily. It would not be mutually exclusive of the other alignments, but additive. It's just a class for clear:both. Or if you want to get fancy, make it a choice of clearleft, clearright, clearboth.

I'm closing this as a duplicate of #10299, which covers the issue for all blocks that have alignments (not just the table block).

Was this page helpful?
0 / 5 - 0 ratings