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 wide regression #10228

Merged
merged 2 commits into from Sep 28, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Sep 28, 2018

This fixes a regression where wide images would cause horizontal scrollbars. Try the demo content in master, note that there are horizontal scrollbars. Then try this branch, note that they are gone.

The issue: the margins on the figure weren't being reset left and right on wide image.

I will investigate why this regression happened, I suspect it was related to the side-padding normalization.

Fix wide regression
This fixes a regression where wide images would cause horizontal scrollbars. Try the demo content, for example.

I will investigate why this regression happened, I suspect it was related to the side-padding normalization.

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

@jasmussen jasmussen self-assigned this Sep 28, 2018

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

@jorgefilipecosta

Things looked great in my tests 👍 I'm curious about the reason of this regression and if we can fix the problem by removing/changing the rule that caused this problem instead of adding the additional rules. But given that this bug is very noticeable feel free to merge and we can iterate later if we find a better approach.

Show outdated Hide outdated packages/editor/src/components/block-list/style.scss Outdated
@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 28, 2018

Contributor

Thank you Jorge for the review, but I discovered this issue was bigger than just for wide and fullwide:

screen shot 2018-09-28 at 13 27 56

it's even for normal images that are inserted.

We used to simply set margin: 0; on the figure, but this caused issues with captions and spacing between blocks. Now we only reset the left and right margins.

Requesting another review because it's a biggish change. @kjellr can you look also?

Contributor

jasmussen commented Sep 28, 2018

Thank you Jorge for the review, but I discovered this issue was bigger than just for wide and fullwide:

screen shot 2018-09-28 at 13 27 56

it's even for normal images that are inserted.

We used to simply set margin: 0; on the figure, but this caused issues with captions and spacing between blocks. Now we only reset the left and right margins.

Requesting another review because it's a biggish change. @kjellr can you look also?

@jasmussen jasmussen requested a review from kjellr Sep 28, 2018

@kjellr

kjellr approved these changes Sep 28, 2018

This is working on my end. I'm also a little puzzled as to why this regression happened but these updated styles do fix it. I didn't find any new errors on mobile/various browsers.

Before

before

After

fixed

@jasmussen jasmussen merged commit dff799b into master Sep 28, 2018

2 checks passed

codecov/project 48.56% (-0.07%) compared to 5c2085a
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the fix/wide-regression branch Sep 28, 2018

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