How to set a contained width to WordPress editor in GeneratePress

In this article

Learn how to set a contained width to your WordPress editor when using GeneratePress theme with a full width blog post layout on front-end

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.

Screenshot of WordPress editor with a full width
WordPress editor with full-width content

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.

Screenshot of WordPress Editor with a contained width
WordPress editor with fixed-width content

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

Code Long and Prosper!

Mauro Bono

I’ve been designing and developing WordPress and WooCommerce websites since 2007. I love WordPress and coding in general. My custom-built solutions are reliable, accessible, fast loading and easy to manage.

Leave a Comment