How to edit the actual paragraph dropdown in TinyMCE with custom text styles

Question

I want to give the backend-users only 4 text styles to choose from. Headline, Subheadline, Paragraph and a style we called .statement.

Searching for terms like "custom styles in TinyMCE" always ended up with this article from wordpress itself. https://codex.wordpress.org/TinyMCE_Custom_Styles

Unfortunately I don't want to give access to another dropdown. I need to strip the current dropdown of its content and populate it with my own styles.

In the first step I actually don't care about how they look both in the dropdown and in the visual-editor itself. The key here is to take away unnecessary styling options; options the design & frontend will not support. (Although it would be great to alter the looks inside the editor itself)

.

function my_mce_before_init_insert_formats( $init_array ) {

I looked at the $init_array and couldn't find where the dropdown is being created.

Thrilled for your suggestions :)

Louis!

Answer 1

I was having the same issue and here is what you can do. The code below disables the h1 tag from the block formats section. The same way you can disable other tags and also add your own. But I'm not sure about how to add custom CSS styles to them. Hope this code will give you a hint in which way to dig.

//Modify TinyMCE editor to hide H1. 
function tiny_mce_remove_unused_formats( $initFormats ) {
    // Add block format elements you want to show in dropdown
    $initFormats['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre';
    return $initFormats;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_remove_unused_formats' );

Update:

The thing you are looking for was possible before Wordpress 3.9 had been released. Earlier you had to write those lines of code to make it possible. But unfortunately, theme_advanced_styles is deprecated since WP 3.9 updated the TinyMCE to version 4 (see the Change Log). More information on the Andrew Ozz blog.

This is how it was earlier (source):

function make_mce_awesome( $init ) {
    // deprecated settings
    $init['theme_advanced_blockformats'] = 'h2,h3,h4,p';
    $init['theme_advanced_disable'] = 'underline,spellchecker,wp_help';
    $init['theme_advanced_text_colors'] = '0f3156,636466,0486d3';
    $init['theme_advanced_buttons2_add'] = 'styleselect';
    $init['theme_advanced_styles'] = "bigTitle=bigTitle;Call To Action Button=ctaButton,Rounded Corners=rounded";
    return $init;
}

add_filter('tiny_mce_before_init', 'make_mce_awesome');

Solution:

Anyway, I have my solution for your task. You can get rid of the default drop-down and add formats drop-down with four styles in it. This will help you to avoid confusions with the users, from what dropdowns they select styles.

Disable the default dropdown:

function remove_default_format_select( $buttons ) {
    //Remove the format dropdown select and text color selector
    $remove = array( 'formatselect' );

    return array_diff( $buttons, $remove );
 }
add_filter( 'mce_buttons', 'remove_default_format_select' );

Add new Formats dropdown (more here):

// Callback function to insert 'styleselect' into the $buttons array
function my_new_mce_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons', 'my_new_mce_buttons' );


// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(
            array(
                'title' => 'Headline',
                'block' => 'h1'
                ),
            array(
                'title' => 'SubHeadline',
                'block' => 'h2'
                ),
            array(
                'title' => 'Statement',
                'block' => 'div',
                'classes' => 'statement_class',
                'wrapper' => true
            )
        );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

The last one. Register the css file to get the visual look in your editor: (Learn more)

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Hope this helps.

Answer 2

In case if you need to edit the block_formats dropdown, you can do this in that way:

add_filter('tiny_mce_before_init', function($init_array) {
    $block_formats = [
        'Paragraph=p',
        'Heading 1=h1',
        'Heading 2=h2',
        'Heading 3=h3',
    ];
    $init_array['block_formats'] = implode(';', $block_formats);

    return $init_array;
});

In case if you need to add some custom format, you can do this in that way:

add_filter('tiny_mce_before_init', function($init_array) {
    $init_array['formats'] = json_encode([
        // add new format to formats
        'h3marked' => [
            'selector' => 'h3',
            'block'    => 'h3',
            'classes'  => 'article-paragraph',
        ],
    ], JSON_THROW_ON_ERROR);

    $block_formats = [
        'Paragraph=p',
        'Heading 1=h1',
        'Heading 2=h2',
        'Heading 3=h3',
        'Heading 3 marked=h3marked',    // use the new format in select
        'Heading 4=h4',
        'Heading 5=h5',
        'Heading 6=h6',
        'Preformatted=pre',
    ];
    $init_array['block_formats'] = implode(';', $block_formats);

    return $init_array;
});

Inspired by this post and this tinymce docs