WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 7 weeks ago

#49843 new defect (bug)

Twenty Nineteen: Fix editor style compatibility with Gutenberg 7.7 and above

Reported by: kjellr Owned by:
Milestone: 5.5 Priority: normal
Severity: normal Version: trunk
Component: Bundled Theme Keywords: needs-testing
Focuses: Cc:

Description

Recent Gutenberg plugin releases have introduced some block markup simplification, and Twenty Nineteen needs to catch up a little bit to retain parity between the front & back end appearance. A few things that are broken right now:

  • Wide alignments sometimes appear only as wide as the text column.
  • Full and wide appear centered on the text column
  • Full-width blocks sometimes do not take up the full width of the page, and other times they cause a horizontal scroll.
  • Wide and full group block children take up the full width of the block by default.

This should be fixed before 5.5, when the changes from the Gutenberg plugin make their way into core again.

Screenshots:

http://cldup.com/8VzysqHvRz.png

http://cldup.com/60QgsXNQmn.png


The good news is that much of this can be fixed by mirroring the front-end styles on the back end. I'm attaching a draft patch here. It needs a lot of testing with various block scenarios (I know there's a bug with standard and wide block appearing to be the same width inside of full-width group blocks for example). So it needs a few iterations before it'll be ready to go. Here's the current state with the patch applied:

http://cldup.com/bmNDyIoAXf.png

http://cldup.com/5IxmGKcqPv.png


cc @joen for some eyes on this in case you have some time.

Attachments (4)

49843.patch (27.6 KB) - added by kjellr 7 weeks ago.
Screenshot 2020-04-08 at 08.29.00.png (568.3 KB) - added by Joen 7 weeks ago.
float broken
Screenshot 2020-04-08 at 08.28.49.png (687.3 KB) - added by Joen 7 weeks ago.
float "fixed"
49843.2.patch (25.0 KB) - added by kjellr 7 weeks ago.

Download all attachments as: .zip

Change History (7)

@kjellr
7 weeks ago

@Joen
7 weeks ago

float broken

@Joen
7 weeks ago

float "fixed"

#1 @Joen
7 weeks ago

Really nice work, Kjell! This makes it vastly improved, and my go-to theme will become my go-to theme again! Wohoo!

The good things:

  • Fullwide works
  • Wide works
  • The slightly-offset-to-the-left works

The floats aren't working well, though, and I think it's a regression of a previous fix that brought us this rule:

.editor-styles-wrapper .wp-block .wp-block {
    width: 100%;
}

Those rules for whatever reason are applied to floated blocks, meaning they always look non-floated:

https://core.trac.wordpress.org/attachment/ticket/49843/Screenshot%202020-04-08%20at%2008.29.00.png

If I apply width: auto to the float wp-block class, then it looks correct:

https://core.trac.wordpress.org/attachment/ticket/49843/Screenshot%202020-04-08%20at%2008.28.49.png

But I wonder, is there a different way to fix this? I believe the reason for the original rule was that top-level blocks have this calc-based width, but child blocks should not have that. So I can think of two other ways to go about this:

1.

.editor-styles-wrapper .wp-block .wp-block {
    width: initial;
}

I can't recall the IE rules here, but maybe this would work?

.is-root-container > .wp-block .wp-block {
    width: 100%;
}

the 2nd seems perfect, as that root container class is new in the plugin. But it won't work in older versions. We would also need to test the 2nd rule carefully with reusable blocks, as I believe they also add the "is-root-container", even though probably they shouldn't.

Thanks Kjell!

#2 @kjellr
7 weeks ago

The floats aren't working well, though, and I think it's a regression of a previous fix that brought us this rule:

Good catch. I think the initial approach is probably the simplest, and I don't think it'll cause any issues. I'd rather avoid targeting .is-root-container, just because I think targeting editor-specific classes has made this file a lot more prone to breaking than it should be.

I've attached another patch. This one fixes that issue, but it does not push the right-aligned items far off to the right of the text column. I think that's fine for now, and it can be fixed in a followup PR. For some reason, I also had to add left and right margins (I think the theme previously relied on those to be provided by Gutenberg, but maybe they are not now?). In any case, here's how that looks now:

https://cldup.com/RJLFDl9lRj.png

This patch also fixes wide alignments inside of full-width group blocks. We should test (both in the current and plugin versions of Gutenberg) with a variety of different layouts to verify that this works well now.

@kjellr
7 weeks ago

#3 @Joen
7 weeks ago

You're the best, Kjell.

Everything is working well now, with and without the plugin. Ship it!

Note: See TracTickets for help on using tickets.