1

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!

0

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.