Content width in block editor styles expects padding

[SergeyKovalets]

When using the block editor, the content width while creating/editing a post is different from what is displayed after publishing on the site. When creating a post, I can't be sure how it will look once published.

If I use the classic editor, everything is fine — the way it looks while creating is exactly how it looks after publishing.

[sabernhardt]

All themes from Twenty Ten to Twenty Seventeen added 30 pixels to the width of .wp-block 'to account for padding' in [44152]. WordPress 5.4 removed that padding, but the number was already inaccurate with WP 5.0. (Left and right padding were set to 14 pixels for small screens, or 43 pixels each for larger screens.)
Correction: the old values were accurate originally, accounting for padding plus a border and the negative margins on larger screens.

To accommodate older versions of WordPress, Twenty Fourteen probably could set the width like this in editor-blocks.css:

.wp-block {
	max-width: 474px;
}

.wp-block:where(.editor-post-title__block, .editor-block-list__block, .editor-default-block-appender) {
	max-width: 504px; /* account for padding in older WordPress versions */
}

[perfildoug]

Is anyone currently working on this? If not, I’d like to contribute a patch.

[soyebsalar01]

If the content width in the block editor looks different from the live site, it’s usually because the theme doesn’t apply the same styles in the editor as it does on the frontend.

To fix this, you can add some custom styles to the block editor so it better matches your site layout. Here’s how:

Open your theme’s functions.php file.

Add this line if it’s not there already:

add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );

Then, create a file called editor-style.css in your theme folder.

Inside that file, you can add CSS to control the content width in the editor — something like:

.wp-block {

max-width: 800px; /* or whatever matches your site's content width */

}
This will make the block editor look more like your actual post once it's published.

[sabernhardt]

@perfildoug Feel free to add a patch for these themes. Thanks!

[riccardodicurti]

Ciao! Just to clarify: is better to address all similar issues in a single patch, or to fix the specific problem reported in this ticket only?

[sabernhardt]

The changes are small and very similar, so all the themes could be grouped together in one patch. However, committers and/or testers might appreciate having them in separate diff files (identifying the theme in each file name) or in separate pull requests.

Before you create more patches, I should question whether my suggested extra ruleset is worth adding.

• If we include the ruleset for old WordPress versions, I would want a comment in the stylesheet to explain why it lists three class names that the editor does not use anymore.
• The classes come from ​'editor-blocks' stylesheets before [44152], but another class might belong in the list too.
• The selectors could simply list the classes instead of putting them inside .wp-block:where():

  .editor-post-title__block,
  .editor-block-list__block,
  .editor-default-block-appender {
  	max-width: 504px; /* account for padding in older WordPress versions */
  }
  

• For the 2.3% of WordPress sites still using versions 5.0 to 5.3, have many activated one of these eight themes and would update the theme without updating core?
• Without the legacy ruleset, the blocks would become 30 pixels narrower in the editor with an old WordPress version. Then again, the content width has been 30 pixels too wide for five years, and it took this much time to identify and report the mismatch.

[wildworks]

This ticket has been inactive for several months, so I'm changing the milestone to 7.0. If you are able to commit this for the 6.9 release, please feel free to change the milestone back.