[Support request] How to customize Gutenberg editor margin for my GP theme?

[Avadhut]

Hi,

How to customize the Gutenberg editor margin for my GP theme? I want to increase the left-side margin for this.

Right now it is: https://imgur.com/KDjQn1K

And I want it to have this much left margin: https://imgur.com/undefined

Kindly guide.

Thanks,
Avadhut

[Fernando]

Hi Avadhut,

Can you reshare the second screenshot?

[Avadhut]

https://imgur.com/NcvhnfK

[Fernando]

I see. The Editor tries to replicate the actual Content space in the Frontend, set through the Customizer.

You can try altering the Padding and Container Width in Appearance > Customize > Layout > Container, and this should relatively reflect in the Editor.

Otherwise, if you want that spacing just for the editor, you’ll need to enqueue your own Style in the Block editor while using the Child Theme.

For instance, in your Child Theme directory, you can create a new file called my-editor-style.css.

Then, add this PHP in functions.php:

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/my-editor-style.css", false,'1.0', 'all' );
} );

Now, in your my-editor-style.css, you can add CSS for the Block Editor.

You can try adding this for instance:

.editor-styles-wrapper.block-editor-writing-flow {
    padding-left: 200px;
}

[Author]

Posts