TinyMCE format dropdown no longer showing style previews

In the past, by adding the editor stylesheet, I was able to see the options in both the Format and Styles drop-downs, as they would appear in the post. That is, the entry in the menu would be styled according the the CSS rules that were placed in the editor stylesheet.

Strangely, this has stopped working on two sites that have both been updated to WP 3.6. I can still see the custom styles in the editor content window and the styles still apply to the post content – they just don’t appear as styled options in the drop-down menu. What is even stranger, is that ONE of the custom rules I have defined DOES display in the drop-down with it’s custom style applied.

The editor stylesheet is actually the entire front end stylesheet being added via the following and is obviously working because the styles work in the post content;

add_action( 'init', 'pds_add_editor_styles' );
function pds_add_editor_styles()
      {
            add_editor_style( 'library/css/style.css' );
      }

I’m adding the custom styles via the following;

add_filter( 'tiny_mce_before_init', 'pds_mod_tinymce_editor' );
function pds_mod_tinymce_editor( $init )
      {  
            $style_formats         = array(
                  array(
                        'title'    => '90% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-90-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '80% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-80-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '70% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-70-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '60% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-60-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => '50% width (centred)',
                        'selector' => '*',
                        'classes'  => 'width-50-percent',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'No space below',
                        'selector' => '*',
                        'classes'  => 'no-bottom-margin',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Double space below',
                        'selector' => '*',
                        'classes'  => 'double-bottom-margin',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Small Black',
                        'selector' => '*',
                        'classes'  => 'small-black',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Big',
                        'selector' => '*',
                        'classes'  => 'just-big',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Really Big',
                        'selector' => '*',
                        'classes'  => 'really-big',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'Super Big',
                        'selector' => '*',
                        'classes'  => 'super-big',
                        'wrapper'  => true
                  ),
                  array(
                        'title'    => 'RightHeight',
                        'selector' => '*',
                        'classes'  => 'rightheight-font',
                        'wrapper'  => true
                  ),
            );
            $init['style_formats'] = json_encode( $style_formats );

            return $init;
      }

On one of my other clients sites the styles work perfectly, as you can see below. This site hasn’t yet been updated to 3.6.

I’m very confused by the situation and don’t know what my next step is. I’ve tried adding only the relevant styles to their own stylesheet and loading that instead of the entire style.css file, but that doesn’t work, either. Clearing my cache has no effect.

If anyone can offer a little insight, I’d greatly appreciate it.

Cheers

Ok, this was driving me nuts too as it seems to be completely undocumented However, fear not for it is surprisingly easy to fix! 😀

In your tiny_mce_before_init hook function right before the return statement simply add the line:

unset($init['preview_styles']);

This will make wordpress function as it did before the 3.6 update (the updated added a line in wp-includes/class-wp-editor.php [#347] which changed the default behavior.)

From what I can tell, this setting limits the css properties that will be previewed in the styles drop-down menu. As of 3.6 it is set to 'font-family font-weight text-decoration text-transform' by default. Thus causing properties like: color, size, line-height, etc. to not render.

So if you don’t just let everything slip trough you can also just add some specific properties to the list of allowed properties:

$init['preview_styles'] .= ' background-color color';

I know it’s a bit late, but hopefully this will help in the future since, as of 3.6.1, this is still the default behavior.