Fix: Clear floats on specific successive blocks that use alignment tool (Issue 13784) #13819
Conversation
Improves frontend/backend consistency of floats. Themes (Including Twentynineteen) generally clear blocks with center alignment if they come straight after a block with left/right float. To recreate: 1- Add two blocks with alignment options, such as the Image block. 2- Set first block to align to left/right and set second block to align to center. 3- Second block should be 100% the width and clear the float from the first block.
codetipi
requested review from
gziolo,
noisysocks,
talldan and
youknowriad
as code owners
codetipi
changed the title
codetipi
changed the title
| @@ -305,6 +305,11 @@ | |||
| border-bottom: $border-width solid $light-gray-500; | |||
| bottom: auto; | |||
| } | |||
|
|
|||
| // Clear floats of centered block when previous sibling block has left/right float. | |||
| & + .editor-block-list__block[data-align="center"] { | |||
There was a problem hiding this comment.
This is not loaded in the frontend. Is this the expectation or are we expected to load a similar style in the frontend too?
There was a problem hiding this comment.
Yeah this is the expectation, as themes will most likely already have code to deal with this on the frontend. Here is TwentyNineteen's: https://github.com/WordPress/twentynineteen/blob/d6f9595f376f45d8ba0f203d9c3e3a393a4b3c18/sass/modules/_alignments.scss
That theme clears all blocks aligned to center:
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
But I wasn't sure if being this opinionated inside the editor was desired, which is why the PR only targets centered blocks that come after a left/right aligned block.
Do you think it should be more opinionated than that?
There was a problem hiding this comment.
This sounds correct I think. In the editor, the center align has to be independent of any floats, otherwise it doesn't make much sense, since it will obey to its parent container anyway, if there is any advanced layout.
Currently it really makes no sense:
gziolo
added
the
General Interface
…milar to TwentyNineteen approach)
gziolo
added
the
Good First Review
| @@ -368,6 +369,11 @@ | |||
| } | |||
| } | |||
|
|
|||
| // Center | |||
| &[data-align="center"] { | |||
There was a problem hiding this comment.
Have you considered doing &[data-align] [data-align="center"] to be a bit more specific to situations in where it's following another floated item?
There was a problem hiding this comment.
This is a good idea, however I would expect my block to not float no matter what it follows. @obenland do you have a specific example where this would be bad?
There was a problem hiding this comment.
yeah, I have no idea what I meant there. I tested it locally and I think this is good to go.
This was discussed in the #design triage today and there was consensus around working toward the expected behavior. |
gziolo
added
the
First-time Contributor
|
@gziolo @noisysocks I can't resolve conflicts, otherwise I would have. That additional line can probably be removed in the process, but other than that I think this is a good improvement. |
There are two ways to do it. @codetipi does it or we create another branch which contains commits from the current one and it's rebased on top of the new branch. |
|
Hey @codetipi Could you give us a status update? Let us know if you need help or anything else to gain movement in this PR. Thanks. |
noisysocks
added
the
[Status] Stale
|
There's some conflicts here. The branch will need to be rebased with the latest changes in |
|
@noisysocks The code was moved to a separate PR: I think it's probably worth closing this now as it's been quite a while without updates, despite a few pings (and it can always be reopened). |
Description
Fixes #13784
If you have two blocks that can be aligned (i.e. Image block), and the first block is aligned to the 'left', while the second is aligned to 'center' - The second block doesn't have
clear: both;and therefore appears next to the floated left block.Steps to reproduce the behavior:
Expected behavior
The container of a block with an explicit center alignment should be full width and be cleared correctly, regardless of any blocks that exist before it.