Add AMP-compatibility to pym shortcodes/blocks/raw embeds

[claudiulodro]

Changes

• This PR brings the Pym.js AMP-compatibility tweaks from Newspack to this plugin.
• It converts the Pym shortcode, Pym block, and Pym embeds in the raw HTML block into AMP-compatible versions of the same embed on AMP pages.

• In the page being embedded, the following snippet should be added to the bottom:

  <script>window.addEventListener( 'load', () => {
  function sendEmbedSize() {
      window.parent.postMessage({
          sentinel: 'amp',
          type: 'embed-size',
          height: document.body.scrollHeight
      }, '*');
  }
  
  sendEmbedSize();
  
  // Try to make sure elements created dynamically (e.g. graphics) are sized properly.
  setTimeout( sendEmbedSize, 500 );
  
  // Update embed size after clicks.
  document.addEventListener( 'click', sendEmbedSize, { passive: true } );
  } );
  </script>

  If the snippet is not added, the embed will be rendered in a square aspect ratio but will otherwise continue working correctly. When AMP gets native Pym-compatibility, this step will ideally not be required any more. The snippet shouldn't affect anything on non-AMP pages.

Why

Closes #59

Testing/Questions

Questions that need to be answered before merging:

• How does the versioning scheme work for this plugin? What should I add for @since in the new functions?

Steps to test this PR:

0. Install and activate the official AMP plugin. For testing, it's easiest if you set the Website Mode in WP-Admin > AMP > General to 'Transitional' mode so you can flip between AMP and non-AMP versions of the same page.
1. Add the following code to a block-editor-enabled page (in details):

```

Minima assumenda sed est natus ut. quidem optio neque eum Odio sed sapiente ut recusandae molestiae. Sed laboriosam quas veniam. Error soluta vel Est eum dicta nesciunt quaerat saepe. Quaerat aut et officia Esse deserunt voluptate ea possimus Nihil quia ut doloribus dicta repudiandae. Dolorem soluta perferendis odit. Quia ut consequuntur eum ea harum. Quia expedita voluptates repellat omnis est. Corporis cum adipisci ut. Laboriosam voluptatibus eligendi recusandae ducimus molestias. voluptas adipisci ipsam. Corporis voluptatibus unde facilis repellendus quia neque Impedit illo non dignissimos nemo

Quasi nihil in assumenda qui amet eum Et ut qui iusto maiores. Rem sint unde quasi. Earum pariatur sunt sed consequatur Expedita omnis harum dolores. Blanditiis temporibus rerum debitis quia ipsam Quaerat distinctio est voluptatem aut expedita. rerum ut numquam laborum Aut temporibus harum Sed suscipit ut nam. Excepturi aut assumenda accusantium voluptates. Veniam amet est optio harum et Ut voluptatem inventore enim velit itaque. qui delectus deleniti corporis. molestiae sed non. Et voluptate sunt dicta sit voluptas deserunt in. beatae natus quos ad. Necessitatibus iste molestiae harum Eaque et eum et nulla. Est est ab magnam. Eos eaque eligendi ut illum molestias. Omnis totam quisquam temporibus sit sit. Cum consequatur omnis nobis officia.

https://s3.us-west-2.amazonaws.com/projects.oklahomawatch.org/oklahoma-legislature/senate.html

Quasi nihil in assumenda qui amet eum Et ut qui iusto maiores. Rem sint unde quasi. Earum pariatur sunt sed consequatur Expedita omnis harum dolores. Blanditiis temporibus rerum debitis quia ipsam Quaerat distinctio est voluptatem aut expedita. rerum ut numquam laborum Aut temporibus harum Sed suscipit ut nam. Excepturi aut assumenda accusantium voluptates. Veniam amet est optio harum et Ut voluptatem inventore enim velit itaque. qui delectus deleniti corporis. molestiae sed non. Et voluptate sunt dicta sit voluptas deserunt in. beatae natus quos ad. Necessitatibus iste molestiae harum Eaque et eum et nulla. Est est ab magnam. Eos eaque eligendi ut illum molestias. Omnis totam quisquam temporibus sit sit. Cum consequatur omnis nobis officia.

[pym src='https://s3.us-west-2.amazonaws.com/projects.oklahomawatch.org/oklahoma-legislature/senate.html'] ```

