class-jetpack-related-posts-amplified-sanitizer.php

<?php

namespace AMP_Jetpack_Related_Posts;

// This sanitizer is only needed since we can't inject modify the output of \Jetpack_RelatedPosts::get_target_html().
class Sanitizer extends \AMP_Base_Sanitizer {

	public function sanitize() {
		$container = $this->dom->getElementById( 'jp-relatedposts' );
		if ( ! $container || empty( $this->args['permalink'] ) ) {
			return;
		}

		$template = $this->dom->getElementById( 'jetpack-related-posts-template' );
		if ( ! $template ) {
			return;
		}

		$template->parentNode->removeChild( $template );

		$div = $this->dom->createElement( 'div' );

		$class = 'jp-relatedposts-items jp-relatedposts-grid';
		if ( \Jetpack_RelatedPosts::init()->get_option( 'show_thumbnails' ) ) {
			$class .= ' jp-relatedposts-items-visual';
		} else {
			$class .= ' jp-relatedposts-items-minimal';
		}
		$div->setAttribute( 'class', $class );

		$src      = add_query_arg( 'relatedposts', '1', $this->args['permalink'] );
		$amp_list = $this->dom->createElement( 'amp-list' );
		$amp_list->setAttribute( 'src', $src );
		$amp_list->setAttribute( 'binding', 'no' );
		$amp_list->setAttribute( 'height', $this->args['height'] );
		$amp_list->setAttribute( 'layout', 'fixed-height' );
		$amp_list->setAttribute( 'width', 'auto' );
		$amp_list->appendChild( $template->cloneNode( true ));

		$overflow = $this->dom->createElement( 'button' );
		$overflow->setAttribute( 'class', 'list-overflow' );
		$overflow->setAttribute( 'overflow', '' );
		$overflow->appendChild( $this->dom->createTextNode( __( 'See more', 'amp' ) ) );
		$amp_list->appendChild( $overflow );

		$div->appendChild( $amp_list );

		$container->appendChild( $div );
	}

}

jetpack-related-posts-amplified.php

<?php
/**
 * Plugin Name: Jetpack Related Posts Amplified
 * Description: Add support for showing Related Posts on pages rendered by the ANP plugin. This is a temporary measure until Jetpack supports AMP for Related Posts directly.
 * Plugin URI: https://gist.github.com/westonruter/1515ce1bae788e6d52d1a94ddd61fb59
 * Author: Weston Ruter
 * Author URI: https://weston.ruter.net/
 * Version: 0.2
 * License: GPLv2 or later
 */

namespace AMP_Jetpack_Related_Posts;

function is_amp() {
	return function_exists( 'is_amp_endpoint' ) && \is_amp_endpoint();
}

add_filter( 'jetpack_relatedposts_filter_enabled_for_request', '__return_true' );

add_action( 'wp_enqueue_scripts', function() {
	if ( is_amp() ) {
		wp_dequeue_script( 'jetpack_related-posts' );
		$css = array(
			'#jp-relatedposts { display:block; }',
			'#jp-relatedposts .jp-relatedposts-post-date { display:block; }',
			'#jp-relatedposts .jp-relatedposts-post-excerpt { max-height: 7.5em; }',
		);
		wp_add_inline_style( 'jetpack_related-posts', implode( "\n", $css ) );
	}
} );

add_filter( 'amp_content_sanitizers', function( $sanitizers ) {
	require_once __DIR__ . '/class-jetpack-related-posts-amplified-sanitizer.php';
	if ( is_singular() ) {
		$sanitizers['AMP_Jetpack_Related_Posts\Sanitizer'] = array(
			'permalink' => get_permalink(),
			'height'    => \Jetpack_RelatedPosts::init()->get_option( 'show_thumbnails' ) ? 210 : 162, // @todo Brittle.
		);
	}

	if ( is_singular() ) {
		// 👇 This is not ideal. It shouldn't be required as of AMP v1.1 <https://github.com/Automattic/amp-wp/pull/1478>.
		$sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] = array_merge(
			! empty( $sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] ) ? $sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] : array(),
			array(
				'amp-list',
				'amp-live-list',
				'[submit-error]',
				'[submit-success]',
			),
			array(
				'#jp-relatedposts',
				'.jp-relatedposts',
				'.jp-relatedposts-items',
				'.jp-relatedposts-post',
			)
		);
	}

	return $sanitizers;
} );

