Fix floats in a full-bleed world #799
Conversation
|
|
||
| @include break-medium() { | ||
| margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } ); | ||
| } |
There was a problem hiding this comment.
Aside: Do we expect block authors to implement this CSS styles (which are not that easy) in each floated block
There was a problem hiding this comment.
Good aside. And no, I've been thinking of it this way:
- Full-width can be implemented in many different ways, we've chosen one of many ways
- Theme authors should probably opt-in to the feature, probably something like
add_theme_support( 'full-width-images' ); - When the theme has opted in, images simply get
align-full-widthas a CSS class. Or something in that vein.
There was a problem hiding this comment.
I'm asking about block authors too. I mean, should we move these styles outside the image block stylesheet and provide a way to reuse it across different blocks.
There was a problem hiding this comment.
Ah yes, good point. Taking a look.
There was a problem hiding this comment.
Should we move the visual styles out as part of this PR, or as part of for example #729? Tackling that one seems like a good successor to this one, as video should also have full width as an option.
|
Here is the undesired behaviour
|
|
Thanks for the screenshot, taking a look! |
This seems like the right thing to do, because videos normally have an intrinsice width and height, and so they would clear floats naturally just like how an image following a floating would. But because we are using CSS trickery to make the video responsive, we are essentially pulling the video out of the flow, which means it's technically abs positioned. By adding a clear, we emulate the behavior. The edgecases where the clear for an embed would be undesired are arguably edgecases.
|
Upon discussing this with @mtias I've decided to close this branch, go back to the max-width, then take a pass at using JS for full-width images. |
This also adds a few improvements from the now deleted branch, #799, notably: - clearing for video blocks. The responsive trickery means we have to, or we will get odd behavior otherwise - better collapsing margins fix for the toolbar.
This also adds a few improvements from the now deleted branch, #799, notably: - clearing for video blocks. The responsive trickery means we have to, or we will get odd behavior otherwise - better collapsing margins fix for the toolbar.
This also adds a few improvements from the now deleted branch, #799, notably: - clearing for video blocks. The responsive trickery means we have to, or we will get odd behavior otherwise - better collapsing margins fix for the toolbar.
This also adds a few improvements from the now deleted branch, #799, notably: - clearing for video blocks. The responsive trickery means we have to, or we will get odd behavior otherwise - better collapsing margins fix for the toolbar.
This also adds a few improvements from the now deleted branch, #799, notably: - clearing for video blocks. The responsive trickery means we have to, or we will get odd behavior otherwise - better collapsing margins fix for the toolbar.
This PR seeks to address #784 by applying an invisible and
calculated outer margin to floats. This margin just happens to match the space surrounding the 700px max-width of the visual editor, making it look right.I realize the calc looks advanced, but it really simplifies the responsive CSS.