#55 – is amp-list supported?

Posted in ‘weeblrAMP’
This is a public ticket. Everybody will be able to see its contents. Only enter usernames, passwords or any other sensitive information in the Private information field.
Sunday, 25 February 2018 12:20 UTC
bluemammoth
 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
Monday, 26 February 2018 08:32 UTC
wb_weeblrpress
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

 
Tuesday, 13 March 2018 05:34 UTC
system
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.
This ticket is closed, therefore read-only. You can no longer reply to it. If you need to provide more information, please open a new ticket and mention this ticket's number.