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:
.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!
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/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!
Share Improve this question asked Oct 31, 2018 at 17:24 sebfcksebfck 1051 silver badge6 bronze badges1 Answer
Reset to default 0You 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.