Pro Page Editor not working when using plugin-generated Shortcode within tabbed element/Global block

Page editor does not display my sections in edit mode when there is a plugin-generated shortcode embedded in a tabbed element within Pro's off-canvas modal element within the global header (plugin AWSM Team Pro) Here's a screen print which shows a side-by-side of how it should look versus how it looks when I have the AWSM shortcode in the Off-canvas element in the global header : https://cl.ly/2i3G1z1l3A1y

FYI Here's the path to the AWSM embedded shortcode: Global header > Main header bar > Menu Container > Content Area Off Canvas Element (Contact US) > Global Block embedded with this off canvas element > within this global block are 3 sections; one of which contains a Tabbed Element >> Within the second tab of this elements is the AWSM shortcode (Employee directory team) .

FYI Here's a video describing the issue: https://cl.ly/2d3M0v173g0R (its about 6 minutes long. note: there are a few more minutes at the end after I say I'm done.

FYI Here's a gif on how to get the AWSM directory from the front-end as a user: https://cl.ly/470L3d0N4115

Can you help me resolve this issue? Should I provide you wp-admin credentials to help troubleshoot?

Thanks so much!

Brad

Hello Brad,

Thank you for the very detailed post information. This issue usually happens when the plugin generates a broken html output which may have messed the Cornerstone preview area which is why no sections were being displayed. I would like to investigate further. If you won't mind, please provide us url of the page in question and access to your site so that we can take a closer look. To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

Regards.

1 Like

Added secure note... Thanks Rue!

Hello There,

Thanks for providing the information. I have logged in and I found out that there is a CORS issue in the site. This happens when the dashboard url is https while your site url and wordpress address url in Settings > General is just using http.

I went ahead and have corrected it already. I cleared your WPEngine cache and loaded Cornerstone. It turns out that Caldera Forms is causing an issue. There is a JS error generated by the plugin which have prevented the Pro editor to load. Please deactivate Caldera Form and we can do another round of test.

Hope this helps. Please let us know how it goes.

Thank you Rue for looking into this and making that change. You have my permission to deactivate that plugin and do whatever you need to do to confirm the issue and hopefully come up with a corrective action. I plan to be out of the admin area for next 24 hours. This cool or do you need me to do anything?

Thanks!
Brad

Hi Brad,

I went to your website and disabled the Form plugin and got another error regarding the Essential Grid. I disabled the Essential Grid and now I see no error in the browser console but it still did not show the sections.

I added another test page and the same thing happens. Unfortunately, it seems that the shortcode you have mentioned indeed messes with the builder and we can not find why this is happening.

You have 2 choices here:

  1. Avoid using that 3rd party plugin shortcode or disable it each time you want to do a change in the builder.
  2. Use the Skeleton mode of the builder which works with no problem and it gives a wireframe mode of the same options you can use. It seems the plugin ruins the preview and not the core functionality of the builder.

For more information about the Skeleton mode please read this Sibar Options section of the article below:

Thank you.

Thank you for the detailed analysis and suggestions. So which plugin short code is the culprit? Is it the AWSM Team shortcode, the caldera form short shortcode, or a combination of both?

I use both of these plugins on 3 other sites using your Pro builder and don't appear to be having the same issue (I'm going to confirm this today becuase its been a few months since I've made updates to those sites).

As a short-term solution, i will certainly use the options proposed above. But how do we handle a long-term solution considering these are popular plugins that I hope to use on my future sites with the pro builder? is this something you'll need to make compatible or is it the plugin developer's responsibility or is it a combination of both? Please advise.

Thanks
Brad

Hi Brad,

As we mentioned at first as it is the 3rd party plugin problem you will need to contact the developer of the plugin to follow up.

But in this case, please avoid using the plugins and test the case. The best way is that you disable all plugins and test the case. Then enable the plugins one by one and see which one is the actual problem cause.

Thank you.

How did you come to the conclusion the problem I'm facing - Pro Editor not loading for a page - is caused by a 3rd party plugin if you haven't determined which plugin is involved in the symptoms I'm experiencing?

It's the AWSM Team plugin that's involved (as stated in my initial post). I confirmed this via an additional exhaustive deductive process which involved disabling and enabling plugins and adding and removing the plugin shortcode to various elements in the header and the page itself. Here are my findings:

  • The issue ONLY occurs if I use the AWSM shortcode ([awsmteam id="736"]) in the Content Area Modal or the Content Area Off Canvas elements IN THE HEADER.
  • The issue only occurs when trying to edit a page in which that header - the one containing the shortode in a Modal or Off-canvas element - is linked to the page.
  • This issue DOES NOT occur when i use this same short code in the Content Area drop-down or a Content Area elements in the header
  • This issue DOES NOT occur when I use the same shortcode in ANY element on a page or post, as long as the shortcode does not exist in the Content Area Modal or Off Canvas elements in the linked header.

Is there something unique about these two elements - Content Area Modal and Off Canvas Modal - and the fact that they are in the header that would cause an issue with the Pro Editor loading for a page?

Why would this shortcode work in every other scenario except for this one?

Please advise.

Thanks,
Brad

Hi Brad,

Actually that is a great finding and yes there is a common characteristic between both Content Area Modal and Off Canvas. Both of those elements use the lihtbox functionality and Javascript library to show the content in somehow pop up way.

The Normal Content Area and the Dropdown version of it do not use the lightbox feature.

It seems that the 3rd party plugin shortcode has a conflict with lightbox functionality of the theme.

Unfortunately, we will not be able to change the lightbox javascript library that we use in our theme as there are many interconnected factors and elements to that library. I am afraid you will need to avoid using the shortcode in Content Area Modal or Off Canvas or any section of the website that uses the lightbox feature.

Thank you for your understanding.

Hi Christopher
Thanks for your response. Do you know why there is only a conflict with the lightbox functionaity when using their shortcode in the header? As mentioned, when i use the shortcode in one of your elements, containing the lightbox functionality, on a normal page (aka. not in header) then the Pro editor loads just fine. Its only when i have the shortcode in one of these elements in the header and the page I try to edit is linked to this header.

Thanks,
Brad

Hi Brad,

mmm... I am not sure about that. The header/footer builders do have different characteristics than the content builder. For example, the whole layout system uses the Flex properties that might have conflict. Honestly, I am not sure about that.

But anyway that will not change the fact which I already mentioned and you will need to avoid using the shortcode on that fashion.

Thank you for your understanding.

@bradmaclean try wrapping the shortcode in a pair of brackets like so: [[awsmteam id="736"]].

I had a similar issue with the use of a plugins shortcode breaking the X Pro editor, and doing this fixed it for me.

Thanks @5foldmarketing for your suggestion.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.