Adjust max-width for alignaleft blocks, Clean up line breaks + center alignment for cover blocks #619

kjellr · 2018-11-16T18:15:44Z

Fixes #612

This PR does a few things:

Adjusts the max-width of all left-aligned blocks to match the max-width of all right-aligned blocks.
Decreases the margins for left/right cover image blocks to avoid line breaks when we don't need them.
Adds a hyphens: auto rule to add hyphens to line breaks (when the browser supports it)
Removes our aligncenter styles for the cover image block. These were trying to fix a bug in Gutenberg, which has since been fixed upstream:
Override our global aligncenter CSS rules for the cover block gutenberg#11990

Before:

After:

These are attempting to fix broken Gutenberg styles, and should be fixed upstream.

... at all breakpoints.

This isn't used for alignright block, so it produces uneven styles.

allancole

Awesome 👍. I tested all the Cover block combinations and they all check out. Here’s just a few:

kjellr added 4 commits November 16, 2018 11:27

Remove our aligncenter cover overrides.

c893fa0

These are attempting to fix broken Gutenberg styles, and should be fixed upstream.

Set padding to 1rem for all alignleft/right covers

894c3f5

... at all breakpoints.

Add hyphens rule to the cover block

75ccf16

Remove extra max-width rule for alignleft blocks.

9131799

This isn't used for alignright block, so it produces uneven styles.

kjellr added the bug Something isn't working label Nov 16, 2018

kjellr requested a review from allancole November 16, 2018 18:15

kjellr mentioned this pull request Nov 16, 2018

Cover blocks does not look the same in the editor and on the front. #612

Closed

allancole approved these changes Nov 16, 2018

View reviewed changes

kjellr merged commit ef10487 into master Nov 16, 2018

kjellr deleted the fix/cover-image-styles branch November 16, 2018 18:35

Provide feedback