Changing editor-style.css style

Question

I am using the following code in my function.php file to add a Format dropdown to the WordPress visual editor with just one option, Custom 1.

<?php

function custom_styles_button($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'custom_styles_button');

function my_mce_before_init_insert_formats( $init_array ) {  

// Define the style_formats array

    $style_formats = array(  
        // Each array child is a format with it's own settings
        array(  
            'title' => 'Custom 1',  
            'block' => 'span',  
            'classes' => 'custom-1',
            'wrapper' => true,

        ),  
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 

function add_editor_styles() {
    add_editor_style( 'editor-style.php' );
}
add_action( 'init', 'add_editor_styles' );

My editor.php contains the following code;

<?php 

header("Content-type: text/css"); 
$test = '#006699';

?>

.custom-1 { 
    color : <?php echo $test ?>;

}

So when I take select a piece of text in the WordPress visual editor and make it Custom-1 it's color in visual editor becomes #006699. Which is fine. However, I want to be able to control the color dynamically from within the Customizer, I am using the Kirki framework to select a color and my code in the editor-style.php looks like;

<?php 

$test = get_theme_mod( 'graviton_custom_1_text_color', '#FFFFFF' );
header("Content-type: text/css"); 

?>

.custom-1 { 
    color : <?php echo $test ?>;

}

But this does not work, in the Custom format dropdown in the visual editor the Custom 1 select stays highlighted and the text color remains black. I know that the code;

$test = get_theme_mod( 'graviton_custom_1_text_color', '#FFFFFF' );

does correctly put the right color value into $test but I don't understand why it then does not follow through to the style when I am using the same variable.

Answer 1

It doesn't work because WordPress isn't loaded within the context of editor-style.php, and you're actually getting a fatal error (get_theme_mod undefined). Enable error logging and you'll see what I mean.

Rather than pointing directly to a custom PHP file, you should use an "endpoint" within WordPress:

add_editor_style( admin_url( 'admin-ajax.php?action=editor-style' ) );

Now you can "listen" for when this virtual stylesheet is requested and kick out all your awesome CSS with WordPress loaded:

function wpse_226550_editor_style() {
    header( 'Content-Type: text/css; charset=UTF-8' );
    echo $css; // Example!
    exit;
}

add_action( 'wp_ajax_nopriv_editor-style', 'wpse_226550_editor_style' );
add_action( 'wp_ajax_editor-style', 'wpse_226550_editor_style' );

Don't be put off by the "ajax" reference - admin-ajax.php is a popular technique in WordPress for sending all kinds of custom responses, but without having to manually load WordPress yourself (e.g. require './path/to/wordpress/wp-load.php'; - bad practice, path assumptions).