Merge pull request #1753 from ampproject/add/twitter-embed-placeholder

Provide a placeholder element for Twitter embeds

Author: westonruter

includes/class-amp-autoloader.php

@@ -56,7 +56,7 @@ class AMP_Autoloader {
 		'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_Twitter_Embed_Handler'          => 'includes/embeds/class-amp-twitter-embed-handler',
 		'AMP_Vimeo_Embed_Handler'            => 'includes/embeds/class-amp-vimeo-embed',
 		'AMP_Vine_Embed_Handler'             => 'includes/embeds/class-amp-vine-embed',
 		'AMP_WordPress_TV_Embed_Handler'     => 'includes/embeds/class-amp-wordpress-tv-embed-handler',

…ludes/embeds/class-amp-twitter-embed.php …beds/class-amp-twitter-embed-handler.phpincludes/embeds/class-amp-twitter-embed.php renamed to includes/embeds/class-amp-twitter-embed-handler.php includes/embeds/class-amp-twitter-embed.php renamed to includes/embeds/class-amp-twitter-embed-handler.php

@@ -46,20 +46,51 @@ class AMP_Twitter_Embed_Handler extends AMP_Base_Embed_Handler {
 	 * Registers embed.
 	 */
 	public function register_embed() {
+		add_filter( 'embed_oembed_html', [ $this, 'filter_embed_oembed_html' ], 10, 2 );
 		add_shortcode( 'tweet', [ $this, 'shortcode' ] ); // Note: This is a Jetpack shortcode.
-		wp_embed_register_handler( 'amp-twitter', self::URL_PATTERN, [ $this, 'oembed' ], -1 );
 		wp_embed_register_handler( 'amp-twitter-timeline', self::URL_PATTERN_TIMELINE, [ $this, 'oembed_timeline' ], -1 );
 	}
 
 	/**
 	 * Unregisters embed.
 	 */
 	public function unregister_embed() {
+		remove_filter( 'embed_oembed_html', [ $this, 'filter_embed_oembed_html' ] );
 		remove_shortcode( 'tweet' ); // Note: This is a Jetpack shortcode.
-		wp_embed_unregister_handler( 'amp-twitter', -1 );
 		wp_embed_unregister_handler( 'amp-twitter-timeline', -1 );
 	}
 
+	/**
+	 * Filter oEmbed HTML for Twitter 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'], 'twitter.com' ) ) {
+			return $cache;
+		}
+
+		if ( ! preg_match( '#^https?://twitter.com/.+/status/(\d+)#', $url, $matches ) ) {
+			return $cache;
+		}
+		$tweet_id = $matches[1];
+
+		$cache = preg_replace(
+			'#(<blockquote[^>]+?twitter-tweet[^>]+)(>[^\r]+)<script.*$#',
+			sprintf(
+				'<amp-twitter width="%d" height="%d" layout="responsive" data-tweetid="%s">$1 placeholder $2</amp-twitter>',
+				esc_attr( $this->DEFAULT_WIDTH ),
+				esc_attr( $this->DEFAULT_HEIGHT ),
+				esc_attr( $tweet_id )
+			),
+			$cache
+		);
+		return $cache;
+	}
+
 	/**
 	 * Gets AMP-compliant markup for the Twitter shortcode.
 	 *
@@ -110,12 +141,14 @@ public function shortcode( $attr ) {
 	/**
 	 * Render oEmbed.
 	 *
+	 * @deprecated Since 1.1 as now the sanitize_raw_embeds() is used exclusively, allowing the original oEmbed response to be rapped by amp-twitter.
 	 * @see \WP_Embed::shortcode()
 	 *
 	 * @param array $matches URL pattern matches.
 	 * @return string Rendered oEmbed.
 	 */
 	public function oembed( $matches ) {
+		_deprecated_function( __METHOD__, '1.1' );
 		$id = false;
 
 		if ( isset( $matches['tweet'] ) && is_numeric( $matches['tweet'] ) ) {
@@ -206,12 +239,17 @@ public function sanitize_raw_embeds( $dom ) {
 	}
 
 	/**
-	 * Checks whether it's a twitter blockquote or not
+	 * Checks whether it's a twitter blockquote or not.
 	 *
 	 * @param DOMElement $node The DOMNode to adjust and replace.
 	 * @return bool Whether node is for raw embed.
 	 */
 	private function is_tweet_raw_embed( $node ) {
+		// Skip processing blockquotes that have already been passed through while being wrapped with <amp-twitter>.
+		if ( $node->parentNode && 'amp-twitter' === $node->parentNode->nodeName ) {
+			return false;
+		}
+
 		$class_attr = $node->getAttribute( 'class' );
 
 		return null !== $class_attr && false !== strpos( $class_attr, 'twitter-tweet' );
@@ -248,6 +286,11 @@ private function create_amp_twitter_and_replace_node( $dom, $node ) {
 			$attributes
 		);
 
+		$placeholder = $node->cloneNode( true );
+		$placeholder->setAttribute( 'placeholder', '' );
+
+		$new_node->appendChild( $placeholder );
+
 		$this->sanitize_embed_script( $node );
 
 		$node->parentNode->replaceChild( $new_node, $node );