Define multiple Gutenberg editor widths

Question

Define multiple Gutenberg editor widths

sebfck

2018年11月23日 04:08

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!

Topic block-editor content-width editor Wordpress

Category Web

apmeyer · Accepted Answer · 2018年11月23日 04:08

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.

Define multiple Gutenberg editor widths

About