Twenty Fifteen: Body margin in Visual Editor

[Jayjdk]

The body margin in Twenty Fifteen is 83px 0 83px 83px;. While it matches the .entry-content margin on the front-end, it looks very weird on smaller screens. There's a huge white space on the left and top but none to the right. On bigger screens it looks okay (but in my opinion perhaps still too much)

• Small screen: ​http://i.imgur.com/xI0Tt2V.png
• Big screen: ​http://i.imgur.com/jBI9GTi.png

I've attached a patch that uses 40px all around by default and uses media queries to use 83px when the screen is larger than 743px (660 + 83).

• Small screen - After patch: ​http://i.imgur.com/coPAt34.png

[Jayjdk]

Before:

After:

[iseulde]

I agree, this looks weird, even when the window is a bit bigger (>743px) as it looks like the content is aligned right.
Maybe setting a percentage is better. Updated the patch.
Also note that list elements and block quotes may overflow the body, though with 10% it will never overflow html. On the front-end this is adjusted for smaller screen sizes, so I guess we need to do that for the editor too.

[iseulde]

azaozz fixed this partly in [29909]. We need a bigger margin though.

[SergeyBiryukov]

#30033 was marked as a duplicate.

[iamtakashi]

I'm fine with 10%. Since [29911], max-width is broken though.

[iamtakashi]

Replying to iamtakashi:

I'm fine with 10%. Since [29911], max-width is broken though.

The max-width issue will be fixed when the default style is updated in #30038.
Ref: https://core.trac.wordpress.org/ticket/29799#comment:20

[iamtakashi]

max-width issue is resolved in [29986]. Here is the update patch based on the suggestion from avryl.

[azaozz]

Been thinking/testing how to make this work well. We cannot use @media rules inside the editor as the iframe width has little to do with the main window width. It is possible to dynamically add/remove/replace classes on the iframe body and set the margins and font sizes with them. However that makes the editor look "strange" at window widths that are close to the breakpoints for collapsing the menu and moving the right widgets area under the editor.

As far as I see there are three options:

• Decide on "average" margins and font size. Most compatible, will look slightly different than the front.
• Dynamically add classes and change margins and font size depending on the main window width. Will look closer to the front-end in a wider window but starts to get problematic when the main window is narrower than 1300px.
• Combination of the above, add a class only when the main window hits the 620px breakpoint.

[iamtakashi]

Relative margin around body in the editor.

[azaozz]

Replying to iamtakashi:

If we stay with the first option above (not adding body classes), thinking if may be better to go with the 17px font-size. Seems it looks good on all window sizes, from 2000px down to phones.

Also, the body margin seem to look better (more "even"?) at 8% 10%.

[iamtakashi]

Replying to azaozz:

If we stay with the first option above (not adding body classes), thinking if may be better to go with the 17px font-size. Seems it looks good on all window sizes, from 2000px down to phones.

Also, the body margin seem to look better (more "even"?) at 8% 10%.

Yes, I personally prefer picking a size rather than trying to recreate pixel perfect reflection of the front which will add a lot of complexity to the editor style.

In this theme, there are three sizes for body text (15px, 17px, and 19px), so I also think the middle, 17px, is a good choice. I'll work on a new patch.

[iamtakashi]

Change editor style with a medium body font size and 7px baseline grid.

[iamtakashi]

Oh, we were working on it at the same time :) I'll merge your changes and mine :)

[azaozz]

No need, already merged yours :)

[azaozz]

In 29987:

Twenty Fifteen: better editor-style.css: slightly smaller fonts, make the body margins relative, fix dependency on the mce-item-table class for tables. Props iamtakashi, fixes #29986

[azaozz]

Just FYI: the mce-item-table class for tables is toggled by the "View => Visual Aids" menu item and is "on" by default but can be turned off (not available in the WordPress default configuration as we don't show the TinyMCE menu).