Support » Everything else WordPress » Update failed – Custom HTML Block Javascript

  • Resolved 10bradders10

    (@10bradders10)


    Hi,

    I’ve been told by the WP Core team that this isn’t a bug.

    I’m getting “Update Failed” after trying to add some javascript code into a Custom HTML Block.

    Apparently this is the correct location to add the snippet of code, and I’ve tried different javascript code, to have the same error.

    Already tried the ‘permalinks’ update suggestion. No good.

    Any ideas please?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator bcworkz

    (@bcworkz)

    Yes, you cannot reliably add JS code directly into any block, which are intended only for HTML and text. While the script tags may technically be HTML, your JS code certainly is not HTML or text.

    JS is best enqueued or at least output from the “wp_print_scripts” action which fires in the head section. If you JS really must occur in post content, create a custom shortcode whose handler returns the desired script tags and code. WP will replace the shortcode with the returned string during output to the browser.

    Thread Starter 10bradders10

    (@10bradders10)

    Thanks @bcworkz,

    Have you got a link, on how best to do this please?
    “If you JS really must occur in post content, create a custom shortcode whose handler returns the desired script tags and code. WP will replace the shortcode with the returned string during output to the browser.”

    Do you know of a way to use Google Tag Manager to store and fire all the javascript on the specific page with a shortcode on the page?
    This would be the best approach for the WP community, any ideas please?

    Still unclear as to why on a Dev site the JS code works with a page update, and yet not on a live site.

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    You can sometimes get away with JS in post content working for a while, but it won’t last. Depending on what someone does with the editor, sooner or later the JS will get corrupted.

    So the script src reference to googletagmanager is in your head section and you’re merely adding gtag() calls in content to pass data to Google Analytics? Or are you wanting to output the script src reference and everything? Either way will work. What won’t work is if the script src reference is in the footer and you make gtag() calls in content.

    Shortcodes can output anything you want, so outputting gtag code in a script block isn’t a problem. More on shortcodes here: https://codex.wordpress.org/Shortcode_API
    Note that shortcode content is always collected into a variable which is returned for WP to echo out at the right time. Never echo anything out from a shortcode handler function. In the block editor, shortcodes are best added in their own dedicated block, though I believe placing in a custom HTML block will also work.

    Thread Starter 10bradders10

    (@10bradders10)

    Thanks @bcworkz,

    So the script src reference to googletagmanager is in your head section and you’re merely adding gtag() calls in content to pass data to Google Analytics? Or are you wanting to output the script src reference and everything? Either way will work.

    I would like to add the script to GTM, and then fire it on a specific page where the shortcode is placed on the page. So the code can be echoed out.

    Example –
    <script src="https://bookme.name/js/booklikeaboss.embed.js?i=3048&h=k4ND4TCutlQuiswPPstg5wI4oBCoNMosqHka7NT19bHRzB2VnmIo4I0J9SRn" async></script>

    I can add that to GTM, but how do I create the shortcode to echo it out on the page?
    Is that possible?

    I thought this issue would have been picked up prior to the Gutenberg release.

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    Yeah, I believe it’ll work from a shortcode. Google scripts can be picky on where they occur on a page. See the link in my last reply for creating shortcodes. Basically, assign the entire script to a variable and return it.

    Scripts normally belong in head or footer sections, page content really isn’t the right place even though it usually works. This might be why it’s not addressed in the block editor, IDK. You can place code in head or footer and conditionally output it only when the one page is requested.

    Thread Starter 10bradders10

    (@10bradders10)

    Thanks @bcworkz,

    I’ve had a look at the Shortcode codex, but I don’t see the relevant code for GTM with a variable?

    I can’t believe I’m the first to come across this issue, where 3rd parties provide an embed code, but it doesn’t work in the Block Editor.

    Not sure of your role @bcworkz, but I appreciate your reply, thank you.

    Thanks.

    Moderator bcworkz

    (@bcworkz)

    I’m principally just another forum member trying to help other’s where I can. I have moderator rights so I can help out with removing spam and other tasks keeping the forums a good community resource, but those tasks take a small amount of my total time in the forums.

    Adding GTM code by shortcode is basically

    function bartag_func( $atts ) {
    	return "<script><!-- GTM code goes here --><script>";
    }
    add_shortcode( 'bartag', 'bartag_func' );

    Add this to your theme’s functions.php

    In post/page content where you want GTM code to appear, insert a shortcode block which contains [bartag] (or add to a custom HTML block). Of course you can change all “bartag” occurrences to what works for you. Mind the quotes in GTM code. Either use single quotes, or escape double quotes like this \"

    Thread Starter 10bradders10

    (@10bradders10)

    Thanks @bcworkz,

    I’ve found the issue was the CloudFlare Firewall.

    Solution – Use a Bypass WAF rule based on the IP address.

    Looking for a permanent solution so its not based on IP.

    Thanks for your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Update failed – Custom HTML Block Javascript’ is closed to new replies.