Are there ways to make the Gutenberg editor wider? And the HTML-block higher?

Question

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?

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

Answer 2

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>';
}

Answer 3

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/

Answer 4

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!

Answer 5

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
}

Answer 6

Try this CSS inside your theme, functions.php:

// Wider sidebar on gutenberg backend
function my_wider_sidebar() {
echo '
<style>
    .interface-complementary-area{ width: 450px; }
</style>
';
}
add_action('admin_head', 'my_wider_sidebar');