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

Scope the rule that adds a white bg on the html element #6908

Merged
merged 1 commit into from May 23, 2018

Conversation

Projects
None yet
2 participants
@jasmussen
Contributor

jasmussen commented May 23, 2018

Since merging in the PR that makes the editing canvas friendly to themes, we've added a CSS rule to the html element that simply adds a background color. This is due to a bug in Chrome that makes mix-blend-mode only work when a background is actually applied. See https://css-tricks.com/almanac/properties/m/mix-blend-mode/

However this HTML element rule was unscoped, and in case you run Gutenberg in other implementations that don't include the wp-admin, this can cause you to run into this following obscure and exotic CSS situation: https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

Ideally we had a different CSS class on the HTML element than wp-toolbar, however it doesn't seem WordPress has a plugin API to let you add that. Instead of jumping into CSS wizardry, I simply latched on to the existing class, which appears to be wp-admin only.

Any thoughts? Any different approaches you'd recommend?

Mix-blend-mode could be revisited, I could potentially use a background-filter instead. But it's a good way to ensure contrast to the multi selection color.

Scope the rule that adds a white bg on the html element
Since merging in the PR that makes the editing canvas friendly to themes, we've added a CSS rule to the `html` element that simply adds a background color. This is due to a bug in Chrome that makes mix-blend-mode only work when a background is actually applied. See https://css-tricks.com/almanac/properties/m/mix-blend-mode/

However this HTML element rule was unscoped, and in case you run Gutenberg in other implementations that don't include the wp-admin, this can cause you to run into this following obscure and exotic CSS situation: https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

Ideally we had a different CSS class on the HTML element than `wp-toolbar`, however it doesn't seem WordPress has a plugin API to let you add that. Instead of jumping into CSS wizardry, I simply latched on to the existing class, which appears to be wp-admin only.

Any thoughts? Any different approaches you'd recommend?

Mix-blend-mode _could_ be revisited, I could potentially use a background-filter instead. But it's a good way to ensure contrast to the multi selection color.

@jasmussen jasmussen self-assigned this May 23, 2018

@jasmussen jasmussen requested a review from WordPress/gutenberg-core May 23, 2018

@mkaz

mkaz approved these changes May 23, 2018

👍 Scope looks good and fixes issue

@jasmussen jasmussen merged commit 64d3355 into master May 23, 2018

2 checks passed

codecov/project 46.31% remains the same compared to 5f3c7f8
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the fix/scope-html-rule branch May 23, 2018

@jasmussen jasmussen added this to the 3.0 milestone May 23, 2018

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