How to make WordPress Gutenberg editor wider in Genesis Sample theme

You probably noticed that content in WordPress editor becomes narrow - fills much less screen space than usual once you switch to Genesis Sample theme. It may not be a deal breaker, but it's still not convenient if you're using high resolution screen. Especially if you use multiple columns in pages or posts.

There are two ways to control how wide WordPress editor should in using Genesis Sample theme (or in most other themes built on Genesis framework):

I'll show you both of them - feel free to use the one which fits your workflow best.

How to change WordPress editor width in Genesis themes

By default WordPress editor looks up for Gutenberg editor styling information in currently active theme's files. Genesis Sample theme has some custom CSS for WordPress editor in it's folders. So in order to change editor width we'll need to edit one css file.

Go to Appearance >> Theme File Editor, and open lib >> gutenberg >> style-editor.css file in the editor.

make wordpress editor wider in Genesis Sample themeTo make default WordPress blocks wider you need to change .wp-block max-width to a larger number. For example, to 960px:

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

You may also change wider or full width block maximum width:

.wp-block[data-align="full"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] {
	max-width: 1200px;
}

After saving changes WordPress editor content will be wider - no need to make any extra steps.

In the same css file you may change font sizes, change font family, and other WordPress editor elements to make sure that WordPress editor looks similar as your customized Genesis Sample theme.

Just a reminder - these settings won't change Genesis Sample theme width for your site visitors. It's only for site administrators. If you want to change genesis Sample theme width for site visitors, click here for tutorial.

How to completely remove theme styling from WordPress editor

If you don't want WordPress editor to look like your WordPress theme, you may switch off theme styling in WordPress editor settings.

To do that open any post or page in WordPress editor. Click Options (three vertical dots) at the top right of the WordPress editor, and click Preferences.

how to disable theme styling in wordpress editorIn the popup window turn off Use theme styles setting.

disable theme styling css in gutenberg editorOnce you do that WordPress Gutenberg editor will use default theme styles - it won't try to match your theme styling.

Subscribe to ImakeITwork newsletter