Fix issues with floats and the side UI on wide and fullwide #7223
Conversation
jasmussen
force-pushed
the
fix/float-side-ui-regressions
branch
3 times, most recently
from
2111d4f to
0b65869
Compare
| @@ -69,22 +69,22 @@ | |||
| // The base width of the title should match that of blocks even if it isn't a block | |||
| .editor-post-title { | |||
| @include break-small() { | |||
| padding-left: $block-side-ui-padding; | |||
| padding-right: $block-side-ui-padding; | |||
| padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance; | |||
There was a problem hiding this comment.
It deserves it's own variable, given the complexity and the number of times it is used. It probably will allow to simplify it to:
$block-sth = $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance;| content: none; | ||
| // Hide block outline when an image is floated. | ||
| .editor-block-list__block-edit { | ||
|
|
| @include break-small() { | ||
| padding-left: $block-side-ui-padding; | ||
| padding-right: $block-side-ui-padding; | ||
| padding-left: $block-side-ui-width + $block-padding + $block-side-ui-clearance + $block-side-ui-clearance; |
There was a problem hiding this comment.
The same formula as the one above.
| @include break-small() { | ||
| margin-left: -$block-side-ui-padding + $border-width; | ||
| margin-right: -$block-side-ui-padding + $border-width; | ||
| margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; |
There was a problem hiding this comment.
This one is slightly different comparing to the stuff above, is it intended to have $block-side-ui-clearance included only once?
| @@ -74,7 +74,7 @@ $empty-paragraph-height: $text-editor-font-size * 4; | |||
| right: $item-spacing; // show on the right on mobile | |||
|
|
|||
| @include break-small { | |||
| left: -$icon-button-size - $block-side-ui-clearance - $block-parent-side-ui-clearance; | |||
| left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance; | |||
There was a problem hiding this comment.
Maybe this should be the base for the variable I proposed above?
| } | ||
|
|
||
| // Stack borders on mobile. | ||
| border-top: 1px solid transparent; |
There was a problem hiding this comment.
What do you think about using the following:
border: 1px solid transparent;
border-width-left: 0;
border-width-right: 0;
@include break-small() {
border-width: 1px;
}Would it read better?
This also positions the toolbar a little bit more accurately when wide and fullwide.
jasmussen
force-pushed
the
fix/float-side-ui-regressions
branch
from
0b65869 to
8f221f5
Compare
|
Great feedback. I created a new variable for the block container padding, |
|
All good, let me test locally before I 👍 this PR. |
|
For the record, two issues I found which I shared already with @jasmussen in DMs:
|
|
Great feedback. I pushed a fix to the mobile toolbar being cut on fullwide blocks:
I think because this PR has been in the queue for a bit, a separate refactor changed the behavior for the side UI to behave the same. That is, it shows up above the block instead, and in the case of the movers, they are hidden until the > 1000 breakpoint. The argument for unification of those two is that themes might have a different implementation of "wide", so we need to be a bit more flexible with the side UI there. Whether it's good to hide the movers between 600 and 1000 I think is fair to look at separately. |
|
I noticed that movers are hidden for all align types but |
|
Yay, thank you! And yes, I have some improvements coming in a separate pr for floats. |
There are a few issues in master:
Edit: I added a few more fixes:
This PR fixes those. Screenshots:
Test on mobile and desktop, frontend and backend, that wide and fullwide and normal images and blocks look fine and don't cause horizontal scrollbars. Also test that floats behave as they should.