Can't change the width of content in the visual editor

Question

I'm using a child of Twentyfourteen on this site (although I'm not sure that the theme being used is relevant in this case).

The content of the visual editor is being set by this style rule:

html .mceContentBody {
    font-size: 100%;
    max-width: 474px;
}

I followed the answer in this question: "Why is the visual editor in WordPress limiting the width by wrapping the content?" and put this code in my custom editor stylesheet:

html .mceContentBody {
    max-width: none !important; }

I am quite positive I'm correctly enqueuing the custom editor stylesheet (changes I make in style.css work). Here's what I have in my child functions.php file:

<?php

function RegisterCustomScriptsStyles(){
  // Register and enqueue custom stylesheets

  // Register custom stylesheets to the path to the theme's stylesheets
  wp_register_style( 'customStylesheet', get_template_directory_uri() . '/style.css');
  wp_register_style( 'customEditorStylesheet', get_template_directory_uri() . '/editor-style.css');

  // Enqueue the stylesheets
  wp_enqueue_style( 'customStylesheet' );
  wp_enqueue_style( 'customEditorStylesheet' );

  // Register and enqueue custom scripts
  // Register custom scripts to the path to the theme's scripts
  //wp_register_script( 'customScript', get_stylesheet_directory_uri() . '/customScript.js', array('jquery') );
  //wp_enqueue_script( 'customScript' );
} 

add_action('wp_enqueue_scripts', 'RegisterCustomScriptsStyles');

So what am I missing/doing wrong?

Answer 1

Wordpress will not know that you want this css applied to the backend unless you load it properly. I believe your css will have loaded on the frontend of the site, but not the backend.

If you want it to load on the backend, you should use instead:

function i_want_a_cool_editor_style() {
add_editor_style( 'editor-style.css' );
}
add_action( 'admin_init', 'i_want_a_cool_editor_style' );

An alternative approach, if you only have a few styles to load, is to load the css directly on the functions.php (but again, using the right code to load it), eg.

add_action('admin_head', 'my_cool_stylin');

function my_cool_stylin() {
 echo '<style>
html .mceContentBody {
  max-width: none !important; }
</style>';
}