Breaking TinyMCE style formats

Yeap, I wrote about at the Tailor’s support forum ( https://goo.gl/aOWK1X ) but no answer.

@atomiccherry –

What behaviour were you seeing before v1.5.5? None of the recent changes should have affected this, but it is possible.

As @dameer.dj mentions in his post, the styles dropdown is being overwritten which can (and should) be corrected. I am just curious whether this was definitely behaving differently for you in the past.

Cheers,
Andrew.

Prior to 1.5.5 all custom TinyMCE editor format styles added via theme function with ‘tiny_mce_before_init’ filter are available (using TinyMCE Advanced plugin). With 1.5.5 they appear to default back to baseline style format options (or are being overwritten as @dameer.dj suggested).

Currently backtracked and using 1.5.4 and custom style formats work as expected. I’ve tested with multiple themes, all plugins deactivated (except for Tailor and TinyMCE Advanced) and a couple different environments.

P.S. Just want to say how much your hard work is appreciated and how seriously amazing this addition to the community is. Blows all other WP page builders out of the water. Will be donating to the cause again soon.

Thanks @atomiccherry for the kind words! It’s always nice to hear that the plugin is valued ??

Is the problem that the custom style formats are not being applied to the WordPress editor (i.e., in the admin backend) or the editor instances within Tailor (or both)?

Would you mind sharing some or all of the code snippet that you’re using with the tiny_mce_before_init filter?

Hi Andrew,

The custom styles are not being applied to all instances of the editor both within Tailor and otherwise. I’ve also tested without the TinyMCE Advanced plugin enabled as well.

// Add button for Custom Style Formats to TinyMCE Editor
add_filter( 'mce_buttons_2', 'slate_mce_buttons' );
function slate_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Add Style Formats to TinyMCE Editor
add_filter( 'tiny_mce_before_init', 'slate_mce_before_init' );
function slate_mce_before_init( $settings ) {

    $style_formats = array(

      // some sample styles for example
      array(
        'title' => __( 'Headlines', 'slate' ),
        'items' => array(
          array(
        		'title'   	=> __( 'Underline', 'slate' ),
        		'selector' 	=> 'h2',
        		'classes' 	=> 'underscore'
        	),
          array(
        		'title'   	=> __( 'Split', 'slate' ),
        		'selector' 	=> 'h2',
        		'classes' 	=> 'split'
        	),
        ),
      ),

      array(
        'title'   => __( 'Separators', 'slate' ),
        'items' 	=> array(
          array(
        	'title'     => __( 'Tapered', 'slate' ),
        	'selector'  => 'hr',
        	'classes'   => 'taper'
        	),
          array(
             'title'    => __( 'Inset', 'slate' ),
             'selector' => 'hr',
             'classes'  => 'inset'
        	),
          array(
            'title'   	=> __( 'Decorative', 'slate' ),
            'selector'  => 'hr',
            'classes' 	=> 'decorative'
          ),
        ),
      ),

    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Perfect. Thanks for that.

I was able to reproduce the problem and have now created a fix. This will be available in the next release of Tailor. The issue was that I was overwriting the style formats:

$settings['style_formats'] = json_encode( $style_formats );

Due to unrelated changes to Tailor hooks, this became apparent (previously my styles were being added first, and overwritten by yours). Now, they are merged:

if ( ! empty( $settings['style_formats'] ) ) {
	$style_formats = array_merge( json_decode( $settings['style_formats'] ), $style_formats );
}
$settings['style_formats'] = json_encode( $style_formats );

The result is that now, both sets are displayed correctly (when the style formats button is displayed, that is). I’ve set it up so that pre-existing styles are displayed first.

Awesome news!! Thanks, Andrew.

Apologies for the delay – I’ve been travelling for the last few days.

This fix is a part of the Tailor 1.5.6 release that’s now available here and on GitHub. Please do let me know if you come across any other issues!

Cheers,
Andrew.