Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add overflow buttons to Twitter, Facebook, and Instagram embeds #6502

Merged
merged 3 commits into from
Jul 30, 2021
Merged

Add overflow buttons to Twitter, Facebook, and Instagram embeds #6502

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22eb317
Add overflow buttons to Twitter, Facebook, and Instagram embeds
westonruter Jul 30, 2021
e88a8fb
Remove unused `use` statements
pierlon Jul 30, 2021
294628a
Use OVERFLOW constant
westonruter Jul 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions includes/embeds/class-amp-base-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
* @package AMP
*/

use AmpProject\Attribute;
use AmpProject\Dom\Document;
use AmpProject\Dom\Element;
use AmpProject\Tag;

/**
Expand Down Expand Up @@ -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( '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 ) );
}
}
5 changes: 4 additions & 1 deletion includes/embeds/class-amp-facebook-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,8 @@ public function render( $args ) {
'layout' => 'responsive',
'width' => $this->args['width'],
'height' => $this->args['height'],
]
],
$this->create_overflow_button_markup()
);
}

Expand Down Expand Up @@ -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' ) ) {
Expand Down
4 changes: 3 additions & 1 deletion includes/embeds/class-amp-instagram-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@ public function render( $args ) {
'layout' => 'responsive',
'width' => $this->args['width'],
'height' => $this->args['height'],
]
],
$this->create_overflow_button_markup()
);
}

Expand Down Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion includes/embeds/class-amp-twitter-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() );
}

/**
Expand Down Expand Up @@ -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.
*
Expand Down
28 changes: 15 additions & 13 deletions tests/php/test-amp-facebook-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
Expand All @@ -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' => [
Expand All @@ -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' => [
Expand All @@ -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>
Expand All @@ -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' => [
Expand Down
26 changes: 15 additions & 11 deletions tests/php/test-amp-instagram-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
],
];
}
Expand Down Expand Up @@ -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>',
Expand All @@ -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' => [
Expand Down
Loading