Custom quicktags not working after Wordpress 6.0

Question

Custom quicktags not working after Wordpress 6.0

wp 5.8.x/5.9.x: working -- wp 6.0: not working

Buttons are not showing here: https://i.stack.imgur.com/aUXyV.jpg

Console error: Uncaught ReferenceError: QTags is not defined

I am using this code.

    function my_quicktags() {

    if ( wp_script_is( 'quicktags' ) ) {
    ?>
    <script type="text/javascript">
    QTags.addButton( 'eg_php', 'PHP', '<pre><code class=\"language-php\">', '</code></pre>', 'p', 'PHP Code', 200 );
    QTags.addButton( 'eg_css', 'CSS', '<pre><code class=\"language-css\">', '</code></pre>', 'q', 'CSS Code', 201 );
    QTags.addButton( 'eg_html', 'HTML', '<pre><code class=\"language-html\">', '</code></pre>', 'r', 'HTML Code', 202 );
    QTags.addButton( 'eg_callback', 'CSS div', css_callback );

    function css_callback(){
        var css_class = prompt( 'Class name:', '' );

        if ( css_class && css_class !== '' ) {
            QTags.insertContent('<div class="' + css_class +'"></div>');
        }
    }
    </script>
    <?php
    }

}
add_action( 'admin_print_footer_scripts', 'my_quicktags' );

Answer 1

I had the same problem. I fixed it by using the ep_enqueue_script aproach shown here: https://codex.wordpress.org/Quicktags_API listed under "A more modern example".

It's the same thing that Tom mentions. Instead of using 'admin_print_fotter_scripts' to write an inline script on the page, the example shows putting the Qtags javascript in a separate JS file, and loading it with 'admin_enqueue_scripts' as the action and calling wp_enqueue_script.

The Quicktags_API link above shows both methods, but the inline script method stoped working for me.

Answer 2

Found a fix.

    <script type="text/javascript">
           window.onload=function(){ 


    }
</script>

make sure the JS loads after the page fully loads this will allow the qtags js to work. Had the same issue as you right after I updated to 6.0. This fixed it for me.

Answer 3

You can use wp_add_inline_script to add more quicktags, ensuring it only runs when quicktags is used, and runs after it's loaded:

function add_quicktag_paragraph() {
    wp_add_inline_script(
        'quicktags',
        "QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p',     'Paragraph tag', 1 );"
);
add_action( 'wp_enqueue_scripts', 'add_quicktag_paragraph' );

Here the second parameter of wp_add_inline_script gets put into a <script> tag by WordPress, and it places it so that it shows after quicktags is loaded, not before. I've places a single line of code in my example but you could insert multiple lines instead.

This solves several problems the original snippet in the handbook had:

• it works on non-admin pages that use quicktags
• it always runs the code after quicktags is loaded, not before.
• no hardcoded script tags
• it's possible to filter and process this because of wp_add_inline_script
• if a plugin removes the quicktags code then this will not show and break

---

Another alternative is to write a JS file with your quicktags additions, and enqueue it, declaring quicktags as a dependency. This ensures it is always loaded in the correct order.

Answer 4

Another fix..

   <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', () => {
      QTags.addButton( 'test', 'Test', '<test>', '</test>', 'test' );
    });
    </script>

Answer 5

This work for me (more info)

My QTags:

QTags.addButton('codelights', 'CodeLights', btnAction);

I edit to:

window.onload = function() {
    QTags.addButton('codelights', 'CodeLights', btnAction);
};

Answer 6

I had the same problem, my custom quicktags I use in the Classic Editor (Text tab) disappeared after updating to 6.0+ and after much research I can confirm that the old code DOES still work with the addition of a single line of script (a window event) as suggested above by @kegnum and @Dominator0 (thanks!).

HERE is the full code snippet in case anyone needs it, be sure to modify this to suit your OWN needs, here I am adding some H tags:

// add more buttons to the html editor
function twe_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
window.addEventListener('load', function(){
QTags.addButton( 'eg_heading_3', 'h3', '<h3>', '</h3>', 'h3', 'Heading 3 tag', 1 );
QTags.addButton( 'eg_heading_4', 'h4', '<h4>', '</h4>', 'h4', 'Heading 4 tag', 1 );
QTags.addButton( 'eg_heading_5', 'h5', '<h5>', '</h5>', 'h5', 'Heading 5 tag', 1 );
});
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'twe_add_quicktags' );

I know there are several other methods, but this is a very simple one and it does the trick.