Show Avia codeblock and other Javascript-dependent post content

[mnelson4]

On furniturebank.org, they use Avia codeblocks on some pages, which work fine on the web view, but just look like a shortcode in the printout. Eg https://www.furniturebank.org/8049-2/ looks fine, but in the printout for the site, that page has the content [avia_codeblock_placeholder uid="0"] in it.
That's what's in the REST API response from http://www.furniturebank.org/wp-json/wp/v2/pages/3239, ie

"</div></div></div><!-- close content main div --></div></div><div id='av_section_1' class='avia-section header_color avia-section-default avia-no-border-styling avia-bg-style-scroll   av-arrow-down-section container_wrap fullsize' style = 'background-color: #ffffff; background-image: '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-3239'><div class='entry-content-wrapper clearfix'>\n<div class=\"flex_column av_one_full  flex_column_div first  \" ><p><div style='height:30px' class='hr hr-invisible  '><span class='hr-inner ' ><span class='hr-inner-style'></span></span></div><br />\n<span class=\"av_font_icon avia_animate_when_visible  av-icon-style-  avia-icon-pos-center \" style=\"color:#e83778; border-color:#e83778;\"><span class='av-icon-char' style='font-size:50px;line-height:50px;' aria-hidden='true' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' ></span></span><br />\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https://schema.org/CreativeWork\" ><div class='avia_textblock  '   itemprop=\"text\" ><p><a name=\"Donate\"></a></p>\n</div></section><br />\n<div style='padding-bottom:10px; color:#3a3a3a;font-size:35px;' class='av-special-heading av-special-heading-h3 custom-color-heading blockquote modern-quote modern-centered  av-inherit-size '><h3 class='av-special-heading-tag '  itemprop=\"headline\"  >HELP FURNISH HOPE</h3><div class ='av-subheading av-subheading_below av_custom_color ' style='font-size:25px;'><p>You have the power to transform lives.</p>\n</div><div class='special-heading-border'><div class='special-heading-inner-border' style='border-color:#3a3a3a'></div></div></div></p></div><div class=\"flex_column av_one_full  flex_column_div av-zero-column-padding first  \" style='border-radius:0px; '><p><div style='height:19px' class='hr hr-invisible  '><span class='hr-inner ' ><span class='hr-inner-style'></span></span></div><br />\n<section class=\"avia_codeblock_section  avia_code_block_0\"  itemscope=\"itemscope\" itemtype=\"https://schema.org/CreativeWork\" ><div class='avia_codeblock '  itemprop=\"text\" > [avia_codeblock_placeholder uid=\"0\"] </div></section></p></div><div style='height:40px' class='hr hr-invisible  '><span class='hr-inner ' ><span class='hr-inner-style'></span></span></div>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https://schema.org/CreativeWork\" ><div class='avia_textblock  '  style='font-size:20px; '  itemprop=\"text\" ><p style=\"text-align: center;\">Alternatively, if you would like to pay by mail, please download and fill out this <span style=\"text-decoration: underline;\"><strong><a href=\"http://www.furniturebank.org/wp-content/uploads/2015-Donation-Form1.pdf\">Donation Form</a></strong></span>.</p>\n</div></section>\n<div style='height:50px' class='hr hr-invisible  '><span class='hr-inner ' ><span class='hr-inner-style'></span></span></div>\n\n"

I was suspicious it was just because there was related Javascript which wasn't getting loaded, but I don't think that's the whole story. When I load the page without javascript, the pretty donation form isn't there, but nor is that shortcode. So there's something more going on here than just missing Javascript, but that's certainly a big part of it.

I suspect this issue goes beyond just Avia, it probably affects any blocks or shortcodes that depend on JS or CSS.
Ideally, the WP REST responses would include what JS and CSS are needed to display them properly, so the JS could include them dynamically. It sounds like something similar happened on WordPress/gutenberg#9734 and https://core.trac.wordpress.org/ticket/46138

[mnelson4]

This might be a little related: https://jakearchibald.com/2016/link-in-body/

[mnelson4]

Working with WP core to explore more general fixes: https://core.trac.wordpress.org/ticket/46379

[mnelson4]

Idea: once the page is loaded, remove all callbacks from jQuery(document).ready (maybe https://api.jquery.com/callbacks.remove/ will help?), then load all the js needed for each page, and finally re-fire jQuery(document).ready when done.

[mnelson4]

More discussion on unbinding callbacks from document.ready: https://stackoverflow.com/questions/7814408/clearing-a-jquery-document-ready-call

[mnelson4]

good news everyone! It turns out if you load Javascript after the jQuery(document).ready(...); callbacks have already fired, that new Javascript file's jQuery(document).ready(...); will also fire.
I made an experimental fix on https://github.com/mnelson4/printmyblog/archive/BUG/foogallery-support.zip (that just works for FooGallery).
So the next step is to have each REST API response inform what scripts and styles the post requires, and then load them all in the footer when done loading posts. 🤞

[mnelson4]

Avia is a premium theme, and so it doesn't seem fair to be giving free support for it. But generally this issue is still valid.