Define multiple Gutenberg editor widths

by

I’m trying to define multiple widths for the Gutenberg editor depending on the post/page template. I have a full-width page template and would like the editing experience to be as close to the live page.

Now the issue is that I can only seem to define one width for the editor using the .wp-block class. I’m following this method: https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#changing-the-width-of-the-editor

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

I’ve tried adding a selector in front of the .wp-block class, for example:

.wp-block {
    max-width: 720px;
}
.page-template-fullwidth .wp-block {
    max-width:1080px;
}

But unfortunately that doesn’t work. It seems like the only possible way to change the width is by only using .wp-block

Any ideas on how to implement multiple different editor widths?

Thank you!

1 Answer
1

You may need to use the same approach that conditional editor stylesheets require now (for TinyMCE).

function my_theme_add_editor_styles() {
    global $post;
    $post_type = get_post_type( $post->ID );
    $editor_style="editor-style-" . $post_type . '.css';
    add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );

This snippet is from a Hongkiat article describing the process.

Note: You would then have a different editor stylesheet in your theme directory for each post type:

editor-style-POST_TYPE.css

Using sass/less would make this a little more manageable since you could compile these stylesheets from partials and just add the class that changes the Gutenberg editor width.

Not ideal, but this approach could get the job done.

Leave a Comment