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

Fix issue with editor styles and fullscreen #10024

Merged
merged 1 commit into from Sep 19, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Sep 19, 2018

This is a curious one.

The topbar in WordPress takes up some space in the editing canvas. When fullscreen mode is engaged, we invoke a negative vertical margin to offset this. But this means the body element is no longer 100% tall, because 32px have been cropped off.

So what happens when an editor style colorizes the body element? Well normally even though the body element isn't as tall as the viewport, it floods the whole thing. See https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/ for all the details.

But in this case, we have a background color on the HTML element. And we need to have that, because otherwise we can't use mix-blend-mode when selecting multiple blocks. This is due to a bug in Chrome where this feature doesn't work unless a background color that isn't none or transparent is explicitly set on the html element.

So there we go — and that's why this PR uses calc to set the height on the body element.

Before:

screen shot 2018-09-19 at 09 38 29

After:

screen shot 2018-09-19 at 09 43 41

Fix issue with editor styles and fullscreen
This is a curious one.

The topbar in WordPress takes up some space in the editing canvas. When fullscreen mode is engaged, we invoke a negative vertical margin to offset this. But this means the _body_ element is no longer 100% tall, because 32px have been cropped off.

So what happens when an editor style colorizes the body element? Well normally even though the body element isn't as tall as the viewport, it floods the whole thing. See https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/ for all the details.

But in this case, we have a background color on the HTML element. And we need to have that, because otherwise we can't use mix-blend-mode when selecting multiple blocks. This is due to a bug in Chrome where this feature doesn't work unless a background color that isn't none or transparent is explicitly set on the html element.

So there we go — and that's why this PR uses calc to set the height on the body element.

@jasmussen jasmussen self-assigned this Sep 19, 2018

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Sep 19, 2018

@talldan

Looks good to me, and thanks for the explanation!

@jasmussen jasmussen added this to the 4.0 milestone Sep 19, 2018

@jasmussen jasmussen merged commit 1339881 into master Sep 19, 2018

2 checks passed

codecov/project 48.77% remains the same compared to 13bee70
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/fix-editor-style-crop branch Sep 19, 2018

@slimmilkduds

This comment has been minimized.

Show comment
Hide comment
@slimmilkduds

slimmilkduds Sep 19, 2018

I’m have no idea how to test the stuff you guys do on Git, I just download the latest rc and complain :)

But from the looks of it this would likely fix the issue I mentioned in Slack

slimmilkduds commented Sep 19, 2018

I’m have no idea how to test the stuff you guys do on Git, I just download the latest rc and complain :)

But from the looks of it this would likely fix the issue I mentioned in Slack

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 19, 2018

Contributor

Thanks, @slimmilkduds, this will land in v4.0. If by then your issue remains, please feel free to ping me, or open a ticket and CC me.

Contributor

jasmussen commented Sep 19, 2018

Thanks, @slimmilkduds, this will land in v4.0. If by then your issue remains, please feel free to ping me, or open a ticket and CC me.

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