3. View on the frontend in AMP and regular mode. You should see an interactive map each place there is a Pym.js embed.

To test resizing:

1. Add the following snippet to the footer of the site/page you want to embed:

``` ```

2. In AMP-mode, view the page. If the graphic is not directly in the viewport when the page loads, it should automatically be resized correctly. If it is in the viewport when the page loads, you should see something like this:
3. Clicking on that will resize the height of the graphic correctly:

[westonruter]

Add the following snippet to the footer of the site/page you want to embed

This will be unnecessary once https://github.com/ampproject/amphtml/issues/22714 is resolved.

[benlk]

How will https://github.com/ampproject/amphtml/issues/22714 resolve the need for sites to edit their Pym child pages?

[westonruter]

How will ampproject/amphtml#22714 resolve the need for sites to edit their Pym child pages?

Child pages would no longer be required to include this code:

<script>window.addEventListener( 'load', () => {
    function sendEmbedSize() {
        window.parent.postMessage({
            sentinel: 'amp',
            type: 'embed-size',
            height: document.body.scrollHeight
        }, '*');
    }

    sendEmbedSize();

    // Try to make sure elements created dynamically (e.g. graphics) are sized properly.
    setTimeout( sendEmbedSize, 500 );

    // Update embed size after clicks.
    document.addEventListener( 'click', sendEmbedSize, { passive: true } );
} );
</script>

Because amp-iframe would directly understand the Pym message protocol.

[benlk]

@westonruter Ah, okay, that makes sense.

[benlk]

@claudiulodro

How does the versioning scheme work for this plugin? What should I add for @since in the new functions?

Our version numbering strategy is described at https://github.com/INN/pym-shortcode/blob/master/docs/maintainer-notes.md . Since the current version of Pym.js is 1.3.2, and the last release of this plugin was 1.3.2.2, you should use 1.3.2.3 as the version number for the next release.

Is the test case you included in the pull request text the only test you used? If so, can you run through as many of the tests at https://github.com/INN/pym-shortcode/blob/master/docs/maintainer-notes.md#testing-before-release as you have time for?

[claudiulodro]

I've updated the @since tag to the correct version.

I've also tested the test cases you've linked, and added handling for alignment. The test cases all display on AMP. The only issue I noticed is the known resizing issue (there might be too much/too little padding on existing embeds that don't have the resize code snippet until AMP gets native Pym.js compatibility).

I believe this should be ready to go, pending your review and approval. :)

[benlk]

Here's a screenshot of a page using several embeds from the unmodified https://blog.apps.npr.org/pym.js/examples/table/child.html :

The embeds have initialized in square mode, without a resize button.

page content

The following is a Pym Embed from NPR: https://blog.apps.npr.org/pym.js/examples/table/child.html

https://blog.apps.npr.org/pym.js/examples/table/child.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus ligula id est volutpat suscipit. Etiam tempus turpis vel arcu ultricies porttitor. Cras vel bibendum dui, in porttitor ipsum. Phasellus nec nisi eros. Morbi mollis sapien nec vulputate dignissim. Proin justo tortor, ullamcorper non porttitor quis, eleifend non nisi.

Shortcode pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html"

