Tiny MCE-modifications (plugins) stopped working in WordPress 5.6

Question

A while back I stumbled across this post from 2015, that showed how to add Tiny MCE-buttons.

It has been working for more than a year. But after the latest WordPress update (to version 5.6) it stopped working (the added dropdown-button isn’t in the UI any longer).

What’s wierd is that I had made 2 modifications to Tiny MCE:

  • add_filter( 'mce_buttons', 'custom_register_mce_button' ); – which still works.
  • add_filter( 'mce_external_plugins', 'custom_add_tinymce_plugin' ); – which stopped working.

I have the same code running on another site, which has also been updated to version 5.6. On it’s the same buttons that has disappeared on both sites. So I’m quite sure that it’s the WP-update that messed this up.

And I have checked the source code in the backend, and it is to be found in the code (so I can see that it is loaded).

My code

In functions.php:

/**
 * Add buttons in tinyMCE
 *
 * Source: https://wisdmlabs.com/blog/add-buttons-menu-options-tinymce-wordpress-post-editor/
 */
function custom_add_mce_button(){

    if( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ){
        return;
    }

    if( 'true' == get_user_option( 'rich_editing' ) ){
        add_filter( 'mce_external_plugins', 'custom_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'custom_register_mce_button' );
    }
}

add_action( 'admin_head', 'custom_add_mce_button' );

function custom_register_mce_button( $buttons ){
    array_push( $buttons, 'custom_mce_button' );

    return $buttons;
}

function custom_add_tinymce_plugin( $plugin_array ){
    $plugin_array['custom_mce_button'] = get_stylesheet_directory_uri() . '/assets/admin/js/tiny-mce-buttons.js';

    return $plugin_array;
}

The contents of tiny-mce-buttons.js:

( function() {
    tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
        editor.addButton('custom_mce_button', {
            text: 'Buttons',
            icon: false,
            type: 'menubutton',
            menu: [
                {
                    text: 'Button (simple)',
                    onclick: function() {
                        editor.insertContent('[button button_text="Read more" title="Google" link="https://google.com"]');
                    }
                },
                {
                    text: 'Button (centered)',
                    onclick: function() {
                        editor.insertContent('[button button_text="Read more" title="Google" link="https://google.com" class="zbtn__primary centered-button"]');
                    }
                },
                {
                    text: 'Button (all properties)',
                    onclick: function() {
                        editor.insertContent('[button button_text="Read more" link="https://google.com" title="Google" open_in_new_tab="yes" class="zbtn__primary"]');
                    }
                }
            ]
        });
    });
})();

How do I add buttons to the Tiny MCE after this update?

0
Zeth 6 months 2020-12-21T15:11:32-05:00 0 Answers 4 views 0

Leave an answer

Browse
Browse