editor-styles

  • Hi,
    I followed the suggestions to add a stylesheet for the block editor; I’m specifically interested in getting it to look a little closer to the actual theme, like font-family. But none of the suggestions work. I tried each of the below individually. The last one from the codex gave a fatal error. I’m using a basic Underscores theme, wp 5.8. Any help?

    // Add support for editor styles.
		add_theme_support( 'editor-styles' );

// Enqueue editor styles.
		add_editor_style( 'style-editor.css' );

    //

    add_action( ‘after_setup_theme’, ‘cpm_setup’ );
    function my_theme_setup() {
    add_editor_style(‘style-editor.css’);

    // For the Block Editor.
    add_theme_support( ‘editor-styles’ );
    }

    //

    function add_editor_style( $stylesheet = ‘editor-style.css’ ) {
    global $editor_styles;

    add_theme_support( ‘editor-style’ );

    $editor_styles = (array) $editor_styles;
    $stylesheet = (array) $stylesheet;

    if ( is_rtl() ) {
    $rtl_stylesheet = str_replace( ‘.css’, ‘-rtl.css’, $stylesheet[0] );
    $stylesheet[] = $rtl_stylesheet;
    }

    $editor_styles = array_merge( $editor_styles, $stylesheet );
    }

    • This topic was modified 3 years, 6 months ago by jerryb2013.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • The simplest way to add styles to the editor is by adding something like the following to the theme functions.php file:

    
function custom_editor_css(){

	add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
	add_editor_style( 'style-editor.css' ); // tries to include style-editor.css directly from your theme folder

}
add_action( 'after_setup_theme', 'custom_editor_css' );

    As noted in the comments above, for this to work the style-editor.css file needs to be in the root of the theme directory.

    You did have something similar above, but in the add_action the function name was different to the actual function you set up, eg.

    add_action( ‘after_setup_theme’, ‘cpm_setup’ );
function my_theme_setup() {

    For this to work you would need to change my_theme_setup to cpm_setup

    Thread Starter jerryb2013

    (@jerryb2013)

    thanks,tired yours, still can’t get it to work. I have me style-editor.css file in the root of the theme; I added some css to test but nothing changes,

    .editor-styles-wrapper {
    background-color: red !important;}

    I’m probably missing something simple; here’s what I have in functions:

    //stylesheet for editor
	function custom_editor_css(){

		add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
		add_editor_style( 'style-editor.css' ); // tries to include style-editor.css directly from your theme folder

	}
	add_action( 'after_setup_theme', 'custom_editor_css' );
    • This reply was modified 3 years, 6 months ago by jerryb2013.
    Thread Starter jerryb2013

    (@jerryb2013)

    push it up to a dev site if that helps, https://dev-adi-cpm.pantheonsite.io/

    Moderator bcworkz

    (@bcworkz)

    Don’t include the .editor-styles-wrapper selector in your CSS. WP automatically adds this to all editor style selectors. For example, try

    p {
    background-color: red !important;}
    Thread Starter jerryb2013

    (@jerryb2013)

    that did it

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘editor-styles’ is closed to new replies.