0

I'm trying to add an item into the block formats dropdown in TinyMCE. I would like to add a format called "Heading 2 Light".

In functions.php I add this code:

function theme_tiny_mce_before_init( $init ) {
    $init[ 'block_formats' ] = 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 2 Light=h2-light;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre';
    return $init;
}
add_filter( 'tiny_mce_before_init', 'theme_tiny_mce_before_init' );

and also this:

function theme_after_wp_tiny_mce() {
?>
    <script>
        jQuery( document ).on( 'tinymce-editor-init', function( event, editor ) {
            tinymce.activeEditor.formatter.register( 'h2-light', {
                block : 'h2',
                classes : 'light'
            } );
        } );
    </script>
<?php
}
add_action( 'after_wp_tiny_mce', 'theme_after_wp_tiny_mce' );

This code successfully adds "Heading 2 Light" to the list, but when I click on it to apply the format I get this JavaScript error:

Uncaught TypeError: Cannot read property '0' of undefined
    at Object.Eb [as applyFormat] (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at Lb (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at Object.toggle (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at d (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at mceToggleFormat (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at qg.execCommand (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at Hx.execCommand (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at wp-tinymce.php?c=1&ver=4800-20180716:5
    at i.onselect (wp-tinymce.php?c=1&ver=4800-20180716:5)
    at jg.c.fire (wp-tinymce.php?c=1&ver=4800-20180716:3)

The TinyMCE JavaScript file is minified, so it's very difficult to debug. Does anybody know what's causing this?

1 Answer 1

2
+50

What you have is working perfectly in a clean WordPress installation, using Twenty Seventeen, so it means the problem is the way in which you are minifying your JS or anything else within this specific WordPress installation.

Do the usual thing, deactivate all plugins and check again, if the problem is gone activate one by one until you find the one causing the problem, I am pretty sure that it's a plugin, but in case you do that and the problem is still happening, try to use a default template like Twenty Seventeen.

I have had many similar experiences with plugins like W3 Total Cache or similar, where I use them and they break things, so I have to find the guilty configuration, which you do the same way as you check for the guilty plugin, you set everything to default and start activating and testing each option to see which one is causing issues.

6
  • Wow, I feel somewhat vindicated knowing my code does actually work lol. Thanks! I'm actually working with a nearly clean WordPress installation, but you reminded me of a very important detail I missed. The TinyMCE editor is coming from Advanced Custom Fields, not from WordPress core, so it must be something with that. I have their Developer license, so off to their support forums I go! Thanks for your help!
    – Gavin
    Aug 31, 2018 at 17:04
  • Oh, it won't let me award you the bounty for another 14 hours, so I'll do that later :)
    – Gavin
    Aug 31, 2018 at 17:05
  • 1
    Thank you, I will really appreciate it! Those points are a game for me that make me happy xD and I'm glad I could be of any help. Aug 31, 2018 at 17:08
  • In case you happen to still have that code in your WP install, when you select the new block format you added (Heading 2 Light), does it maintain that item selected in the dropdown?
    – Gavin
    Aug 31, 2018 at 17:49
  • You are right, it has a little bug, I will try to look into it tomorrow. Sep 1, 2018 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.