#55 – is amp-list supported?

 Hi support,

i'm trying to implement an amp-list by using a shortcode.
for the moment i've taken the amp-list code from
https://ampbyexample.com/components/amp-list/

See test shortcode code

add_shortcode('amp_list', 'hor_amp_list');

function hor_amp_list($atts) {
try {
extract(shortcode_atts(array(
'src' => '/wp-json/amp/v2/request',
), $atts, 'hor_list'));

return '<h2>amp-list example</h2><amp-list width="auto"
height="400"
layout="fixed-height"
src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<div class="url-entry">
<a href="/{{url}}">{{title}}</a>
</div>
</template>
</amp-list>';
} catch (Exception $ex) {
return display_shortcode_error('Error in displaying hor_amp_list: ' . $ex->getMessage());
}
}

the result can be seen on http://spotler.test3.bluemammoth.nl/blog/amp

However i only see the h2 tag and the amp-list is stripped?
is amp-list supported?

Regards
Sivard

Hi

Indeed currently the direct amp-* is stripped - unless protected, see below. We will relax that in the next version.

So you are missing two things:

1 - "Protect" the content so that it's not converted nor stripped:

		$output = '<h2>amp-list example</h2><amp-list width="auto"
height="400"
layout="fixed-height"
src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<div class="url-entry">
<a href="/{{url}}">{{title}}</a>
</div>
</template>
</amp-list>';

		return WeeblrampFactory::getThe( 'weeblramp.content.protector' )->protect(
			$output
		);

2 - You also need to link to the amp-list runtime javascript and the mustache template runtime javascript, or else the amp-* components won't work. Do this at the beginning of your shortcode handler:

WeeblrampFactory::getThe( 'WeeblrampModel_Assetscollector' )
		                ->addScripts(
			                array(
				                'amp-list' => sprintf( WeeblrampModel_Renderer::AMP_SCRIPTS_PATTERN, 'list', WeeblrampModel_Renderer::AMP_SCRIPTS_VERSION ),
			                )
		                )->addTemplates(
				array(
					'amp-mustache' => sprintf( WeeblrampModel_Renderer::AMP_SCRIPTS_PATTERN, 'mustache', WeeblrampModel_Renderer::AMP_SCRIPTS_VERSION ),
				)
			);

This should work now. Please note however that it probably actually wont' work as the https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json URL does not seem to include the proper CORS headers for testing. At least it failed on my local machine.

Best regards

This ticket has been automatically closed. All tickets which have been inactive for a long time are automatically closed. If you believe that this ticket was closed in error, please contact us.