#841 Improve support for default embeds

includes/amp-helper-functions.php

@@ -181,9 +181,13 @@ function amp_get_content_embed_handlers( $post = null ) {
 			'AMP_Vimeo_Embed_Handler'       => array(),
 			'AMP_SoundCloud_Embed_Handler'  => array(),
 			'AMP_Instagram_Embed_Handler'   => array(),
+			'AMP_Issuu_Embed_Handler'       => array(),
+			'AMP_Meetup_Embed_Handler'      => array(),
 			'AMP_Vine_Embed_Handler'        => array(),
 			'AMP_Facebook_Embed_Handler'    => array(),
 			'AMP_Pinterest_Embed_Handler'   => array(),
+			'AMP_Reddit_Embed_Handler'      => array(),
+			'AMP_Tumblr_Embed_Handler'      => array(),
 			'AMP_Gallery_Embed_Handler'     => array(),
 			'WPCOM_AMP_Polldaddy_Embed'     => array(),
 		),

includes/class-amp-autoloader.php

@@ -39,8 +39,12 @@ class AMP_Autoloader {
 		'AMP_Facebook_Embed_Handler'                  => 'includes/embeds/class-amp-facebook-embed',
 		'AMP_Gallery_Embed_Handler'                   => 'includes/embeds/class-amp-gallery-embed',
 		'AMP_Instagram_Embed_Handler'                 => 'includes/embeds/class-amp-instagram-embed',
+		'AMP_Issuu_Embed_Handler'                     => 'includes/embeds/class-amp-issuu-embed-handler',
+		'AMP_Meetup_Embed_Handler'                    => 'includes/embeds/class-amp-meetup-embed-handler',
 		'AMP_Pinterest_Embed_Handler'                 => 'includes/embeds/class-amp-pinterest-embed',
+		'AMP_Reddit_Embed_Handler'                    => 'includes/embeds/class-amp-reddit-embed-handler',
 		'AMP_SoundCloud_Embed_Handler'                => 'includes/embeds/class-amp-soundcloud-embed',
+		'AMP_Tumblr_Embed_Handler'                    => 'includes/embeds/class-amp-tumblr-embed-handler',
 		'AMP_Twitter_Embed_Handler'                   => 'includes/embeds/class-amp-twitter-embed',
 		'AMP_Vimeo_Embed_Handler'                     => 'includes/embeds/class-amp-vimeo-embed',
 		'AMP_Vine_Embed_Handler'                      => 'includes/embeds/class-amp-vine-embed',

includes/class-amp-theme-support.php

@@ -26,20 +26,6 @@ class AMP_Theme_Support {
 	 */
 	const CUSTOM_STYLES_PLACEHOLDER = '/* AMP:CUSTOM_STYLES_PLACEHOLDER */';
 
-	/**
-	 * AMP Scripts.
-	 *
-	 * @var array
-	 */
-	protected static $amp_scripts = array();
-
-	/**
-	 * AMP Styles.
-	 *
-	 * @var array
-	 */
-	protected static $amp_styles = array();
-
 	/**
 	 * Sanitizer classes.
 	 *
@@ -155,6 +141,7 @@ public static function register_paired_hooks() {
 	public static function register_hooks() {
 
 		// Remove core actions which are invalid AMP.
+		remove_action( 'wp_head', 'wp_post_preview_js', 1 );
 		remove_action( 'wp_head', 'locale_stylesheet' ); // Replaced below in add_amp_custom_style_placeholder() method.
 		remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 		remove_action( 'wp_head', 'wp_print_styles', 8 ); // Replaced below in add_amp_custom_style_placeholder() method.
@@ -433,20 +420,14 @@ public static function add_amp_custom_style_placeholder() {
 	/**
 	 * Get custom styles.
 	 *
+	 * @param string[] $stylesheets Initial stylesheets.
 	 * @see wp_custom_css_cb()
-	 * @return string Styles.
+	 * @return string Concatenated stylesheets.
 	 */
-	public static function get_amp_custom_styles() {
+	public static function get_amp_custom_styles( $stylesheets ) {
 		$css = wp_styles()->print_code;
 
-		// Add styles gleaned from sanitizers.
-		foreach ( self::$amp_styles as $selector => $properties ) {
-			$css .= sprintf(
-				'%s{%s}',
-				$selector,
-				join( ';', $properties ) . ';'
-			);
-		}
+		$css .= join( $stylesheets );
 
 		/**
 		 * Filters AMP custom CSS before it is injected onto the output buffer for the response.
@@ -466,10 +447,10 @@ public static function get_amp_custom_styles() {
 	/**
 	 * Determine required AMP scripts.
 	 *
+	 * @param array $amp_scripts Initial scripts.
 	 * @return string Scripts to inject into the HEAD.
 	 */
-	public static function get_amp_component_scripts() {
-		$amp_scripts = self::$amp_scripts;
+	public static function get_amp_component_scripts( $amp_scripts ) {
 
 		foreach ( self::$embed_handlers as $embed_handler ) {
 			$amp_scripts = array_merge(
@@ -527,9 +508,6 @@ public static function finish_output_buffering( $output ) {
 
 		$assets = AMP_Content_Sanitizer::sanitize_document( $dom, self::$sanitizer_classes, $args );
 
-		self::$amp_scripts = array_merge( self::$amp_scripts, $assets['scripts'] );
-		self::$amp_styles  = array_merge( self::$amp_styles, $assets['styles'] );
-
 		/*
 		 * @todo The sanitize method needs to be updated to sanitize the entire HTML element and not just the BODY.
 		 * This will require updating mandatory_parent_blacklist in amphtml-update.py to include elements that appear in the HEAD.
@@ -547,15 +525,15 @@ public static function finish_output_buffering( $output ) {
 		// Inject required scripts.
 		$output = preg_replace(
 			'#' . preg_quote( self::COMPONENT_SCRIPTS_PLACEHOLDER, '#' ) . '#',
-			self::get_amp_component_scripts(),
+			self::get_amp_component_scripts( $assets['scripts'] ),
 			$output,
 			1
 		);
 
 		// Inject styles.
 		$output = preg_replace(
 			'#' . preg_quote( self::CUSTOM_STYLES_PLACEHOLDER, '#' ) . '#',
-			self::get_amp_custom_styles(),
+			self::get_amp_custom_styles( $assets['stylesheets'] ),
 			$output,
 			1
 		);

includes/embeds/class-amp-base-embed-handler.php

@@ -30,7 +30,7 @@ function __construct( $args = array() ) {
 	/**
 	 * Get mapping of AMP component names to AMP script URLs.
 	 *
-	 * This is normally no longer needed because the wnitelist
+	 * This is normally no longer needed because the whitelist
 	 * sanitizer will automatically detect the need for them via
 	 * the spec.
 	 *

includes/embeds/class-amp-issuu-embed-handler.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Class AMP_Issuu_Embed_Handler
+ *
+ * @package AMP
+ * @since 0.7
+ */
+
+/**
+ * Class AMP_Issuu_Embed_Handler
+ */
+class AMP_Issuu_Embed_Handler extends AMP_Base_Embed_Handler {
+	/**
+	 * Regex matched to produce output amp-iframe.
+	 *
+	 * @const string
+	 */
+	const URL_PATTERN = '#https?://(www\.)?issuu\.com/.+/docs/.+#i';
+
+	/**
+	 * Register embed.
+	 */
+	public function register_embed() {
+		add_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10, 3 );
+	}
+
+	/**
+	 * Unregister embed.
+	 */
+	public function unregister_embed() {
+		remove_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10 );
+	}
+
+	/**
+	 * Filter oEmbed HTML for Meetup to prepare it for AMP.
+	 *
+	 * @param mixed  $return The shortcode callback function to call.
+	 * @param string $url    The attempted embed URL.
+	 * @param array  $attr   An array of shortcode attributes.
+	 * @return string Embed.
+	 */
+	public function filter_embed_oembed_html( $return, $url, $attr ) {
+		$parsed_url = wp_parse_url( $url );
+		if ( false !== strpos( $parsed_url['host'], 'issuu.com' ) ) {
+			if ( preg_match( '/width\s*:\s*(\d+)px/', $return, $matches ) ) {
+				$attr['width'] = $matches[1];
+			}
+			if ( preg_match( '/height\s*:\s*(\d+)px/', $return, $matches ) ) {
+				$attr['height'] = $matches[1];
+			}
+
+			$return = AMP_HTML_Utils::build_tag(
+				'amp-iframe',
+				array(
+					'width'   => $attr['width'],
+					'height'  => $attr['height'],
+					'src'     => $url,
+					'sandbox' => 'allow-scripts allow-same-origin',
+				)
+			);
+		}
+		return $return;
+	}
+}
+

includes/embeds/class-amp-meetup-embed-handler.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Class AMP_Meetup_Embed_Handler
+ *
+ * @package AMP
+ * @since 0.7
+ */
+
+/**
+ * Class AMP_Meetup_Embed_Handler
+ */
+class AMP_Meetup_Embed_Handler extends AMP_Base_Embed_Handler {
+
+	/**
+	 * Register embed.
+	 */
+	public function register_embed() {
+		add_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10, 2 );
+	}
+
+	/**
+	 * Unregister embed.
+	 */
+	public function unregister_embed() {
+		remove_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10 );
+	}
+
+	/**
+	 * Filter oEmbed HTML for Meetup to prepare it for AMP.
+	 *
+	 * @param string $cache Cache for oEmbed.
+	 * @param string $url   Embed URL.
+	 * @return string Embed.
+	 */
+	public function filter_embed_oembed_html( $cache, $url ) {
+		$parsed_url = wp_parse_url( $url );
+		if ( false !== strpos( $parsed_url['host'], 'meetup.com' ) ) {
+
+			// Supply the width/height so that we don't have to make requests to look them up later.
+			$cache = str_replace( '<img ', '<img width="50" height="50" ', $cache );
+		}
+		return $cache;
+	}
+}
+

includes/embeds/class-amp-reddit-embed-handler.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Class AMP_Reddit_Embed_Handler
+ *
+ * @package AMP
+ * @since 0.7
+ */
+
+/**
+ * Class AMP_Reddit_Embed_Handler
+ */
+class AMP_Reddit_Embed_Handler extends AMP_Base_Embed_Handler {
+	/**
+	 * Regex matched to produce output amp-reddit.
+	 *
+	 * @const string
+	 */
+	const URL_PATTERN = '#https?://(www\.)?reddit\.com/r/[^/]+/comments/.*#i';
+
+	/**
+	 * Register embed.
+	 */
+	public function register_embed() {
+		wp_embed_register_handler( 'amp-reddit', self::URL_PATTERN, array( $this, 'oembed' ), -1 );
+	}
+
+	/**
+	 * Unregister embed.
+	 */
+	public function unregister_embed() {
+		wp_embed_unregister_handler( 'amp-reddit', -1 );
+	}
+
+	/**
+	 * Embed found with matching URL callback.
+	 *
+	 * @param array $matches URL regex matches.
+	 * @param array $attr    Additional parameters.
+	 * @param array $url     URL.
+	 * @return string Embed.
+	 */
+	public function oembed( $matches, $attr, $url ) {
+		return $this->render( array( 'url' => $url ) );
+	}
+
+	/**
+	 * Output the Reddit amp element.
+	 *
+	 * @param array $args parameters used for output.
+	 * @return string Rendered content.
+	 */
+	public function render( $args ) {
+		$args = wp_parse_args( $args, array(
+			'url' => false,
+		) );
+
+		if ( empty( $args['url'] ) ) {
+			return '';
+		}
+
+		// @todo Sizing is not yet correct. See <https://github.com/ampproject/amphtml/issues/11869>.
+		return AMP_HTML_Utils::build_tag(
+			'amp-reddit',
+			array(
+				'layout'         => 'responsive',
+				'data-embedtype' => 'post',
+				'width'          => '100',
+				'height'         => '100',
+				'data-src'       => $args['url'],
+			)
+		);
+	}
+}
+

includes/embeds/class-amp-tumblr-embed-handler.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Class AMP_Tumblr_Embed_Handler
+ *
+ * @package AMP
+ * @since 0.7
+ */
+
+/**
+ * Class AMP_Tumblr_Embed_Handler
+ */
+class AMP_Tumblr_Embed_Handler extends AMP_Base_Embed_Handler {
+
+	/**
+	 * Register embed.
+	 */
+	public function register_embed() {
+		add_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10, 2 );
+	}
+
+	/**
+	 * Unregister embed.
+	 */
+	public function unregister_embed() {
+		remove_filter( 'embed_oembed_html', array( $this, 'filter_embed_oembed_html' ), 10 );
+	}
+
+	/**
+	 * Filter oEmbed HTML for Tumblr to prepare it for AMP.
+	 *
+	 * @param string $cache Cache for oEmbed.
+	 * @param string $url   Embed URL.
+	 * @return string Embed.
+	 */
+	public function filter_embed_oembed_html( $cache, $url ) {
+		$parsed_url = wp_parse_url( $url );
+		if ( false === strpos( $parsed_url['host'], 'tumblr.com' ) ) {
+			return $cache;
+		}
+
+		// @todo The iframe will not get sized properly.
+		if ( preg_match( '#data-href="(?P<href>https://embed.tumblr.com/embed/post/\w+/\w+)"#', $cache, $matches ) ) {
+			$cache = AMP_HTML_Utils::build_tag(
+				'amp-iframe',
+				array(
+					'width'   => $this->args['width'],
+					'height'  => $this->args['height'],
+					'layout'  => 'responsive',
+					'sandbox' => 'allow-scripts allow-popups', // The allow-scripts is needed to allow the iframe to render; allow-popups needed to allow clicking.
+					'src'     => $matches['href'],
+				),
+				sprintf( '<a placeholder href="%s">Tumblr</a>', $url )
+			);
+		}
+
+		return $cache;
+	}
+
+}
+