When I designed this website with GeneratePress I decided to have a single post template with a full-width layout to have the possibility to add a fullscreen section where to display categories, blog post title, some metadata about the author and the date and the thumbnail image. Then I set a specific contained width (60ch) for the post content itself. You can see this layout on any of my blog post.

After doing it I realized there was a little issue. When I started to create a New Post anything worked well and the content of the article inside the Gutenberg editor was constrained in a fixed width of 760px. Not the same of my front-end, but very similar. I was happy with it.

The issue showed once the post was published or saved as draft and I wanted to edit it a little bit a post. Opening the editor both the post title and the content was displayed in full-width, as in the image below.

I started to take a look on Google on how avoid this issue and bring back my post content in a contained width also after publishing or saving it as draft. With a fantastic help from GeneratePress Support Team, one of the best out there, I finally found a way to overcome the annoying issue.

Set a fixed width for content in the editor

To fix the back-end issue it is possible to use the WordPress Hooks called “enqueue_block_editor_assets” and “wp_add_inline_style“. Using the first one you can enqueue CSS or JavaScript files inside the editor and with the second one it is possible to add extra CSS styles to a registered stylesheet.

In my case I added a “–content-widht” of 760px, the original one of GeneratePress, using the handle “wp-edit-blocks” to “.post-type-post .editor-styles-wrapper .is-root-container” and “.edit-post-visual-editor__post-title-wrapper“.

Below you can see the code snippet to be added to “functions.php“

/**
 * Add styles to editor
 */
function mb_add_styles_to_editor() {
  /* Editor Width to 760px */
  wp_add_inline_style( 'wp-edit-blocks', '.post-type-post .editor-styles-wrapper .is-root-container, .edit-post-visual-editor__post-title-wrapper {--content-width: 760px !important;}');
}
add_action( 'enqueue_block_editor_assets', 'mb_add_styles_to_editor' );

In the picture below you can see my WordPress editor with content in a fixed width of 760px. Far better than the one with fullscreen width.

Hope this little tutorial will help you if you’ve got my same issue.

Code Long and Prosper!