WordPress.org

Make WordPress Core

Opened 11 days ago

Last modified 10 days ago

#48526 assigned defect (bug)

TwentyNineteen: Update margins in editor styles to address upcoming block editor margin changes

Reported by: Joen Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:
PR Number:

Description

In https://github.com/WordPress/gutenberg/pull/17877, the left and right margins of all blocks are refactored. This change will make it easier for block and theme developers to create more complex designs, because those margins are now effectively gone in most cases, meaning there's nothing to compensate for.

TwentyNineteen compensates for those margins that have now been removed. In doing so the layout now looks broken.

This patch updates the TwentyNineteen editor styles to address that.

Please test by running the latest master of the Gutenberg plugin, WordPress version doesn't matter, and TwentyNineteen with this patch applied. Test images, galleries, cover and other blocks that can receive full-wide alignment, and verify there is no horizontal scrollbar in the editor. Then test with a full-wide group block, with and without background, verify there's no horizontal scrollbar. Then test a fullwide image inside a fullwide group block and verify there are no horizontal scrollbars.

Finally verify that the little gray "tick" that sits above headlines, is also correctly aligned above the Title.

Attachments (7)

twentynineteen-margins.diff (3.1 KB) - added by Joen 11 days ago.
Git patch to fix margins.
before.png (1.6 MB) - added by Joen 11 days ago.
Image showing "before", notice the horizontal scrollbar and the offset title tick.
after.png (2.7 MB) - added by Joen 11 days ago.
After the patch is applied, notice correct margins and tick position.
groups.png (2.8 MB) - added by Joen 11 days ago.
Fullwide background colored groups, after this patch, notice the margins of text are flush.
twentynineteen-margins.1.diff (2.8 KB) - added by Joen 10 days ago.
Git patch to fix margins version 2.
group after patch 2.png (325.2 KB) - added by Joen 10 days ago.
Paragraph followed by a fullwide group with paragraphs inside. They should be flush in margins.
group after patch 2 b.png (162.7 KB) - added by Joen 10 days ago.
Same as previous, but with a background on the fullwide group.

Change History (11)

@Joen
11 days ago

Git patch to fix margins.

@Joen
11 days ago

Image showing "before", notice the horizontal scrollbar and the offset title tick.

@Joen
11 days ago

After the patch is applied, notice correct margins and tick position.

@Joen
11 days ago

Fullwide background colored groups, after this patch, notice the margins of text are flush.

#1 follow-up: @Joen
11 days ago

I hope this is the right place to patch TwentyNineteen.

I'm not sure about the best timing for this to go in — it should not be in 5.3 as the margins change is not part of that release. But the block editor change is very likely to land in the next version of the Gutenberg plugin release. I will defer to good advice on when and how to roll out this change.

To clarify, if this patch goes into the theme for a user that is not running the plugin, the editor will only look _slightly_ broken. Specifically, full wide blocks will not be quite as full as they should be, and the tick above the title will be slightly offset to the left. But this is cosmetic only, and notably there won't be any horizontal scrollbars. So I do think it's safe to patch into trunk right after the 5.3 final release, if that's how it's usually done.

For the record, here's the block editor dev note:

In <a href="https://github.com/WordPress/gutenberg/pull/17877">17877</a> a change was made to how blocks are laid out in the block editor. Previously, every block would come with padding built in, left and right, and negative margins to compensate. These margins and paddings have been refactored away. This should drastically simplify the CSS necessary to style blocks, for block developers and for WordPress themers wanting to style the editor.

The refactor may cause issues in existing block or editor styles that have compensated for the previous margins/paddings. If your block or editor style looks off, a likely fix is to remove the styles used to compensate.

#2 @SergeyBiryukov
10 days ago

  • Component changed from Themes to Bundled Theme
  • Milestone changed from Awaiting Review to 5.4

#3 in reply to: ↑ 1 @SergeyBiryukov
10 days ago

Replying to Joen:

I hope this is the right place to patch TwentyNineteen.

It is, thanks for the patch :)

There's a commented out rule in line 934 of style-editor.scss, is that intentional?

//left: calc(-12.5% - 72px);

@Joen
10 days ago

Git patch to fix margins version 2.

@Joen
10 days ago

Paragraph followed by a fullwide group with paragraphs inside. They should be flush in margins.

@Joen
10 days ago

Same as previous, but with a background on the fullwide group.

#4 @Joen
10 days ago

Great catch. This property was one I experimented with but it wasn't necessary.

In testing this, I realized a mistake in the previous patch where a full wide group with no background had incorrect margins. The patch I just uploaded should address that.

I'm making this patch on another machine with a different local version of WordPress, so I hope it still works as it should, otherwise let me know.

Note: See TracTickets for help on using tickets.