New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add float clearing functionality to blocks #4127

Closed
afercia opened this Issue Dec 21, 2017 · 10 comments

Comments

Projects
None yet
9 participants
@afercia
Copy link
Contributor

afercia commented Dec 21, 2017

Noticed during WordCamp Rome contributor day users testing session. /cc @johnbillion

Gutenberg gives users the ability to easily float some block types (e.g. images, pull quotes) to the left or right and have the following blocks content wrap around the floated one:

screen shot 2017-12-21 at 15 21 33

This may or may not be the desired layout. What if I want to clear the following block to make it not wrap the image? For example:

screen shot 2017-12-21 at 15 21 53

The only way I've found so far is to add new empty lines to push down the following block. Worth noting this is not new to Gutenberg, I think users do this also in the classic editor but it's an ugly practice, it produces lots of unsemantic, empty, paragraphs, it's not responsive, etc.

Gutenberg is an excellent opportunity to offer users a better option 🙂 I'd propose to introduce a simple, effective, way to "clear" a block. It should be something very intuitive, something users can understand ("clear" is too technical), and something that aims to produce better, cleaner, more semantic markup.

@danielbachhuber danielbachhuber changed the title How to clear floated blocks? Add float clearing functionality to blocks Jan 19, 2018

@danielbachhuber

This comment has been minimized.

Copy link
Member

danielbachhuber commented Jan 19, 2018

As a workaround, if the theme implements some form of clearfix class, the class could be added to the next block to clear the float.

Alternatively, a clearfix block could be implemented to provide Gutenberg-specific UX for this.

@karmatosed

This comment has been minimized.

Copy link
Member

karmatosed commented Mar 7, 2018

I think this is quite an advanced feature for people to understand clearing. Do nested blocks solve this (maybe more in future)?

@webtrainingwheels

This comment has been minimized.

Copy link

webtrainingwheels commented Apr 17, 2018

And herein lies the rub with calling these content fragments, "blocks." This is one of the ways in which they simply do not act like blocks, in the sense that the alignment makes them open-ended and not closed.

Whole-heartedly agree with OP that Gutenberg is an excellent opportunity to address this pre-existing issue. Also agree that "Clearing" should not be the user-facing verbiage for this feature.

People understand the concept of "I want my next 'block' of content below this block, not next to it" even if they don't understand what 'clearing the float' and 'floats' are.

Ideas:

  • A "new section" button/verbiage. This automatically clears the float and places the next block of content after that.
    -- could also triggered by x number of Enter/Return presses, similar to the way a paragraph is triggered by one Enter/Return press.

  • A "block position" control to place a block next to or below the previous block (possibly only available when a float-y alignment has been selected)

@danielbachhuber

This comment has been minimized.

Copy link
Member

danielbachhuber commented May 17, 2018

Filed against WordPress 5.0 because this needs to addressed in conjunction with #4010 and #6634

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Jul 9, 2018

This can also be achieved with a spacer block.

image

@afercia

This comment has been minimized.

Copy link
Contributor

afercia commented Jul 9, 2018

Hm as the Spacer uses a fixed height in pixels, it probably won't work well in a responsive layout where the text reflows and also the image can be responsive.

@aristath

This comment has been minimized.

Copy link

aristath commented Jul 9, 2018

Just my 2c here:

Though we've been using floats & clearfixes for more than a decade, they are no longer necessary and should be avoided if possible. clearfixes are more of a hack than a best practice.
The example in the OP should (ideally) not be allowed, and instead users would use the block from #7414
However, if floating blocks is allowed, then we should also allow clearfix. One cannot exist without the other efficiently... If a user understands "floating", then they also understand "clearing". If we allow one, we should allow the other.
Also I think that adding a new "clearfix" block is a bit of an overkill... if floating is an option then so should clearfixes.

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Aug 9, 2018

@afercia Floats do not really work well for responsive design in the first place.

All the issues with floats make me think that perhaps #4314 is actually the right way to go after all.

@jasmussen

This comment has been minimized.

Copy link
Contributor

jasmussen commented Sep 26, 2018

Could we add a "clear left & right aligned items" toggle to the Spacer block and the Separator block? Or perhaps just make those two clear floats by default?

We all know HTML. We all know this is intentional behavior in the spec, and we all know the workarounds and how to fix it. It's quite exotic behavior, and if we are to build a feature into Gutenberg that makes it easy for anyone to address the issue presented, we have to think like a user that perhaps doesn't care about webdesign at all. If you had the issue present in this ticket, what would you do?

The answer is probably insert linebreaks. Yes, this is completely anecdotal speculation, but I doubt any advanced "clear blocks" feature will be discoverable to anyone but those who already know how to address this behavior.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Oct 7, 2018

I'm going to close this as we haven't reached a good proposal. Let's reopen when / if a design implementation becomes a bit more tangible.

@mtias mtias closed this Oct 7, 2018

@mtias mtias removed this from the WordPress 5.0 milestone Oct 7, 2018

@mtias mtias added the Future label Oct 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment