Merge pull request #6502 from ampproject/add/social-embed-overflow-bu…

…ttons Add overflow buttons to Twitter, Facebook, and Instagram embeds
ampproject · Jul 30, 2021 · 44c641e · 44c641e
2 parents dac7d06 + 294628a
commit 44c641e
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 37 deletions.
diff --git a/includes/embeds/class-amp-base-embed-handler.php b/includes/embeds/class-amp-base-embed-handler.php
@@ -7,6 +7,9 @@
  * @package  AMP
  */
 
+use AmpProject\Attribute;
+use AmpProject\Dom\Document;
+use AmpProject\Dom\Element;
 use AmpProject\Tag;
 
 /**
@@ -200,4 +203,35 @@ static function ( DOMNode $child ) {
 			}
 		}
 	}
+
+	/**
+	 * Create overflow button element.
+	 *
+	 * @param Document $dom  Document.
+	 * @param string   $text Button text (optional).
+	 * @return Element Button element.
+	 */
+	protected function create_overflow_button_element( Document $dom, $text = null ) {
+		if ( ! $text ) {
+			$text = __( 'See more', 'amp' );
+		}
+		$overflow = $dom->createElement( Tag::BUTTON );
+		$overflow->setAttributeNode( $dom->createAttribute( Attribute::OVERFLOW ) );
+		$overflow->setAttribute( Attribute::TYPE, 'button' );
+		$overflow->textContent = $text;
+		return $overflow;
+	}
+
+	/**
+	 * Create overflow button markup.
+	 *
+	 * @param string $text Button text (optional).
+	 * @return string Button markup.
+	 */
+	protected function create_overflow_button_markup( $text = null ) {
+		if ( ! $text ) {
+			$text = __( 'See more', 'amp' );
+		}
+		return sprintf( '<button overflow type="button">%s</button>', esc_html( $text ) );
+	}
 }
diff --git a/includes/embeds/class-amp-facebook-embed-handler.php b/includes/embeds/class-amp-facebook-embed-handler.php
@@ -102,7 +102,8 @@ public function render( $args ) {
 				'layout'    => 'responsive',
 				'width'     => $this->args['width'],
 				'height'    => $this->args['height'],
-			]
+			],
+			$this->create_overflow_button_markup()
 		);
 	}
 
@@ -249,6 +250,8 @@ private function create_amp_facebook_and_replace_node( Document $dom, DOMElement
 			$attributes
 		);
 
+		$amp_facebook_node->appendChild( $this->create_overflow_button_element( $dom ) );
+
 		$fallback = null;
 		foreach ( $node->childNodes as $child_node ) {
 			if ( $child_node instanceof DOMElement && false !== strpos( $child_node->getAttribute( 'class' ), 'fb-xfbml-parse-ignore' ) ) {

diff --git a/includes/embeds/class-amp-instagram-embed-handler.php b/includes/embeds/class-amp-instagram-embed-handler.php
@@ -115,7 +115,8 @@ public function render( $args ) {
 				'layout'         => 'responsive',
 				'width'          => $this->args['width'],
 				'height'         => $this->args['height'],
-			]
+			],
+			$this->create_overflow_button_markup()
 		);
 	}
 
@@ -188,6 +189,7 @@ private function create_amp_instagram_and_replace_node( $dom, $node ) {
 			}
 
 			$new_node = AMP_DOM_Utils::create_node( $dom, $this->amp_tag, $node_args );
