The amp-timeago is getting stripped out

[pradeep910]

amp-timeago doesn't work outside content.

When we use amp-timeago component inside the_content / gutenberg, AMP plugin doesn't strip amp-timeago, it works fine, but when we use it outside content, it's stripping out the tag and giving this AMP validation error.

Here is the tag that we are using in code -

<amp-timeago class="gk-date-diff" datetime="2019-03-21 06:07:16" cutoff="2592000">March 21, 2019, 6:07 AM</amp-timeago>

I see that amp-timeago is allowed tag in the specs -
https://github.com/ampproject/amp-wp/blob/develop/includes/sanitizers/class-amp-allowed-tags-generated.php#L5000-L5034

@westonruter
I tried disabling remove_node() and then it retained the amp-timeago tag. So looks like something is wrong with check_attr_spec_rule_value_regex or is it stripping it out purposely? - https://github.com/ampproject/amp-wp/blob/develop/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php#L1974

[westonruter]

@pradeep910 It seems you are missing the required width and height attributes. The date format is also invalid. If I put that markup in a the validator it is shown as invalid:

Is the amp-timeago component used inside the_content exactly the same?

[westonruter]

The AMP validation error regarding the amp-timeago extension being on the page is due to the script being present. Are you enqueueing it manually such as via wp_enqueue_script('amp-timeago')?

[westonruter]

When I test, the following code with corrected amp-timeago

add_action(
	'wp_footer',
	function () {
		?>
		<p>
			<amp-timeago class="gk-date-diff" datetime="2019-03-21T06:07:16Z" cutoff="2592000" height="40">March 21, 2019, 6:07 AM</amp-timeago>
		</p>
		<?php
	}
);

I then see the amp-timeago element in the footer as expected, and the JS extension is present in the head. If I use your version (with the invalid attributes) then the amp-timeago is removed as expected, and there is no amp-timeago extension in the head (as expected).

[pradeep910]

@westonruter Thank you very much for letting me know the actual issue. I wanted to check with you first because we used AMP runtime as a library to use on <amp-timeago> on Non-AMP pages.

We are adding script for Non-AMP manually. It worked fine on Non-AMP pages, so I thought it will work on AMP pages also. But as you pointed out, seems like there's very strict check for AMP validation.

[westonruter]

@pradeep910 as long as the amp-timeago element is valid, you should be able to use it on both an AMP and non-AMP page.

To prevent causing a secondary validation error when the actual amp-timeago is invalid and is removed by the sanitizer, you could just conditionally enqueue amp-timeago if not on an AMP endpoint already:

add_function( 'wp_enqueue_scripts', function() {
    if ( ! is_amp_endpoint() ) {
        wp_enqueue_script( 'amp-timeago' );
    }
} );

Note that this use of AMP components outside of AMP pages it not officially supported yet. However, support is coming and you can track that in ampproject/amphtml#15583.