add_action( 'template_redirect', function() {
	if ( is_amp() && is_singular() ) {
		add_action( 'wp_footer', __NAMESPACE__ . '\print_related_posts_template' );
	}
} );

/**
 * Print template which the sanitizer will move into the #jp-relatedposts container.
 *
 * Naturally if Jetpack had direct support, then this would just be done as part of \Jetpack_RelatedPosts::get_target_html().
 */
function print_related_posts_template() {

	$show_thumbnails = \Jetpack_RelatedPosts::init()->get_option( 'show_thumbnails' );
	?>
	<template id="jetpack-related-posts-template" type="amp-mustache">
		<?php
		$classes = 'jp-relatedposts-post jp-relatedposts-post{{url_meta.position}}';
		if ( $show_thumbnails ) {
			$classes .= ' {{#img.src}}jp-relatedposts-post-thumbs{{/img.src}}';
			$classes .= ' {{^img.src}}jp-relatedposts-post-nothumbs{{/img.src}}';
			?>
			<div class="<?php echo esc_attr( $classes ); ?>" data-post-id="{{id}}" data-post-format="{{format}}">
				{{#img.src}}
					<a class="jp-relatedposts-post-a" href="{{url}}" title="{{title}}<?php echo "\n\n"; ?>{{excerpt}}" rel="nofollow" data-origin="{{url_meta.origin}}" data-position="{{url_meta.position}}">
						<amp-img class="jp-relatedposts-post-img" src="{{img.src}}" layout="responsive" width="{{img.width}}" alt="{{title}}" height="{{img.height}}"></amp-img>
					</a>
				{{/img.src}}
				{{^img.src}}
					<a class="jp-relatedposts-post-a jp-relatedposts-post-aoverlay" href="{{url}}" title="{{title}}<?php echo "\n\n"; ?>{{excerpt}}" rel="nofollow" data-origin="{{url_meta.origin}}" data-position="{{url_meta.position}}"></a>
				{{/img.src}}
				<h4 class="jp-relatedposts-post-title">
					<a class="jp-relatedposts-post-a" href="{{url}}" title="{{title}}<?php echo "\n\n"; ?>{{excerpt}}" rel="nofollow" data-origin="{{url_meta.origin}}" data-position="{{url_meta.position}}">{{{title}}}</a>
				</h4>
				<p class="jp-relatedposts-post-excerpt">{{{excerpt}}}</p>
				<?php if ( \Jetpack_RelatedPosts::init()->get_option( 'show_date' ) ) : ?>
					<p class="jp-relatedposts-post-date">{{date}}</p>
				<?php endif; ?>
				<?php if ( \Jetpack_RelatedPosts::init()->get_option( 'show_context' ) ) : ?>
					<p class="jp-relatedposts-post-context">{{{context}}}</p>
				<?php endif; ?>
			</div>
			<?php
		} else {
			?>
			<p class="<?php echo esc_attr( $classes ); ?>" data-post-id="{{id}}" data-post-format="{{format}}">
				<span class="jp-relatedposts-post-title">
					<a class="jp-relatedposts-post-a" href="{{url}}" title="{{title}}<?php echo "\n\n"; ?>{{excerpt}}" rel="nofollow" data-origin="{{url_meta.origin}}" data-position="{{url_meta.position}}">{{{title}}}</a>
				</span>
				<?php if ( \Jetpack_RelatedPosts::init()->get_option( 'show_date' ) ) : ?>
					<span class="jp-relatedposts-post-date">{{date}}</span>
				<?php endif; ?>
				<?php if ( \Jetpack_RelatedPosts::init()->get_option( 'show_context' ) ) : ?>
					<span class="jp-relatedposts-post-context">{{{context}}}</span>
				<?php endif; ?>
			</p>
			<?php
		}
		?>
	</template>
	<?php
}

This has been a very handy plugin. One issue with the Genesis framework is that this plugin inserts related posts on Pages for AMP and non-AMP versions. Could you update the plugin to only insert into posts?

@nicopujol Try making this change:

- if ( is_amp() && is_singular() ) {
+ if ( is_amp() && is_single() ) {

As a whole, the code here is going to be made part of Jetpack directly, so this plugin here will be obsolete. Please follow: Automattic/jetpack#9556