Do theme defined custom styles added to formats dropdown override/supercede?

[Edited. Thought I had new information to add but I do not. Sorry]

Hello,

I’m the developer of WP Edit and WP Edit Pro. Would you mind showing me the code you are using in the tinymce pre init function.. where you filter the style formats?

Hi Josh! Thanks for responding. I followed a tutorial on this and this is the code I’m using

function my_mce_before_init_insert_formats( $init_array ) {  

// Define the style_formats array

	$style_formats = array(
		// Each array child is a format with it's own settings
		array(
			'title' => 'Content Block',
			'block' => 'span',
			'classes' => 'content-block',
			'wrapper' => true,

		),
		array(
			'title' => 'Blue Button',
			'block' => 'span',
			'classes' => 'blue-button',
			'wrapper' => true,
		),
		array(
			'title' => 'Red Button',
			'block' => 'span',
			'classes' => 'red-button',
			'wrapper' => true,
		),
	);
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats_merge'] = true;
	$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' );

Following this tutorial here: https://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/

Things to note:
I’ve moved the merge code to different locations to see if that made a difference. I tried it after the $init_array['style_formats'] = json_encode( $style_formats ); line as well as before $style_formats = array(

What if you first merged the array you created with the original array?

// json decode wp array
$jd_orig_array = json_decode($init_array['style_formats'], true);

// merge new array with wp array (json encoded)
$new_merge = json_encode(array_merge($jd_orig_array, $style_formats));

// populate back into function
$init_array['style_formats'] = $new_merge;

return $init_array;

This is how I do it from WP Edit. Give it a try and see what happens.

Excellent – thanks for your help, Josh! That did work in both my theme and plugin. I had attempted a solution with array_merge but wasn’t sure what I was doing (obviously).

Interesting still, though, that the first code works in a plugin but not in a theme. Not sure if that is intended by WP or what!

Excellent. Glad to help.
“Norm” will be most grateful as well ??

Interesting still, though, that the first code works in a plugin but not in a theme. Not sure if that is intended by WP or what!

Yeah, I have no idea what is going on there. I’ve never written a theme before; so I don’t have much to compare ??

This is a quote from “Otto”:

No, the theme’s functions.php file is called well after plugins are loaded.

So perhaps WP Edit was loading it’s custom styles… and then your theme was loading it’s custom styles. With your code above… you are not first checking to see if any custom styles exist. You’re simply writing a new set.. and running with that.

Perhaps something like this would work in your theme:

if(!empty($init_array['style_formats'])) {

    $incoming_array = json_decode($init_array['style_formats'], true);
    $new_merge = json_encode(array_merge($incoming_array, $style_formats));
}
else {

    $new_merge = json_encode($style_formats);
}

$init_array['style_formats'] = $new_merge;

return $init_array;

That will first check if there are any custom styles already in the array; and if there are, it will merge them with your theme custom styles. If there are no styles in the incoming array; we simply create the theme custom styles.

Thanks, definitely will check on that. I thought the whole purpose of setting merge to true was to but it seems more complicated than that. Super awesome of you to help figure out this issue ??

I think the style_formats_merge will merge the styles YOU create; and add them to the default WP/TinyMCE styles that are included in core.

But, it doesn’t know what other styles other plugins may have added. That’s why you have to first check for the existence of any other custom style formats.

In other words.. if you set the option to true in your theme; then it will create your custom styles, and load them onto the end of the core styles. This is because you are calling the merge from within your theme code.

If you set it to false in your theme.. then only your custom styles you created will be available… and core styles will be overwritten.

But, when you are loading AFTER all plugins… you’ll have to first check for the existence of an array coming into that filter function.

Think of it this way…

1) The tiny_mce_before_init filter can be used by any plugin/theme.
2) We have WP Edit Pro adding custom styles; and your theme is adding custom styles.
3) We both call the tiny_mce_before_init filter.

Now… when everything is processed… WP will first run my filter; and then your filter. Your filter is ran last. Since my custom styles are never accounted for in your filter.. then the function will only process your styles (since it will overwrite mine).

Therefore.. the style_formats_merge will work as described above.. and will never take into account other plugin custom styles… unless you specifically check first for their existence ??

Ahh that makes sense. Thanks for the explanation. And again, very cool of you to help out with this.

I did look at the code of your plugin before I posted this thread but it wasn’t clicking with me.

No worries. Thanks for working with me to make sure they both work properly.

Take care!