# Wider Content Area in the Editor

> Makes the writing area of the block editor wider, giving more room on large screens without changing how the site looks to visitors.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: editor, width, layout
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/wider-editor-content/

## Code

```php
// Width of the content column in the editor.
$wpide_editor_content_width = '1000px';

add_action( 'enqueue_block_assets', function () use ( $wpide_editor_content_width ) {
    if ( ! is_admin() || ! preg_match( '/^\d+(\.\d+)?(px|rem|em|vw|%)$/', $wpide_editor_content_width ) ) {
        return;
    }

    wp_register_style( 'wpide-editor-width', false, array(), '1.0' );
    wp_enqueue_style( 'wpide-editor-width' );
    wp_add_inline_style( 'wpide-editor-width', '.editor-styles-wrapper{--wp--style--global--content-size:' . $wpide_editor_content_width . ';}.editor-styles-wrapper .is-root-container > .wp-block:not([data-align="wide"]):not([data-align="full"]){max-width:' . $wpide_editor_content_width . ';}' );
} );
```

## Notes

Set any CSS width such as 1000px or 75rem.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Wider Content Area in the Editor" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/