WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#41500 assigned defect (bug)

Custom TinyMCE style formats not working for Text Widget

Reported by: tikitariki Owned by: azaozz
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.8
Component: Widgets Keywords:
Focuses: Cc:
PR Number:

Description

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.

Change History (3)

#1 @westonruter
2 years ago

  • Owner set to azaozz
  • Status changed from new to assigned

@azaozz Would you have input for this?

#2 @barryceelen
2 years ago

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

#3 @sillybean
2 years ago

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

Note: See TracTickets for help on using tickets.