REST API returning empty data-shortcode attribute

[juniormiranda89]

Our REST API is returning empty the Instagram embed data-shortcode attribute.

We have no custom sanitizations, only one call to amp_get_content_sanitizers() function. Here's our post content rendering code:

private function get_the_content()
    {
        ob_start();
        the_content();
        $content = ob_get_clean();

        $sanitizers = amp_get_content_sanitizers();

        $embeds = apply_filters('amp_content_embed_handlers', array(
            'AMP_Instagram_Embed_Handler' => array(),
            'AMP_Twitter_Embed_Handler' => array(),
            'AMP_Facebook_Embed_Handler' => array(),
        ));

        $amp_content = new \AMP_Content($content, $embeds, $sanitizers);

        $html = $amp_content->get_amp_content();

        // more links
        $more = new MoreLinks();

        $handler = new ContentHandler($html);
        $handler->insertBefore($more->render(), 0);

        return $handler->html();
    }

And our content handle class:

class ContentHandler
{
    private $content;

    public function __construct($content)
    {
        $this->content = $content;
    }

    public function insertBefore($html, $position = 0, $element = 'p')
    {
        $closing_el = "</" . $element . ">";
        $elements = explode($closing_el, $this->content);

        foreach ($elements as $i => $el) :
            if (trim($el)) {
                $elements[$i] .= $closing_el;
            }

            if ($i === $position) {
                $elements[$i] .= $html;
            }
        endforeach;

        $this->content = implode('', $elements);
    }

    public function length($el)
    {
        $closing_el = "</" . $el .  ">";
        return count(explode($closing_el, $this->content));
    }

    public function html()
    {
        return $this->content;
    }
}

If we change the variable to:

$instagram_id = $this->get_instagram_id_from_url( 'https://www.instagram.com/p/CONSk9aHq7y/' );

the API gets the value and can render the data-shortcode="CONSk9aHq7y" attribute as expected.

amp-wp/includes/embeds/class-amp-instagram-embed-handler.php

Line 173 in b28697b

$instagram_id = $this->get_instagram_id_from_url( $node->getAttribute( 'data-instgrm-permalink' ) );

[westonruter]

I'm not clear on what the issue is. What is the original markup being used as input and what are you expecting as output?

[juniormiranda89]

The original markup is the common embed guttenberg markup generated with help of the oEmbed Plus plugin:

<!-- wp:embed {"url":"https://www.instagram.com/p/CONSk9aHq7y/","type":"rich","providerNameSlug":"instagram","className":""} -->
<figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram"><div class="wp-block-embed__wrapper">
https://www.instagram.com/p/CONSk9aHq7y/
</div></figure>
<!-- /wp:embed -->

As output we expect the commom amp markup like this:

<amp-instagram data-shortcode="CONSk9aHq7y" layout="responsive" width="600" height="600" data-captioned="" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-element i-amphtml-notbuilt amp-notbuilt i-amphtml-error" i-amphtml-layout="responsive" style="--loader-delay-offset:1ms !important;">...</amp-instagram>

But we´re getting this where everything is fine, but the data-shortcode attribute is empty:

<amp-instagram data-shortcode="" layout="responsive" width="600" height="600" data-captioned="" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-element i-amphtml-notbuilt amp-notbuilt i-amphtml-error" i-amphtml-layout="responsive" style="--loader-delay-offset:1ms !important;">...</amp-instagram>

[pierlon]

@juniormiranda89 The Instagram URL in question is for a Instagram Reel, which is currently unsupported by the plugin. I've opened #6170 to resolve this. If you can, please test this change by downloading the plugin build from #6170 (comment) and confirm that it does indeed resolve your issue.

[juniormiranda89]

@pierlon Thank you for the support. It solved the issue. Now the Instagram's embeds is rendering in the right way.

[pierlon]

Glad to hear. Keeping the issue open until the PR has been merged.

[westonruter]

@juniormiranda89 Please make sure you update your build to 2.1.x as linked to from https://github.com/ampproject/amp-wp/wiki/Development-Builds

Since you've currently installed a 2.2-alpha build, you'll want to switch to a 2.1-RC1 build so that WordPress will prompt you to update for 2.1.x updates.

[juniormiranda89]

@westonruter Thank you for the explanation.