Fix wide image jumping. #12305
Fix wide image jumping. #12305
Conversation
Fixes #12292. This PR fixes an issue where the block toolbar would cause an image to jump downwards when the wide or fullwide buttons were pressed. Recently as part of a floats refactor, we also refactored how the block toolbar worked. This meant the removal of a floats rule to the toolbar itself, because it was both unnecessary and interfered with adjacent floats. This PR restores that rule, but for wide and fullwide only, fixing the regression.
jasmussen
added
the
[Type] Regression
| // This float rule takes the toolbar out of the flow, without it having to be absolute positioned. | ||
| // This is necessary because otherwise the mere presence of the toolbar can push down content. | ||
| // Pairs with relative rule on line 49. | ||
| float: left; |
There was a problem hiding this comment.
Didn't we remove this for another reason? Just want to make sure we're not regressing something else?
There was a problem hiding this comment.
We removed it because it was one way to take the toolbar out of the flow of the post. But that method for taking it out of the flow became redundant with other refactors to the block toolbar, and so we took the rule out partially because it was redundant, and partially to improve how float adjacent blocks handled.
For example you might have a left floated image with a paragraph after it. With the float rule on the toolbar intact, you'd get this:
By removing the float rule, and instead applying a position: absolute (the one we override in that code above), we get this:
So will this regress other things? No, it shouldn't, because it adds only a single rule that's scoped to wide and fullwide blocks, and since those types of blocks should always clear floats that preceed them, there shouldn't be situations where this float would mis-position the toolbar.
If we wanted to test, the test case would be to have a float followed by a wide image, or a float followed by a fullwide image, and then testing that the block toolbar looks right in both sitautions. Which in my testing it does.
There was a problem hiding this comment.
Thanks for the detailed explanation, that makes sense to me 👍
There was a problem hiding this comment.
👍 👍
It's a good question to be asked, an important one for deciding if/when to merge.
Fixes #12292. This PR fixes an issue where the block toolbar would cause an image to jump downwards when the wide or fullwide buttons were pressed. Recently as part of a floats refactor, we also refactored how the block toolbar worked. This meant the removal of a floats rule to the toolbar itself, because it was both unnecessary and interfered with adjacent floats. This PR restores that rule, but for wide and fullwide only, fixing the regression.
Fixes #12292.
This PR fixes an issue where the block toolbar would cause an image to jump downwards when the wide or fullwide buttons were pressed.
Recently as part of a floats refactor, we also refactored how the block toolbar worked. This meant the removal of a floats rule to the toolbar itself, because it was both unnecessary and interfered with adjacent floats. This PR restores that rule, but for wide and fullwide only, fixing the regression.
I also fixed a small math issue with the toolbar-width on wide images.
It's a very small regression, and this doesn't need to be in 5.0.
But I'm adding it to the 4.6 milestone regardless, as a means of offering it up for inclusion review. Feel free to put in another milestone.