Add custom style formats to TinyMCE (Advanced Custom Fields) - php

Question

I have created a new TinyMCE layout for Advanced Custom Fields called "Very Simple" that I want to use on specific WYSIWYG fields. I've managed to add the buttons I want and I'm now looking for a way to add a list of custom style formats as a dropdown, but I can't really figure out how to do this.
The code I have right now is the following:
// Customize ACF MCE
add_filter( 'acf/fields/wysiwyg/toolbars' , 'new_toolbars' );
function new_toolbars( $toolbars )
{
// - this toolbar has only 1 row of buttons
$toolbars['Very Simple' ] = array();
$toolbars['Very Simple' ][1] = array('bold' , 'italic' , 'underline', 'link', 'unlink' );
$style_formats = array(
// These are the custom styles
array(
'title' => 'Red Button',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => true,
),
array(
'title' => 'Content Block',
'block' => 'span',
'classes' => 'content-block',
'wrapper' => true,
),
array(
'title' => 'Highlighter',
'block' => 'span',
'classes' => 'highlighter',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$toolbars['Very Simple'][1]['styleselect'] = json_encode( $style_formats );
// return $toolbars - IMPORTANT!
return $toolbars;
}
The style format dropdown is not showing. Any ideas why?

Answer 1

The styleselect dropdown is hidden by default, so to get any registered formats/styles will show, you'll just need to activate the styleselect dropdown menu in the Visual editor.
The below function (from the WordPress Codex) filters the array of buttons loaded by TinyMCE, so just add this to your functions.php. I'm using the mce_buttons_2 filter to make it appear in the second row of my toolbar.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );