2

I am new to the Gutenberg editor. Previously I used the Classic editor (plugin) when editing WordPress. The editor area "resized" according to the browser window. With the Gutenberg approach I get a very narrow area to edit in. When I use the HTML-block all I get is a 890px wide and 250px high area with scrollbars. I feel claustrophobic!

Are there some way to get around this?

Similar question but with no good answers: Why is the new Gutenberg editor so narrow, and how to make it wider?

  • 1
    Have you registered an editor stylesheet for your theme? If your themes content area is wider than the block editors content area, you can make them match with CSS, and other adjustments so they're more similar. Otherwise, the entire screen is the editor area, it doesn't make sense to say it doesn't resize – Tom J Nowell Feb 20 at 13:08
1

You have to enqueue first the style editor css

function legit_block_editor_styles() {
wp_enqueue_style( 'legit-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '2.3', 'all' );} 
add_action( 'enqueue_block_editor_assets', 'legit_block_editor_styles' );

Then you have to create that style-editor.css file inside your theme and then add this inside that file:

.wp-block {
max-width:  100%;}
| improve this answer | |
0

Here is what I did:

functions.php

/* Editor styles EXTENDED */
add_action('admin_enqueue_scripts', 'load_admin_style');
function load_admin_style() {
    wp_enqueue_style('admin_css', get_stylesheet_directory_uri() .'/gutenberg-styles-extra-wide.css' );
}

gutenberg-styles-extra-wide.css

/*--------------------------------------------------------------
# 1.0 - Editor
--------------------------------------------------------------*/
body.block-editor-page .edit-post-visual-editor .editor-post-title__block,
body.block-editor-page .edit-post-visual-editor .editor-default-block-appender,
body.block-editor-page .edit-post-visual-editor .editor-block-list__block {
   max-width: 1200px;
}
/* HTML-block */
.wp-block-html .block-editor-plain-text {
    max-height: 700px;
    font-size: 14px;
    resize: both;
}

Since I am using a child-theme I use get_stylesheet_directory_uri() in functions.php. (get_template_directory_uri() otherwise) I also wanted to have more space in the HTML-block.

Thanks for answers and suggestions Tom and Juan.

Takes some time to get used to the Gutenberg editor!

| improve this answer | |
0

A variation on the used action:

add_action( 'enqueue_block_editor_assets', 'custom_gutenberg_editor_stylesheet' );
function custom_gutenberg_editor_stylesheet() {
  wp_enqueue_style( 'custom-gutenberg-stylesheet', [your css path] . '/gutenberg-styles.css', array(), wp_get_theme()->get( 'Version' ), 'all' );
}

then

.wp-block {
    max-width: 1024px; // whatever
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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