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!

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