Define multiple Gutenberg editor widths

admin管理员组

文章数量:1130349

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!

• editor
• block-editor
• content-width

Share Improve this question asked Oct 31, 2018 at 17:24 sebfcksebfck 10511 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

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!

• editor
• block-editor
• content-width

Share Improve this question asked Oct 31, 2018 at 17:24 sebfcksebfck 10511 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： Define multiple Gutenberg editor widths