Added custom styles to Visual Editor. Classes are appended and not replaced as intended

by

Followed several tutorials and have added custom classes in the formats section of the visual editor. The classes used are being appended and not replaced as I had intended. Is there a way to have them overwrite the existing style if there is one instead of adding to the class tag?

My use case is this: Content editor lands on the visual editor page and clicks into the visual editor. They select a piece of text and select a class from the formats dropdown I have added. They dont like the color of the link and decide to change it by going back up to the formats tab and selecting a different value. Behind the scenes, WordPress replaces the class. I realize I could use the styles key in the json array, but that would produce inline-styles, which I’d like to avoid.

Thanks!

Steps to produce issue

add_filter('tiny_mce_before_init', 'custom_format_dropdown');
function custom_format_dropdown($settings) {
$new_formats = array(
    array(
        'title' => 'Multibox Headline',
        'selector' => 'p',
        'classes' => 'headLine',
        'wrapper' => true,

    ),
    array(
        'title' => 'Link Styles',
        //'icon' => 'link',
        'items' => array(
            array(
                'title' => 'Green Bold Link ➲',
                'selector' => 'a',
                'classes' => 'listItemGreen',
                'inline' => 'span',

            ),
            array(
                'title' => 'Blue Bold Link ➲',
                'selector' => 'a',
                'classes' => 'listItemBlue',
                'inline' => 'span',
            ),
        ),
    ),
);
/* Check if custom "style_formats" is enabled */
if (isset($settings['style_formats'])) {

    /* Get old style_format config */
    $old_formats = json_decode($settings['style_formats']);

    /* Merge it with our own */
    $new_formats = array_merge($new_formats, $old_formats);
}
/* Add it in tinymce config as json data */
$settings['style_formats'] = json_encode($new_formats);
return $settings;
}

0

Leave a Comment