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 classic block toolbar regression #10443

Merged
merged 3 commits into from Oct 10, 2018

Conversation

Projects
None yet
4 participants
@youknowriad
Contributor

youknowriad commented Oct 9, 2018

Fix a small visual regression in the classic block's toolbar introduced in #10397

@youknowriad youknowriad added this to the 4.0 milestone Oct 9, 2018

@youknowriad youknowriad self-assigned this Oct 9, 2018

@youknowriad youknowriad requested review from gziolo and WordPress/gutenberg-core Oct 9, 2018

@gziolo gziolo requested a review from jasmussen Oct 9, 2018

@gziolo

gziolo approved these changes Oct 9, 2018

Code wise looks good. I would love to have 👍 from @jasmussen to ensure it looks exactly the same as in 3.9 :)

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 9, 2018

Contributor

Looking now.

Contributor

jasmussen commented Oct 9, 2018

Looking now.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 9, 2018

Contributor

Looks good, but it also looks like there's a separate regression.

Master:

screenshot 2018-10-09 at 18 21 56

This branch:

screenshot 2018-10-09 at 18 22 38

3.9:

screenshot 2018-10-09 at 18 24 14

Notice how the paragraphs below, in both cases, has a lineheight of 1.3 as opposed to 1.8 as it should. It looks like a lineheight rule from .mce-content-body is bleeding in:

screenshot 2018-10-09 at 18 24 46

This is supposed to fix it:

screenshot 2018-10-09 at 18 25 17

But obviously that's not working anymore.

Adding to the p itself should fix it:

screenshot 2018-10-09 at 18 25 11

But that's also not a nice fix, especially since we want editor styles to be as close to the stock experience as possible. It would be nice to figure out why that extra rule is suddenly there.

Contributor

jasmussen commented Oct 9, 2018

Looks good, but it also looks like there's a separate regression.

Master:

screenshot 2018-10-09 at 18 21 56

This branch:

screenshot 2018-10-09 at 18 22 38

3.9:

screenshot 2018-10-09 at 18 24 14

Notice how the paragraphs below, in both cases, has a lineheight of 1.3 as opposed to 1.8 as it should. It looks like a lineheight rule from .mce-content-body is bleeding in:

screenshot 2018-10-09 at 18 24 46

This is supposed to fix it:

screenshot 2018-10-09 at 18 25 17

But obviously that's not working anymore.

Adding to the p itself should fix it:

screenshot 2018-10-09 at 18 25 11

But that's also not a nice fix, especially since we want editor styles to be as close to the stock experience as possible. It would be nice to figure out why that extra rule is suddenly there.

@youknowriad

This comment has been minimized.

Show comment
Hide comment
@youknowriad

youknowriad Oct 9, 2018

Contributor

@jasmussen I'm not having the same results as you in this branch. Could you have tested "master" instead of this branch?

Contributor

youknowriad commented Oct 9, 2018

@jasmussen I'm not having the same results as you in this branch. Could you have tested "master" instead of this branch?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Oct 9, 2018

Contributor

Sorry forgot to mention, you have to click the classic block so it initializes, only then the line height issue persists.

This is an issue both in this branch and master and okay to fix separately. I have to help with the kids but can look later.

Contributor

jasmussen commented Oct 9, 2018

Sorry forgot to mention, you have to click the classic block so it initializes, only then the line height issue persists.

This is an issue both in this branch and master and okay to fix separately. I have to help with the kids but can look later.

@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Oct 10, 2018

Member

It looks okey on Desktop viewport.

Mobile experience isn't perfect, but that might be also the case for master:

screen shot 2018-10-10 at 10 54 25

Unrelated issue is in-between lines inserter:

screen shot 2018-10-10 at 10 55 40

You can't even trigger it when hovering on the top of the selected Classic block.

Member

gziolo commented Oct 10, 2018

It looks okey on Desktop viewport.

Mobile experience isn't perfect, but that might be also the case for master:

screen shot 2018-10-10 at 10 54 25

Unrelated issue is in-between lines inserter:

screen shot 2018-10-10 at 10 55 40

You can't even trigger it when hovering on the top of the selected Classic block.

@@ -33,3 +31,7 @@ ul ul,
ol ul {
list-style-type: circle;
}
.mce-content-body {

This comment has been minimized.

@jasmussen

jasmussen Oct 10, 2018

Contributor

👍 👍

An ideal fix would be to not load /wp-includes/js/tinymce/skins/lightgray/content.inline.min.css at all. I think that should also fix this issue.

But if we can't do that, this seems like the better fix.

@jasmussen

jasmussen Oct 10, 2018

Contributor

👍 👍

An ideal fix would be to not load /wp-includes/js/tinymce/skins/lightgray/content.inline.min.css at all. I think that should also fix this issue.

But if we can't do that, this seems like the better fix.

@youknowriad youknowriad merged commit 27015c2 into master Oct 10, 2018

2 checks passed

codecov/project 49.48% remains the same compared to 085a605
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the fix/classic-toolbar-regression branch Oct 10, 2018

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