Text Block + TinyMCE Custom Styles = Bug

[meneldil]

Hello,
I use custom styles on my WordPress, but I have a problem with the Text Block module since the last (or before last) update.
The WYSIWYG editor does not show the tools and text. (see screenshots below)

Here is the code that generates the bug:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
    $style_formats = array(
        array(
            'title' => 'Majuscule',
            'block' => 'p',
            'classes' => 'uppercase'
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}

With the code

Without the code

Thanks in advance!

[ghost]

Reproduced

[andreiglingeanu]

On it.

[ghost]

@andreiglingeanu There are other tinymce parameters that can be set https://www.tinymce.com/docs/configure/content-formatting/
I think we should add a general way to handle them or add them to a hardcoded list and process each.

[andreiglingeanu]

That's once again JSON parsing error.. I can do a fix for this particular issue then think about a general solution later.

Maybe try to JSON.parse each field that has [, ], { and }?

[andreiglingeanu]

@meneldil How I can check that this style_formats was applied correctly? Is there some specific thing I should notice in the edotir's UI?

[andreiglingeanu]

651bebc

[meneldil]

@andreiglingeanu Normally, this format appears in the WYSIWYG editor. (Pages and posts)

I forgot to also put the first part of the code that displays this list:

add_filter('mce_buttons_2', 'my_mce_buttons_2');
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

[andreiglingeanu]

Yes, it works now. Please check it.

[meneldil]

I forgot to mention that the problem happens in Text Block's popup. ;)

[andreiglingeanu]

@meneldil There you go.

[meneldil]

Great! :D
Thank you. I'm looking forward that the plugin is updated on WordPress. :)