+			$new_node->appendChild( $this->create_overflow_button_element( $dom ) );
 		} else {
 			$new_node = AMP_DOM_Utils::create_node(
 				$dom,

diff --git a/includes/embeds/class-amp-twitter-embed-handler.php b/includes/embeds/class-amp-twitter-embed-handler.php
@@ -103,7 +103,7 @@ public function oembed_timeline( $matches ) {
 
 		$this->did_convert_elements = true;
 
-		return AMP_HTML_Utils::build_tag( $this->amp_tag, $attributes );
+		return AMP_HTML_Utils::build_tag( $this->amp_tag, $attributes, $this->create_overflow_button_markup() );
 	}
 
 	/**
@@ -179,6 +179,8 @@ private function create_amp_twitter_and_replace_node( Document $dom, DOMElement
 			$attributes
 		);
 
+		$new_node->appendChild( $this->create_overflow_button_element( $dom ) );
+
 		/**
 		 * Placeholder element to append to the new node.
 		 *

diff --git a/tests/php/test-amp-facebook-embed-handler.php b/tests/php/test-amp-facebook-embed-handler.php
@@ -71,6 +71,8 @@ public function test__get_scripts( $source, $expected ) {
 	 * @return array
 	 */
 	public function get_raw_embed_dataset() {
+		$overflow_button = '<button overflow type="button">See more</button>';
+
 		return [
 			'no_embed_blockquote'           => [
 				'<p>Hello world.</p>',
@@ -84,27 +86,27 @@ public function get_raw_embed_dataset() {
 
 			'simple_url_https'              => [
 				'https://www.facebook.com/zuck/posts/10102593740125791' . PHP_EOL,
-				'<amp-facebook data-href="https://www.facebook.com/zuck/posts/10102593740125791" layout="responsive" width="600" height="400"></amp-facebook>' . PHP_EOL,
+				'<amp-facebook data-href="https://www.facebook.com/zuck/posts/10102593740125791" layout="responsive" width="600" height="400">' . $overflow_button . '</amp-facebook>' . PHP_EOL,
 			],
 
 			'notes_url'                     => [
 				'https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/' . PHP_EOL,
-				'<amp-facebook data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/" layout="responsive" width="600" height="400"></amp-facebook>' . PHP_EOL,
+				'<amp-facebook data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/" layout="responsive" width="600" height="400">' . $overflow_button . '</amp-facebook>' . PHP_EOL,
 			],
 
 			'photo_url'                     => [
 				'https://www.facebook.com/photo.php?fbid=10102533316889441&set=a.529237706231.2034669.4&type=3&theater' . PHP_EOL,
-				'<amp-facebook data-href="https://www.facebook.com/photo.php?fbid=10102533316889441&amp;set=a.529237706231.2034669.4&amp;type=3&amp;theater" layout="responsive" width="600" height="400"></amp-facebook>' . PHP_EOL,
+				'<amp-facebook data-href="https://www.facebook.com/photo.php?fbid=10102533316889441&amp;set=a.529237706231.2034669.4&amp;type=3&amp;theater" layout="responsive" width="600" height="400">' . $overflow_button . '</amp-facebook>' . PHP_EOL,
 			],
 
 			'video_url'                     => [
 				'https://www.facebook.com/zuck/videos/10102509264909801/' . PHP_EOL,
-				'<amp-facebook data-href="https://www.facebook.com/zuck/videos/10102509264909801/" layout="responsive" width="600" height="400"></amp-facebook>' . PHP_EOL,
+				'<amp-facebook data-href="https://www.facebook.com/zuck/videos/10102509264909801/" layout="responsive" width="600" height="400">' . $overflow_button . '</amp-facebook>' . PHP_EOL,
 			],
 
 			'post_embed'                    => [
 				'<div class="fb-post" data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/"></div>',
-				'<amp-facebook width="600" height="400" data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/" data-embed-as="post" layout="responsive"></amp-facebook>',
+				'<amp-facebook width="600" height="400" data-href="https://www.facebook.com/notes/facebook-engineering/under-the-hood-the-javascript-sdk-truly-asynchronous-loading/10151176218703920/" data-embed-as="post" layout="responsive">' . $overflow_button . '</amp-facebook>',
 			],
 
 			'post_with_fallbacks'           => [
@@ -115,14 +117,15 @@ public function get_raw_embed_dataset() {
 				',
 				'
 					<amp-facebook width="500" height="400" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"  data-show-text="true" data-embed-as="post" layout="responsive">
+						' . $overflow_button . '
 						<blockquote cite="https://developers.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore" fallback=""><!--blockquote_contents--></blockquote>
 					</amp-facebook>
 				',
 			],
 
 			'video_embed'                   => [
 				'<div class="fb-video" data-href="https://www.facebook.com/amanda.orr.56/videos/10212156330049017/" data-show-text="false"></div>',
-				'<amp-facebook width="600" height="400" data-href="https://www.facebook.com/amanda.orr.56/videos/10212156330049017/" data-show-text="false" data-embed-as="video" layout="responsive"></amp-facebook>',
+				'<amp-facebook width="600" height="400" data-href="https://www.facebook.com/amanda.orr.56/videos/10212156330049017/" data-show-text="false" data-embed-as="video" layout="responsive">' . $overflow_button . '</amp-facebook>',
 			],
 
 			'page_embed'                    => [
@@ -135,6 +138,7 @@ public function get_raw_embed_dataset() {
 				',
 				'
 					<amp-facebook-page width="340" height="432" data-href="https://www.facebook.com/xwp.co/" data-hide-cover="true" data-show-facepile="true" data-show-posts="false" layout="responsive">
+						' . $overflow_button . '
 						<div class="fb-xfbml-parse-ignore" fallback="">
 							<blockquote cite="https://www.facebook.com/xwp.co/"><!--blockquote_contents--></blockquote>
 						</div>
@@ -146,38 +150,36 @@ public function get_raw_embed_dataset() {
 				'
 					<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="400" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
 				',
-				'
-					<amp-facebook-like width="400" height="400" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true" layout="responsive">
-					</amp-facebook-like>
+				'<amp-facebook-like width="400" height="400" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true" layout="responsive">' . $overflow_button . '</amp-facebook-like>
 				',
 			],
 
 			'comments'                      => [
 				'
 					<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5"></div>
 				',
-				'<amp-facebook-comments width="600" height="400" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5" layout="responsive"></amp-facebook-comments>',
+				'<amp-facebook-comments width="600" height="400" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5" layout="responsive">' . $overflow_button . '</amp-facebook-comments>',
 			],
 
 			'comments_full_width'           => [
 				'
 					<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="100%" data-numposts="5"></div>
 				',
-				'<amp-facebook-comments width="auto" height="400" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5" layout="fixed-height"></amp-facebook-comments>',
+				'<amp-facebook-comments width="auto" height="400" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5" layout="fixed-height">' . $overflow_button . '</amp-facebook-comments>',
 			],
 
 			'comments_full_width_2'         => [
 				'
 					<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-height="123" data-width="100%" data-numposts="5"></div>
 				',
-				'<amp-facebook-comments width="auto" height="123" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5" layout="fixed-height"></amp-facebook-comments>',
+				'<amp-facebook-comments width="auto" height="123" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5" layout="fixed-height">' . $overflow_button . '</amp-facebook-comments>',
 			],
 
 			'comment_embed'                 => [
 				'
 					<div class="fb-comment-embed" data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185" data-width="500"></div>
 				',
-				'<amp-facebook width="500" height="400" data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185" data-embed-as="comment" layout="responsive"></amp-facebook>',
+				'<amp-facebook width="500" height="400" data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185" data-embed-as="comment" layout="responsive">' . $overflow_button . '</amp-facebook>',
 			],
 
 			'remove_fb_root'                => [

diff --git a/tests/php/test-amp-instagram-embed-handler.php b/tests/php/test-amp-instagram-embed-handler.php
@@ -7,30 +7,32 @@ class AMP_Instagram_Embed_Handler_Test extends WP_UnitTestCase {
 	use WithoutBlockPreRendering;
 
 	public function get_conversion_data() {
+		$overflow_button = '<button overflow type="button">See more</button>';
+
 		return [
 			'no_embed'        => [
 				'<p>Hello world.</p>',
 				'<p>Hello world.</p>' . PHP_EOL,
 			],
 			'simple_url'      => [
 				'https://instagram.com/p/7-l0z_p4A4/' . PHP_EOL,
-				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600"></amp-instagram></p>' . PHP_EOL,
+				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram></p>' . PHP_EOL,
 			],
 			'simple_tv_url'   => [
 				'https://instagram.com/tv/7-l0z_p4A4/' . PHP_EOL,
-				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600"></amp-instagram></p>' . PHP_EOL,
+				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram></p>' . PHP_EOL,
 			],
 			'simple_reel_url' => [
 				'https://instagram.com/reel/COWmlFLB_7P/' . PHP_EOL,
-				'<p><amp-instagram data-shortcode="COWmlFLB_7P" data-captioned layout="responsive" width="600" height="600"></amp-instagram></p>' . PHP_EOL,
+				'<p><amp-instagram data-shortcode="COWmlFLB_7P" data-captioned layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram></p>' . PHP_EOL,
 			],
 			'short_url'       => [
 				'https://instagr.am/p/7-l0z_p4A4' . PHP_EOL,
-				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600"></amp-instagram></p>' . PHP_EOL,
+				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram></p>' . PHP_EOL,
 			],
 			'short_tv_url'    => [
 				'https://instagr.am/tv/7-l0z_p4A4' . PHP_EOL,
-				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600"></amp-instagram></p>' . PHP_EOL,
+				'<p><amp-instagram data-shortcode="7-l0z_p4A4" data-captioned layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram></p>' . PHP_EOL,
 			],
 		];
 	}
@@ -97,6 +99,8 @@ public function test__get_scripts( $source, $expected ) {
 	 * @return array
 	 */
 	public function get_raw_embed_dataset() {
+		$overflow_button = '<button overflow type="button">See more</button>';
+
 		return [
 			'no_embed'                               => [
 				'<p>Hello world.</p>',
@@ -109,32 +113,32 @@ public function get_raw_embed_dataset() {
 
 			'blockquote_embed'                       => [
 				wpautop( '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BhsgU3jh6xE/"><div style="padding: 8px;">Lorem ipsum</div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>' ), // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
-				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600"></amp-instagram>' . "\n\n",
+				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram>' . "\n\n",
 			],
 
 			'blockquote_tv_embed'                    => [
 				wpautop( '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/tv/BhsgU3jh6xE/"><div style="padding: 8px;">Lorem ipsum</div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>' ), // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
-				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600"></amp-instagram>' . "\n\n",
+				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram>' . "\n\n",
 			],
 
 			'blockquote_reel_embed'                  => [
 				wpautop( '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/reel/COWmlFLB_7P/"><div style="padding: 8px;">Lorem ipsum</div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>' ), // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
-				'<amp-instagram data-shortcode="COWmlFLB_7P" layout="responsive" width="600" height="600"></amp-instagram>' . "\n\n",
+				'<amp-instagram data-shortcode="COWmlFLB_7P" layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram>' . "\n\n",
 			],
 
 			'blockquote_embed_notautop'              => [
 				'<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BhsgU3jh6xE/"><div style="padding: 8px;">Lorem ipsum</div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
-				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600"></amp-instagram> ',
+				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600">' . $overflow_button . '</amp-instagram> ',
 			],
 
 			'blockquote_embed_with_caption'          => [
 				wpautop( '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BhsgU3jh6xE/" data-instgrm-captioned><div style="padding: 8px;">Lorem ipsum</div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>' ), // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
-				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600" data-captioned=""></amp-instagram>' . "\n\n",
+				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600" data-captioned="">' . $overflow_button . '</amp-instagram>' . "\n\n",
 			],
 
 			'blockquote_embed_with_caption_notautop' => [
 				'<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/BhsgU3jh6xE/" data-instgrm-captioned><div style="padding: 8px;">Lorem ipsum</div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
-				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600" data-captioned=""></amp-instagram> ',
+				'<amp-instagram data-shortcode="BhsgU3jh6xE" layout="responsive" width="600" height="600" data-captioned="">' . $overflow_button . '</amp-instagram> ',
 			],
 
 			'blockquote_unsupported_permalink'       => [