Ok, I found the correct format for this TinyMCE issue which also retain some of the original Style Format
selections. Enjoy!
function my_wpeditor_buttons( $buttons, $editor_id ) {
if ( 'content' != $editor_id ) {
return $buttons;
}
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'my_wpeditor_buttons', 10, 2 );
function my_wpeditor_formats_options( $settings ) {
$default_style_formats = [
[ 'title' => 'Headings',
'items' => [
[ 'title' => 'Heading 1', 'format' => 'h1' ],
[ 'title' => 'Heading 2', 'format' => 'h2' ],
[ 'title' => 'Heading 3', 'format' => 'h3' ],
[ 'title' => 'Heading 4', 'format' => 'h4' ],
[ 'title' => 'Heading 5', 'format' => 'h5' ],
[ 'title' => 'Heading 6', 'format' => 'h6' ],
]
], // Headings
[ 'title' => 'Inline',
'items' => [
[ 'title' => 'Bold', 'format' => 'bold', 'icon' => 'bold' ],
[ 'title' => 'Italic', 'format' => 'italic', 'icon' => 'italic' ],
[ 'title' => 'Underline', 'format' => 'underline', 'icon' => 'underline' ],
[ 'title' => 'Superscript', 'format' => 'superscript', 'icon' => 'superscript' ],
[ 'title' => 'Subscript', 'format' => 'subscript', 'icon' => 'subscript' ],
[ 'title' => 'Code', 'format' => 'code', 'icon' => 'code' ],
]
], // Inline
[ 'title' => 'Blocks',
'items' => [
[ 'title' => 'Div', 'format' => 'div' ],
[ 'title' => 'Paragraph', 'format' => 'p' ],
[ 'title' => 'Pre', 'format' => 'pre' ],
[ 'title' => 'Blockquote', 'format' => 'blockquote' ],
]
], // Blocks
[ 'title' => 'Alignment',
'items' => [
[ 'title' => 'Left', 'format' => 'alignleft', 'icon' => 'alignleft' ],
[ 'title' => 'Center', 'format' => 'aligncenter', 'icon' => 'aligncenter' ],
[ 'title' => 'Right', 'format' => 'alignright', 'icon' => 'alignright' ],
[ 'title' => 'Justify', 'format' => 'alignjustify', 'icon' => 'alignjustify' ],
]
], // Alignment
];
$custom_styles_formats = [
[ 'title' => 'Header', 'type' => 'group',
'items' => [
[ 'title' => 'Headline', 'selector' => 'h1,h2,h3', 'classes' => 'section-headline', 'exact' => '1' ],
[ 'title' => 'SubHeadline', 'selector' => 'h1,h2,h3', 'inline' => 'small', 'classes' => 'subheadline', 'exact' => '1' ],
]
], // Content Headers
[ 'title' => 'Buttons', 'type' => 'group',
'items' => [
[ 'title' => 'Link', 'selector' => 'a, button', 'classes' => 'uk-button-link', 'exact' => '1' ],
[ 'title' => 'Button', 'selector' => 'a, button', 'classes' => 'uk-button uk-button-primary', 'exact' => '1' ],
[ 'title' => 'Large Button', 'selector' => 'a, button', 'classes' => 'uk-button-large', 'exact' => '1' ],
]
], // Buttons
[ 'title' => 'Quote', 'type' => 'group',
'items' => [
[ 'title' => 'Quote Justify', 'selector' => 'blockquote', 'classes' => 'align-justify', 'exact' => '1' ],
[ 'title' => 'Quote Right', 'selector' => 'blockquote', 'classes' => 'align-right', 'exact' => '1' ],
[ 'title' => 'Quote Center', 'selector' => 'blockquote', 'classes' => 'align-center', 'exact' => '1' ],
]
], // Buttons
];
$new_style_formats = array_merge( $default_style_formats, $custom_styles_formats );
$settings['style_formats'] = json_encode( $new_style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'my_wpeditor_formats_options' );