This is a rather specific and weird issue that is really bothering me now.
Here's the setup.
- I'm using Elementor Pro and I've created a single page template.
- I have four shortcode widgets on the page that is hooked up to ACF text fields.
- The ACF text field takes a shortcode source of an iframe from airtables as the argument (eg [airtable-view if='src xxx']. I have created the shortcode function and added it as a plugin. This works properly (code below).
The problem is this.
When I paste the four shortcodes directly in the template, all four of them are rendered properly in the final page. But when I use ACF and add the exact same shortcodes into the respective fields, only the first and third iframes are rendered. The second and third are ignored (the elements are not present even when I checked using the Inspector). Similarly, if I remove the first field, only the second and fourth are rendered. If the second one is removed, only the third one is rendered (the fourth one is skipped). And finally if all three are removed and only the fourth one is present, the fouth one is rendered but everything after that is not rendered.
I've tried everything I know to figure out what the issue but I think it's something related to the way Wordpress or elementor renders the pages from the template. I tried to isolate the problem by creating just four shortcode widgets on another template page and doing the same and this exact issue occurs. This looks like some async issue and I honestly have no idea how this works. If someone can figure it out, any help would be appreciated. The debug logs don't report anything related to this.
Here's my shortcode callback (it's used as a plugin).
function shortcodeToIframe($atts){
$iframe = shortcode_atts(array('if' => 'Default'), $atts);
$html = '<div class = "airtable-view">' .'<iframe class="airtable-embed"'. $iframe['if'] . '</iframe>' . '</div>';
return $html;
}
add_shortcode('airtable-view', 'shortcodeToIframe');
The shortcode I use is this
[airtable-view if = 'src = "https://airtables...">']