iFrames when using custom shortcode, ACF and Elementor only renders alternate ones

Question

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...">']

Answer 1

The iframes not showing is probably caused by the shortcode parser freaking out by how you pass the parameter to it. I tested your code example / shortcode (added 4 times to the post content) and here's what I got as a result,

<div><iframe class="airtable-embed" &#8217;src<="" iframe=""></div>
<div class = "airtable-view"><iframe class="airtable-embed"&#8217;src</iframe>

It might be better idea to format your shortcode callback function along these lines,

function shortcodeToIframe($atts){

  $default = array(
    'src' => '',
  );
  $atts = shortcode_atts( $default, $atts );

  if ( ! $atts['src'] ) {
    return;
  }

  return sprintf(
    '<div class="airtable-view"><iframe class="airtable-embed" src="%s"></iframe></div>',
    esc_url( $atts['src'] )
  );

}

And then use the shortcode like this,

[airtable-view src="http://www.domain.com"]

This would make the parameter explicit and there would be no extra quotes, double quotes, or equals signs to confuse the shortcode parser.

Answer 2

As a work around you can make it work with the Elementor Shortcode Widget and for example this iFrame Shortcode Plugin: https://de.wordpress.org/plugins/iframe/

Then in the Elementor Template you make use of the before and after parameters of the Shortocode Widget with a Custom field, like this:

before: [iframe src=" after: " width="100%" height="500"]

And in the Custom field, in the Backend just only put the iFrame Url.

See Screenshot here:

Alternative: use a Crocoblock Repeater Field, there is iframe Output possible: https://crocoblock.com/knowledge-base/articles/jetengine-dynamic-repeater-widget-overview/

A bit off topic (not really iFrame related): This is really powerfull, for example i managed to get dynamic Instagram Posts based on Usernames in User Profile Pages.