5

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
  • 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 '20 at 13:08
3

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%;}
1

If it helps anyone we have developed a free light-weight plugin that lets you control the "Wide width" setting in the Gutenberg block editor and also adds some other optional visual enhancements to make the block edges easier to see.

To control the "Wide width" setting the plugin enqueues this admin style where [variable] is set in the plugin's settings:

.wp-block-columns.block-editor-block-list__block.wp-block.block-editor-block-list__layout{max-width:[variable]px!important;}

and also we:

add_theme_support( 'align-wide' );

The plugin is: https://wordpress.org/plugins/blocksolid/

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!

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
}
0

My solution was to just add this to your functions.php file:

add_action('admin_head', 'admin_styles');
function admin_styles() {
     echo '<style>
            .wp-block {max-width: 720px;}
            .wp-block[data-align="wide"] {max-width: 1280px;}
            </style>';
}

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.