[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html"]

Nam faucibus ornare elit, ut ultrices nibh aliquet a. Donec varius, lorem molestie fringilla eleifend, mauris nisl porta tellus, non varius leo urna eu elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor varius ex sed facilisis. Donec lobortis mauris risus, at dictum sapien ullamcorper a. Quisque tempus eu ipsum at tincidunt. Donec sit amet faucibus nisi.

 “It’s a shame, but what can we do? There really wasn’t anything that was going to keep this individual from snapping and killing a lot of people if that’s what they really wanted.”

Maecenas facilisis dignissim turpis, eu rutrum purus aliquet ac. Sed pellentesque aliquet enim, eget sodales augue elementum a. In hac habitasse platea dictumst. Etiam sit amet massa porttitor, auctor nisi tristique, interdum sem. Mauris eget tincidunt eros. Etiam a ullamcorper nulla. Nunc sed enim varius, hendrerit nulla rhoncus, convallis arcu. Sed ac mattis ligula, nec feugiat nisl. Donec eu sodales neque. Proin rhoncus sagittis mi sed eleifend.

pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="left" id="extremely_specific_id" class="one two three four"

[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="left" id="extremely_specific_id" class="one two three four"]

Aenean quis diam maximus, molestie diam eget, consequat nisl. Nunc dignissim tortor non turpis elementum, id iaculis mi consectetur. In eget odio ut eros maximus lobortis sed eu ante. Cras dictum urna et lobortis sagittis. Quisque rhoncus blandit maximus. Sed porttitor efficitur mi, ut mattis justo consequat aliquet.

The following is the same embed, but as a Shortcode Block:

Sed ante nibh, dictum pretium iaculis nec, lobortis ut magna. Duis lobortis pulvinar metus, eget vulputate justo molestie ac. Ut gravida risus arcu, sed sollicitudin erat laoreet eu. Aliquam efficitur justo vel sapien commodo, eget ultrices nisl ullamcorper. Donec id dui a ligula interdum ultricies. Sed sit amet odio velit. Aliquam erat volutpat. Donec varius massa ac nibh blandit imperdiet. Suspendisse vestibulum, lectus vitae suscipit tincidunt, odio nulla efficitur urna, nec molestie mauris lacus posuere ante. In molestie sit amet dolor ac auctor. Ut lectus lectus, mollis vel consectetur nec, imperdiet id ex. Suspendisse at arcu eleifend, pharetra nisi ac, tempus magna. Pellentesque venenatis odio non vestibulum accumsan. Suspendisse potenti. Aliquam a massa libero.

Sed iaculis placerat aliquam. Phasellus risus risus, eleifend dictum luctus nec, iaculis vel augue. In id purus a sem finibus aliquet aliquam a velit. Cras elit ante, lobortis eu commodo sit amet, sollicitudin sit amet mi. Proin ornare mauris nec iaculis aliquet. In hac habitasse platea dictumst. In gravida leo ut feugiat maximus. Suspendisse ac libero bibendum, dapibus diam a, posuere magna.

In eu malesuada elit. Sed quis ex gravida, tempus eros eget, porta massa. Pellentesque quis mollis eros. Vestibulum et vehicula urna. Pellentesque dui libero, congue ut lacus quis, bibendum sagittis risus. Vestibulum hendrerit ultrices arcu, eget mattis tortor dapibus et. Ut condimentum finibus eros a ultrices. Nunc at rhoncus velit.

[benlk]

Here's similar post content, but using https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html, a version of https://f.benlk.com/graphics/heartbeat-abortion-bills/child.html that has been modified by adding the code included in this PR.

Post content

The following is a Pym Embed adapted in accordance with the instructions at https://github.com/INN/pym-shortcode/pull/62:

https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus ligula id est volutpat suscipit. Etiam tempus turpis vel arcu ultricies porttitor. Cras vel bibendum dui, in porttitor ipsum. Phasellus nec nisi eros. Morbi mollis sapien nec vulputate dignissim. Proin justo tortor, ullamcorper non porttitor quis, eleifend non nisi.

Shortcode: pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html"

[pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html"]

Nam faucibus ornare elit, ut ultrices nibh aliquet a. Donec varius, lorem molestie fringilla eleifend, mauris nisl porta tellus, non varius leo urna eu elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor varius ex sed facilisis. Donec lobortis mauris risus, at dictum sapien ullamcorper a. Quisque tempus eu ipsum at tincidunt. Donec sit amet faucibus nisi.

 “It’s a shame, but what can we do? There really wasn’t anything that was going to keep this individual from snapping and killing a lot of people if that’s what they really wanted.”

Maecenas facilisis dignissim turpis, eu rutrum purus aliquet ac. Sed pellentesque aliquet enim, eget sodales augue elementum a. In hac habitasse platea dictumst. Etiam sit amet massa porttitor, auctor nisi tristique, interdum sem. Mauris eget tincidunt eros. Etiam a ullamcorper nulla. Nunc sed enim varius, hendrerit nulla rhoncus, convallis arcu. Sed ac mattis ligula, nec feugiat nisl. Donec eu sodales neque. Proin rhoncus sagittis mi sed eleifend.

pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html" align="left" id="extremely_specific_id" class="one two three four"

[pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html" align="left" id="extremely_specific_id" class="one two three four"]

Aenean quis diam maximus, molestie diam eget, consequat nisl. Nunc dignissim tortor non turpis elementum, id iaculis mi consectetur. In eget odio ut eros maximus lobortis sed eu ante. Cras dictum urna et lobortis sagittis. Quisque rhoncus blandit maximus. Sed porttitor efficitur mi, ut mattis justo consequat aliquet.

The following is the same embed, but as a Shortcode Block:

Sed ante nibh, dictum pretium iaculis nec, lobortis ut magna. Duis lobortis pulvinar metus, eget vulputate justo molestie ac. Ut gravida risus arcu, sed sollicitudin erat laoreet eu. Aliquam efficitur justo vel sapien commodo, eget ultrices nisl ullamcorper. Donec id dui a ligula interdum ultricies. Sed sit amet odio velit. Aliquam erat volutpat. Donec varius massa ac nibh blandit imperdiet. Suspendisse vestibulum, lectus vitae suscipit tincidunt, odio nulla efficitur urna, nec molestie mauris lacus posuere ante. In molestie sit amet dolor ac auctor. Ut lectus lectus, mollis vel consectetur nec, imperdiet id ex. Suspendisse at arcu eleifend, pharetra nisi ac, tempus magna. Pellentesque venenatis odio non vestibulum accumsan. Suspendisse potenti. Aliquam a massa libero.

Sed iaculis placerat aliquam. Phasellus risus risus, eleifend dictum luctus nec, iaculis vel augue. In id purus a sem finibus aliquet aliquam a velit. Cras elit ante, lobortis eu commodo sit amet, sollicitudin sit amet mi. Proin ornare mauris nec iaculis aliquet. In hac habitasse platea dictumst. In gravida leo ut feugiat maximus. Suspendisse ac libero bibendum, dapibus diam a, posuere magna.

In eu malesuada elit. Sed quis ex gravida, tempus eros eget, porta massa. Pellentesque quis mollis eros. Vestibulum et vehicula urna. Pellentesque dui libero, congue ut lacus quis, bibendum sagittis risus. Vestibulum hendrerit ultrices arcu, eget mattis tortor dapibus et. Ut condimentum finibus eros a ultrices. Nunc at rhoncus velit.

screenshot


Upon page load, the graphics initialize, but are then replaced with an empty white space. Here's an example of a shortcode, and the markup that generates on the page after the page finishes loading:

[pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html" align="left" id="extremely_specific_id" class="one two three four"]

<div class="pym one two three four  alignleft" id="extremely_specific_id">
        <amp-iframe src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html" layout="intrinsic" width="1200" height="1118" sandbox="allow-scripts allow-same-origin" frameborder="0" resizable="" class="i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="intrinsic" scrolling="no" style="--loader-delay-offset:5ms !important; height: 1118px;">
            <div overflow="" tabindex="0" aria-label="Load interactive graphic" placeholder="" class="amp-wp-0f2bff3" role="button">
                Load interactive graphic            </div>
        </amp-iframe>
    </div>

[benlk]

On the off chance that it's some problem with my example page, I copied the NPR example above to https://f.benlk.com/graphics/child-table/child.html and added the snippet.

post content

The following is a Pym Embed adapted in accordance with the instructions at https://github.com/INN/pym-shortcode/pull/62:

https://f.benlk.com/graphics/child-table/child.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus ligula id est volutpat suscipit. Etiam tempus turpis vel arcu ultricies porttitor. Cras vel bibendum dui, in porttitor ipsum. Phasellus nec nisi eros. Morbi mollis sapien nec vulputate dignissim. Proin justo tortor, ullamcorper non porttitor quis, eleifend non nisi.

Shortcode: pym src="https://f.benlk.com/graphics/child-table/child.html"

[pym src="https://f.benlk.com/graphics/child-table/child.html"]

Nam faucibus ornare elit, ut ultrices nibh aliquet a. Donec varius, lorem molestie fringilla eleifend, mauris nisl porta tellus, non varius leo urna eu elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor varius ex sed facilisis. Donec lobortis mauris risus, at dictum sapien ullamcorper a. Quisque tempus eu ipsum at tincidunt. Donec sit amet faucibus nisi.

 “It’s a shame, but what can we do? There really wasn’t anything that was going to keep this individual from snapping and killing a lot of people if that’s what they really wanted.”

Maecenas facilisis dignissim turpis, eu rutrum purus aliquet ac. Sed pellentesque aliquet enim, eget sodales augue elementum a. In hac habitasse platea dictumst. Etiam sit amet massa porttitor, auctor nisi tristique, interdum sem. Mauris eget tincidunt eros. Etiam a ullamcorper nulla. Nunc sed enim varius, hendrerit nulla rhoncus, convallis arcu. Sed ac mattis ligula, nec feugiat nisl. Donec eu sodales neque. Proin rhoncus sagittis mi sed eleifend.

pym src="https://f.benlk.com/graphics/child-table/child.html" align="left" id="extremely_specific_id" class="one two three four"

[pym src="https://f.benlk.com/graphics/child-table/child.html" align="left" id="extremely_specific_id" class="one two three four"]

Aenean quis diam maximus, molestie diam eget, consequat nisl. Nunc dignissim tortor non turpis elementum, id iaculis mi consectetur. In eget odio ut eros maximus lobortis sed eu ante. Cras dictum urna et lobortis sagittis. Quisque rhoncus blandit maximus. Sed porttitor efficitur mi, ut mattis justo consequat aliquet.

The following is the same embed, but as a Shortcode Block:

Sed ante nibh, dictum pretium iaculis nec, lobortis ut magna. Duis lobortis pulvinar metus, eget vulputate justo molestie ac. Ut gravida risus arcu, sed sollicitudin erat laoreet eu. Aliquam efficitur justo vel sapien commodo, eget ultrices nisl ullamcorper. Donec id dui a ligula interdum ultricies. Sed sit amet odio velit. Aliquam erat volutpat. Donec varius massa ac nibh blandit imperdiet. Suspendisse vestibulum, lectus vitae suscipit tincidunt, odio nulla efficitur urna, nec molestie mauris lacus posuere ante. In molestie sit amet dolor ac auctor. Ut lectus lectus, mollis vel consectetur nec, imperdiet id ex. Suspendisse at arcu eleifend, pharetra nisi ac, tempus magna. Pellentesque venenatis odio non vestibulum accumsan. Suspendisse potenti. Aliquam a massa libero.

Sed iaculis placerat aliquam. Phasellus risus risus, eleifend dictum luctus nec, iaculis vel augue. In id purus a sem finibus aliquet aliquam a velit. Cras elit ante, lobortis eu commodo sit amet, sollicitudin sit amet mi. Proin ornare mauris nec iaculis aliquet. In hac habitasse platea dictumst. In gravida leo ut feugiat maximus. Suspendisse ac libero bibendum, dapibus diam a, posuere magna.

In eu malesuada elit. Sed quis ex gravida, tempus eros eget, porta massa. Pellentesque quis mollis eros. Vestibulum et vehicula urna. Pellentesque dui libero, congue ut lacus quis, bibendum sagittis risus. Vestibulum hendrerit ultrices arcu, eget mattis tortor dapibus et. Ut condimentum finibus eros a ultrices. Nunc at rhoncus velit.

screenshot


```

Load interactive graphic

```

The same "flash embed, then display blank" behavior occurs, but with a different height of blank area. The height of the blank area appears to match the height of the graphic before it was blanked out. This is occurring for all embeds on the page, not just ones that load above the fold. There are no console errors or messages. After the flash of content, the `` element contains no iframe. I can watch the DOM in the inspector as the page loads: the iframe is created and then removed. Sometimes (but not always), scrolling the page as it loads allows one of the graphics on the page to load. @claudiulodro any idea what's going on here?

[benlk]

The above testing was performed using the "Atomic Blocks" theme https://wordpress.org/themes/atomic-blocks/ but reproduces in Twenty Nineteen.

[benlk]

The example post content given in the "testing" section of this post works like the default NPR example: the okwatch embeds load, but in a square frame. https://s3.us-west-2.amazonaws.com/projects.oklahomawatch.org/oklahoma-legislature/senate.html does not not appear to have been modified for this PR.

[claudiulodro]

I'll investigate and follow up. Thanks for testing!

On a related note, the Pym.js message handling is coming along nicely: https://github.com/ampproject/amphtml/pull/24917

[westonruter]

FYI: I've added a pull request to implement Pym.js support in amp-iframe. See https://github.com/ampproject/amphtml/pull/24917.

[claudiulodro]

@benlk I wasn't able to fully reproduce the issue you were describing using the sample content you provided and the themes you used. I was, however, able to reproduce it on the alignleft embed. I believe AMP was getting confused somehow because the placeholder element and resize element were the same. https://github.com/INN/pym-shortcode/pull/62/commits/42bab35107f22e320a557adc2112421ee97d5e39 solves the issue in my testing; please let me know if it solves the issue in your testing.

Uninitialized:

Initialized:

[claudiulodro]

@benlk have you had a chance to give this PR another test? The "empty-white-space" issue should be resolved in theory. Thanks!

[benlk]

@claudiulodro I'm sad to say I haven't, and we probably won't be able to test it again before November 1. Does that affect the timeline for the WP AMP plugin or Newspack plugin updates?

[claudiulodro]

Not a huge deal, thanks for checking. On the Newspack side, we can just use this fork for now until it's officially merged.

[claudiulodro]

@benlk just following up again. Have you had a chance to re-test this? It would be nice to get these improvements merged. Thanks.

[benlk]

We're taking another look at this today!

[benlk]

I'm okay with merging this, because I think the problems I'm seeing are to do with the interactives I'm using to test, not with the plugin's implementation. But we'd like to be sure.

---

All of this comment's tests are using the twentynineteen theme on WP 5.3.

The basic problem is that Pym embeds loaded via AMP aren't taking up the full width that the theme gives to the block.

The following example uses https://f.benlk.com/graphics/child-table/child.html, which has the added event listener.

screenshot, code

 ```html

The following is a Pym Embed adapted in accordance with the instructions at https://github.com/INN/pym-shortcode/pull/62:

(Full width)

https://f.benlk.com/graphics/child-table/child.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus ligula id est volutpat suscipit. Etiam tempus turpis vel arcu ultricies porttitor. Cras vel bibendum dui, in porttitor ipsum. Phasellus nec nisi eros. Morbi mollis sapien nec vulputate dignissim. Proin justo tortor, ullamcorper non porttitor quis, eleifend non nisi.

(wide width)

https://f.benlk.com/graphics/child-table/child.html

Nam faucibus ornare elit, ut ultrices nibh aliquet a. Donec varius, lorem molestie fringilla eleifend, mauris nisl porta tellus, non varius leo urna eu elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor varius ex sed facilisis. Donec lobortis mauris risus, at dictum sapien ullamcorper a. Quisque tempus eu ipsum at tincidunt. Donec sit amet faucibus nisi.

(normal width)

pym src="https://f.benlk.com/graphics/child-table/child.html" class="one two three four"

[pym src="https://f.benlk.com/graphics/child-table/child.html" class="one two three four"]

Maecenas facilisis dignissim turpis, eu rutrum purus aliquet ac. Sed pellentesque aliquet enim, eget sodales augue elementum a. In hac habitasse platea dictumst. Etiam sit amet massa porttitor, auctor nisi tristique, interdum sem. Mauris eget tincidunt eros. Etiam a ullamcorper nulla. Nunc sed enim varius, hendrerit nulla rhoncus, convallis arcu. Sed ac mattis ligula, nec feugiat nisl. Donec eu sodales neque. Proin rhoncus sagittis mi sed eleifend.

The following is the same embed, but as a Shortcode Block:

pym src="https://f.benlk.com/graphics/child-table/child.html" align="left" id="extremely_specific_id" class="one two three four"

[pym src="https://f.benlk.com/graphics/child-table/child.html" align="right" id="extremely_specific_id" class="one two three four"]

Aenean quis diam maximus, molestie diam eget, consequat nisl. Nunc dignissim tortor non turpis elementum, id iaculis mi consectetur. In eget odio ut eros maximus lobortis sed eu ante. Cras dictum urna et lobortis sagittis. Quisque rhoncus blandit maximus. Sed porttitor efficitur mi, ut mattis justo consequat aliquet.

Sed ante nibh, dictum pretium iaculis nec, lobortis ut magna. Duis lobortis pulvinar metus, eget vulputate justo molestie ac. Ut gravida risus arcu, sed sollicitudin erat laoreet eu. Aliquam efficitur justo vel sapien commodo, eget ultrices nisl ullamcorper. Donec id dui a ligula interdum ultricies. Sed sit amet odio velit. Aliquam erat volutpat. Donec varius massa ac nibh blandit imperdiet. Suspendisse vestibulum, lectus vitae suscipit tincidunt, odio nulla efficitur urna, nec molestie mauris lacus posuere ante. In molestie sit amet dolor ac auctor. Ut lectus lectus, mollis vel consectetur nec, imperdiet id ex. Suspendisse at arcu eleifend, pharetra nisi ac, tempus magna. Pellentesque venenatis odio non vestibulum accumsan. Suspendisse potenti. Aliquam a massa libero.

Sed ante nibh, dictum pretium iaculis nec, lobortis ut magna. Duis lobortis pulvinar metus, eget vulputate justo molestie ac. Ut gravida risus arcu, sed sollicitudin erat laoreet eu. Aliquam efficitur justo vel sapien commodo, eget ultrices nisl ullamcorper. Donec id dui a ligula interdum ultricies. Sed sit amet odio velit. Aliquam erat volutpat. Donec varius massa ac nibh blandit imperdiet. Suspendisse vestibulum, lectus vitae suscipit tincidunt, odio nulla efficitur urna, nec molestie mauris lacus posuere ante. In molestie sit amet dolor ac auctor. Ut lectus lectus, mollis vel consectetur nec, imperdiet id ex. Suspendisse at arcu eleifend, pharetra nisi ac, tempus magna. Pellentesque venenatis odio non vestibulum accumsan. Suspendisse potenti. Aliquam a massa libero.

Sed iaculis placerat aliquam. Phasellus risus risus, eleifend dictum luctus nec, iaculis vel augue. In id purus a sem finibus aliquet aliquam a velit. Cras elit ante, lobortis eu commodo sit amet, sollicitudin sit amet mi. Proin ornare mauris nec iaculis aliquet. In hac habitasse platea dictumst. In gravida leo ut feugiat maximus. Suspendisse ac libero bibendum, dapibus diam a, posuere magna.

In eu malesuada elit. Sed quis ex gravida, tempus eros eget, porta massa. Pellentesque quis mollis eros. Vestibulum et vehicula urna. Pellentesque dui libero, congue ut lacus quis, bibendum sagittis risus. Vestibulum hendrerit ultrices arcu, eget mattis tortor dapibus et. Ut condimentum finibus eros a ultrices. Nunc at rhoncus velit.

```

Note that:

• wide-width and normal-width blocks aren't always rendering the full width that the theme allows for that block width.
• every embed on the page is from the same source URL.

Here's a replication using https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html which also has the event listener.

screenshot, code

 ```html

The following is a Pym Embed adapted in accordance with the instructions at https://github.com/INN/pym-shortcode/pull/62:

https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus ligula id est volutpat suscipit. Etiam tempus turpis vel arcu ultricies porttitor. Cras vel bibendum dui, in porttitor ipsum. Phasellus nec nisi eros. Morbi mollis sapien nec vulputate dignissim. Proin justo tortor, ullamcorper non porttitor quis, eleifend non nisi.

Shortcode: pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html"

[pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html"]

Nam faucibus ornare elit, ut ultrices nibh aliquet a. Donec varius, lorem molestie fringilla eleifend, mauris nisl porta tellus, non varius leo urna eu elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porttitor varius ex sed facilisis. Donec lobortis mauris risus, at dictum sapien ullamcorper a. Quisque tempus eu ipsum at tincidunt. Donec sit amet faucibus nisi.

 “It’s a shame, but what can we do? There really wasn’t anything that was going to keep this individual from snapping and killing a lot of people if that’s what they really wanted.”

Maecenas facilisis dignissim turpis, eu rutrum purus aliquet ac. Sed pellentesque aliquet enim, eget sodales augue elementum a. In hac habitasse platea dictumst. Etiam sit amet massa porttitor, auctor nisi tristique, interdum sem. Mauris eget tincidunt eros. Etiam a ullamcorper nulla. Nunc sed enim varius, hendrerit nulla rhoncus, convallis arcu. Sed ac mattis ligula, nec feugiat nisl. Donec eu sodales neque. Proin rhoncus sagittis mi sed eleifend.

pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html" align="left" id="extremely_specific_id" class="one two three four"

[pym src="https://f.benlk.com/graphics/heartbeat-abortion-bills-amp/child.html" align="left" id="extremely_specific_id" class="one two three four"]

Aenean quis diam maximus, molestie diam eget, consequat nisl. Nunc dignissim tortor non turpis elementum, id iaculis mi consectetur. In eget odio ut eros maximus lobortis sed eu ante. Cras dictum urna et lobortis sagittis. Quisque rhoncus blandit maximus. Sed porttitor efficitur mi, ut mattis justo consequat aliquet.

The following is the same embed, but as a Shortcode Block:

Sed ante nibh, dictum pretium iaculis nec, lobortis ut magna. Duis lobortis pulvinar metus, eget vulputate justo molestie ac. Ut gravida risus arcu, sed sollicitudin erat laoreet eu. Aliquam efficitur justo vel sapien commodo, eget ultrices nisl ullamcorper. Donec id dui a ligula interdum ultricies. Sed sit amet odio velit. Aliquam erat volutpat. Donec varius massa ac nibh blandit imperdiet. Suspendisse vestibulum, lectus vitae suscipit tincidunt, odio nulla efficitur urna, nec molestie mauris lacus posuere ante. In molestie sit amet dolor ac auctor. Ut lectus lectus, mollis vel consectetur nec, imperdiet id ex. Suspendisse at arcu eleifend, pharetra nisi ac, tempus magna. Pellentesque venenatis odio non vestibulum accumsan. Suspendisse potenti. Aliquam a massa libero.

Sed iaculis placerat aliquam. Phasellus risus risus, eleifend dictum luctus nec, iaculis vel augue. In id purus a sem finibus aliquet aliquam a velit. Cras elit ante, lobortis eu commodo sit amet, sollicitudin sit amet mi. Proin ornare mauris nec iaculis aliquet. In hac habitasse platea dictumst. In gravida leo ut feugiat maximus. Suspendisse ac libero bibendum, dapibus diam a, posuere magna.

In eu malesuada elit. Sed quis ex gravida, tempus eros eget, porta massa. Pellentesque quis mollis eros. Vestibulum et vehicula urna. Pellentesque dui libero, congue ut lacus quis, bibendum sagittis risus. Vestibulum hendrerit ultrices arcu, eget mattis tortor dapibus et. Ut condimentum finibus eros a ultrices. Nunc at rhoncus velit.

```

Here, the full-width and wide-width blocks aren't being rendered at full width. The third graphic, aligned left, hadn't loaded yet because I hadn't scrolled down that far before telling Firefox to screenshot the page. In later reloads of the page, the graphic was the width it normally is when aligned left.

If you can provide us with links for the embeds that you've been using for testing this branch, and they work, their successful loading will rule out the problem being in this branch of the plugin. We'd be happy to merge this.

If there's any other information you need, let us know.

[claudiulodro]

Thanks for giving it another test! I haven't been able to reproduce the issues you describe using either Chrome or Firefox 70, 2019 theme, WP 5.3, and the embeds you've been testing with:

**Screenshot 1**  **Screenshot 2** 

I'm not sure how you want to proceed given this. I can wrangle another person or two if you want to cross-reference? IMO any AMP-compatibility is going to be better than the current no-AMP-compatibility, so it might be best to merge and then fine-tune as we get more data points from real sites.

[westonruter]

FYI: Pym.js support in amp-iframe is live. You should be able to see it in action at https://amp-iframe-pymjs-resizable.glitch.me/