Custom TinyMCE style formats not working for Text Widget

[tikitariki]

This is a follow-up to #35243.

I'm not sure what the source of the error is, but custom TinyMCE style formats do not work with the new Text Widget.

The mce_buttons, mce_buttons_2, etc. filters all happen before the tiny_mce_before_init filter, however, buttons are added differently for the new Text Widget. I'm not sure how, bu the only documentation provided to interact with the Text Widget I could find is here, and it is done through JS rather than WP filters.

​https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/

I'm a little bit familiar with extending TinyMCE. Since styleselect is a baked-in button for accessing style formats, you can change the code to add it in, like this:

    jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
        editor.settings.toolbar1 += ',styleselect';
    });

However, as the ticket title mentions, custom style formats added in with the mce_button filters do not seem to affect Text Widget's visual editor's styleselect choices. Only the defaults show.

Also, doing it this way adds the buttons to ALL TinyMCE instances. I can probably just check for a class in the DOM, but it feels really inappropriate to add a button this way when there are already pre-existing filters for modifying the buttons. The fact that this editor instance affects both Text Widget and the main Visual Editor for posts is confusing. It implies they're the same instance, but you can't modify them in the same way.

I've looked forever and tried to figure out how the Text Widget editor is instantiated with the stripped down toolbar. If anyone wants to point me in the right direction, I'd love to tackle this bug (assuming this isn't intentional).

If you'd like to test out this problem for yourself, you can use this test code below. You will see "Formats" being added to the Text Widget via JS, but it affects all instances. The mce_buttons will only add it for the posts' TinyMCE instance. Style formats are presented differently depending on which editor you're using. The custom ones don't get added to the Text Widget.

<?php

function my_tinymce_formats( $formats ) {
        $style_formats = array(
                array(
                        'title' => 'Swag',
                        'inline' => 'span',
                        'classes' => 'swag',
                        'wrapper' => true,
                ),
        );

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

        return $formats;
}

add_filter( 'tiny_mce_before_init', 'my_tinymce_formats' );

function my_mce_buttons( $buttons ) {
        array_unshift( $buttons, 'styleselect' );
        return $buttons;
}

add_filter( 'mce_buttons', 'my_mce_buttons' );

// for demonstration purposes, not how I'd actually implement! :P
function my_text_widget_buttons() {
        ob_start();
        ?>
    <script>
        jQuery(document).on('tinymce-editor-setup', function (event, editor) {
            editor.settings.toolbar1 += ',styleselect';
        })
    </script>
        <?php
        echo ob_get_clean();
}

add_action( 'admin_footer', 'my_text_widget_buttons' );

I think this is rather important because it affects the extensibility of the Text Widget and this is rather harmless. It just helps users format their content better. Bold, italic, and lists are extremely limited and I do not want users writing HTML for simple style variants.

[westonruter]

@azaozz Would you have input for this?

[barryceelen]

I'm seeing a broken styleselect for an editor added via wp_editor() as well.

[sillybean]

As a workaround until the filter works properly, I found that using the 'tinymce-editor-setup' hook to manipulate the style_select array didn't work, but the 'wp-before-tinymce-init' hook did.

I moved my usual array of format selections into its own function, so I could use it in both json_encode() and wp_localize_script(). In the JS file, I assigned that array to the editor's settings.style_formats. I threw together a quick Gist containing both the relevant PHP and JS:
​https://gist.github.com/sillybean/fddc7060efba33162fff7be23edc9f32

[azaozz]

Coming back to this, as @sillybean points out the correct hook to use for changing the settings (for both the button and the style_select option) is wp-before-tinymce-init. Closing as worksforme, if this is still a problem feel free to reopen with steps to reproduce.