Easily Add styles to Gutenberg Block Editor !!!

September 4, 2018| Phantom Themes

A WordPress theme can add stylesheet to change the Gutenberg editor’s appearance. Generally changes done in the visual aspects of the editor like colors, font family and background etc. So that it will look exactly similar to the front of the website.

Firstly you need to create a new stylesheet file in your current WordPress theme location. Let us consider the filename to be style-editor.css.

Next, load your newly created Gutenberg editor sytlesheet in your WordPress theme by adding following three lines of code.

 


/**
 * Enqueue Gutenberg block editor style
 */
function lightpress_gutenberg_editor_styles() {
    wp_enqueue_style( 'lightpress-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
}

add_action( 'enqueue_block_editor_assets', 'lightpress_gutenberg_editor_styles' );

Lastly change “lightpress” namespace with your own theme name.

Thanks

Categories: Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating*