[Resolved] Updated from Types 2.3.5 -> 3.3.12, nested shortcodes no longer working

[Author]

Posts

[josephC-4]

I am trying to: Have my pages load up their shortcode plugins as normal

Link to a page where the issue can be seen: hidden link

I expected to see: The page template has a field on the back end to include a shortcode that loads an accordion plugin. The accordion has several panels with shortcodes that load TablePress tables.

Instead, I got: shortcodes displaying in plain text. Downgrading to 2.3.5 brings things back to normal

[josephC-4]

I suspect the issue has something to do with this code entry in my functions php file...

/*------------------------------------*\
ShortCode Functions
\*------------------------------------*/

// Shortcode Demo with Nested Capability
function html5_shortcode_demo($atts, $content = null)
{
return '<div class="shortcode-demo">' . do_shortcode($content) . '</div>'; // do_shortcode allows for nested Shortcodes
}

// Shortcode Demo with simple <h2> tag
function html5_shortcode_demo_2($atts, $content = null) // Demo Heading H2 shortcode, allows for nesting within above element. Fully expandable.
{
return '<h2>' . $content . '</h2>';
}

[josephC-4]

Not sure if related... but I'm now finding that as of WP 5.5, I can no longer save changes made to tables in TablePress when Types is enabled. The save button is clickable, it just simply does nothing.

Please note, I've rolled back Types to version 2.3.5 for the time being, as this is our live website and I need it to remain functional. We have a lot of nested shortcodes.

If helpful, Javascript console coughs up the following:

load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370 Uncaught TypeError: o.widget is not a function
    at load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370
    at load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370
    at load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370
(anonymous) @ load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370
(anonymous) @ load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370
(anonymous) @ load-scripts.php?c=0&load[chunk_0]=thickbox,hoverIntent,common,hoverintent-js,admin-bar,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,wp-dom-ready,wp-a11y,post&load[chunk_1]=box,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-dialog,wpdialogs,shortcode,wp-util,wp-backbone,media-mode&load[chunk_2]=ls,wp-plupload&ver=5.5:370
media-views.min.js?ver=5.5:2 Uncaught TypeError: Cannot set property 'isTouchDevice' of undefined
    at Object.<anonymous> (media-views.min.js?ver=5.5:2)
    at o (media-views.min.js?ver=5.5:2)
    at Object.<anonymous> (media-views.min.js?ver=5.5:2)
    at o (media-views.min.js?ver=5.5:2)
    at media-views.min.js?ver=5.5:2
    at media-views.min.js?ver=5.5:2
(anonymous) @ media-views.min.js?ver=5.5:2
o @ media-views.min.js?ver=5.5:2
(anonymous) @ media-views.min.js?ver=5.5:2
o @ media-views.min.js?ver=5.5:2
(anonymous) @ media-views.min.js?ver=5.5:2
(anonymous) @ media-views.min.js?ver=5.5:2
media-editor.min.js?ver=5.5:2 Uncaught TypeError: Cannot set property 'coerce' of undefined
    at media-editor.min.js?ver=5.5:2
    at media-editor.min.js?ver=5.5:2
(anonymous) @ media-editor.min.js?ver=5.5:2
(anonymous) @ media-editor.min.js?ver=5.5:2
media-audiovideo.min.js?ver=5.5:2 Uncaught TypeError: Cannot set property 'mixin' of undefined
    at Object.<anonymous> (media-audiovideo.min.js?ver=5.5:2)
    at o (media-audiovideo.min.js?ver=5.5:2)
    at Object.<anonymous> (media-audiovideo.min.js?ver=5.5:2)
    at o (media-audiovideo.min.js?ver=5.5:2)
    at media-audiovideo.min.js?ver=5.5:2
    at media-audiovideo.min.js?ver=5.5:2
(anonymous) @ media-audiovideo.min.js?ver=5.5:2
o @ media-audiovideo.min.js?ver=5.5:2
(anonymous) @ media-audiovideo.min.js?ver=5.5:2
o @ media-audiovideo.min.js?ver=5.5:2
(anonymous) @ media-audiovideo.min.js?ver=5.5:2
(anonymous) @ media-audiovideo.min.js?ver=5.5:2
mce-view.min.js?ver=5.5:2 Uncaught TypeError: Cannot read property 'template' of undefined
    at mce-view.min.js?ver=5.5:2
    at mce-view.min.js?ver=5.5:2
(anonymous) @ mce-view.min.js?ver=5.5:2
(anonymous) @ mce-view.min.js?ver=5.5:2
droppable.min.js?ver=1.11.4:11 Uncaught TypeError: a.widget is not a function
    at droppable.min.js?ver=1.11.4:11
    at droppable.min.js?ver=1.11.4:11
    at droppable.min.js?ver=1.11.4:11
(anonymous) @ droppable.min.js?ver=1.11.4:11
(anonymous) @ droppable.min.js?ver=1.11.4:11
(anonymous) @ droppable.min.js?ver=1.11.4:11
slider.min.js?ver=1.11.4:11 Uncaught TypeError: r.widget is not a function
    at slider.min.js?ver=1.11.4:11
    at slider.min.js?ver=1.11.4:11
    at slider.min.js?ver=1.11.4:11
(anonymous) @ slider.min.js?ver=1.11.4:11
(anonymous) @ slider.min.js?ver=1.11.4:11
(anonymous) @ slider.min.js?ver=1.11.4:11
iris.min.js?ver=1.0.7:5 Uncaught TypeError: a.widget is not a function
    at iris.min.js?ver=1.0.7:5
    at iris.min.js?ver=1.0.7:5
(anonymous) @ iris.min.js?ver=1.0.7:5
(anonymous) @ iris.min.js?ver=1.0.7:5
color-picker.min.js?ver=5.5:2 Uncaught TypeError: i.widget is not a function
    at color-picker.min.js?ver=5.5:2
    at color-picker.min.js?ver=5.5:2
(anonymous) @ color-picker.min.js?ver=5.5:2
(anonymous) @ color-picker.min.js?ver=5.5:2
menu.min.js?ver=1.11.4:11 Uncaught TypeError: o.widget is not a function
    at menu.min.js?ver=1.11.4:11
    at menu.min.js?ver=1.11.4:11
    at menu.min.js?ver=1.11.4:11
(anonymous) @ menu.min.js?ver=1.11.4:11
(anonymous) @ menu.min.js?ver=1.11.4:11
(anonymous) @ menu.min.js?ver=1.11.4:11
autocomplete.min.js?ver=1.11.4:11 Uncaught TypeError: u.widget is not a function
    at autocomplete.min.js?ver=1.11.4:11
    at autocomplete.min.js?ver=1.11.4:11
    at autocomplete.min.js?ver=1.11.4:11
(anonymous) @ autocomplete.min.js?ver=1.11.4:11
(anonymous) @ autocomplete.min.js?ver=1.11.4:11
(anonymous) @ autocomplete.min.js?ver=1.11.4:11
common.min.js?ver=1.11:1 Uncaught ReferenceError: postboxes is not defined
    at HTMLDocument.<anonymous> (common.min.js?ver=1.11:1)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

[Luo Yang]

Hello,

It seems to be a compatibility issue, and it is recommended to use the latest version of Toolset plugin, the Types plugin 2.3.5 is too old and outdated, there will be unexpected result if you use it with the new WP installation 5.5.

So I suggest you try these:
1) Backup your website
2) Install the latest version of Toolset plugins, you can download them here
https://toolset.com/account/downloads/

3) Try to fix the shortcode issues.
In the PHP codes you mentioned above:
https://toolset.com/forums/topic/updated-from-types-2-3-5-3-3-12-nested-shortcodes-no-longer-working/#post-1735291

There isn't add_shortcode() WP function at all.
It will conducts the problem: shortcodes displaying in plain text
I suggest you follow WP document to setup your custom PHP codes:
https://developer.wordpress.org/reference/functions/add_shortcode/

For example:

add_shortcode( 'html5_shortcode_demo', 'html5_shortcode_demo' );
function html5_shortcode_demo($atts, $content = null)
{
return '<div class="shortcode-demo">' . do_shortcode($content) . '</div>'; // do_shortcode allows for nested Shortcodes
}

Then use shortcode [html5_shortcode_demo] in your post/page content.

[josephC-4]

My apologies, I am not nearly as well versed in this stuff as you are. I should note that the following code appears above the snippet I previously shared:

// Shortcodes
add_shortcode('html5_shortcode_demo', 'html5_shortcode_demo'); // You can place [html5_shortcode_demo] in Pages, Posts now.
add_shortcode('html5_shortcode_demo_2', 'html5_shortcode_demo_2'); // Place [html5_shortcode_demo_2] in Pages, Posts now.

// Shortcodes above would be nested like this -
// [html5_shortcode_demo] [html5_shortcode_demo_2] Here's the page title! [/html5_shortcode_demo_2] [/html5_shortcode_demo]

I don't understand why everything renders fine in the old outdated version, but breaks in the latest. I really have no idea how to troubleshoot.

[Luo Yang]

Since it is a compatibility issue, please provide a full copy of your website in below private message box, you can put the package files in your own google drive disk, share the link only, also point out the file or URL: Where I can edit your custom PHP codes
I need to test and debug it in my localhost, thanks

[josephC-4]

I appreciate that Luo. Our website is pretty big so that could take some time. In the meantime, I'm still trying to investigate. This issue only seems to appear on one specific page template. In the Types edit post field group options, there is an entry called "custom accordion (single line)" - this gives us an entry field (meta box) to paste the shortcode required to make this page function correctly. Could I be overlooking some kind of option that may have changed somewhere?

[Luo Yang]

Since I don't have a copy of your website, I can only guess that your website is using some custom codes to render your custom shortcode inside "custom accordion" field.

That is not a built-in feature of Toolset plugins, it should be a feature of your website custom codes.

[josephC-4]

Luo, how do I send to you privately? Would it be easier if instead I just provided you with access to our site?

[Luo Yang]

Please backup your website first, I might need to deactivate plugins/theme to locate the problem
And provide your website credentials + FTP access in below private message box.
Also point out the file or URL: Where I can edit your custom PHP codes.

Private message box enabled again, thanks

[Luo Yang]

Thanks for the details, I have done below modifications in your website:
Edit theme file "template-D-Custom-Accordian.php":
hidden link
line 38, replace it from:

echo $accordion;

With:

echo do_shortcode($accordion);

Please test again, check if it is fixed. thanks

[josephC-4]

You are AWESOME! My issue is resolved now. Thank you!