[wp-trac] [WordPress Trac] #41500: Custom TinyMCE style formats not working for Text Widget

[WordPress Trac]

#41500: Custom TinyMCE style formats not working for Text Widget
--------------------------+-----------------------------
 Reporter:  tikitariki    |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Widgets       |    Version:  4.8
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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:

 {{{#!js
     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
 <?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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41500>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform