Skip to content

Commit 4ce50e9

Browse files
westonruterwestonruter
committed
Use normal Twitter oEmbed response as amp-twitter placeholder
1 parent fcf91e7 commit 4ce50e9

2 files changed

Lines changed: 99 additions & 21 deletions

File tree

‎includes/embeds/class-amp-twitter-embed.php‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,51 @@ class AMP_Twitter_Embed_Handler extends AMP_Base_Embed_Handler {
4646
* Registers embed.
4747
*/
4848
public function register_embed() {
49+
add_filter( 'embed_oembed_html', [ $this, 'filter_embed_oembed_html' ], 10, 2 );
4950
add_shortcode( 'tweet', [ $this, 'shortcode' ] ); // Note: This is a Jetpack shortcode.
50-
wp_embed_register_handler( 'amp-twitter', self::URL_PATTERN, [ $this, 'oembed' ], -1 );
5151
wp_embed_register_handler( 'amp-twitter-timeline', self::URL_PATTERN_TIMELINE, [ $this, 'oembed_timeline' ], -1 );
5252
}
5353

5454
/**
5555
* Unregisters embed.
5656
*/
5757
public function unregister_embed() {
58+
remove_filter( 'embed_oembed_html', [ $this, 'filter_embed_oembed_html' ] );
5859
remove_shortcode( 'tweet' ); // Note: This is a Jetpack shortcode.
59-
wp_embed_unregister_handler( 'amp-twitter', -1 );
6060
wp_embed_unregister_handler( 'amp-twitter-timeline', -1 );
6161
}
6262

63+
/**
64+
* Filter oEmbed HTML for Twitter to prepare it for AMP.
65+
*
66+
* @param string $cache Cache for oEmbed.
67+
* @param string $url Embed URL.
68+
* @return string Embed.
69+
*/
70+
public function filter_embed_oembed_html( $cache, $url ) {
71+
$parsed_url = wp_parse_url( $url );
72+
if ( false === strpos( $parsed_url['host'], 'twitter.com' ) ) {
73+
return $cache;
74+
}
75+
76+
if ( ! preg_match( '#^https?://twitter.com/.+/status/(\d+)#', $url, $matches ) ) {
77+
return $cache;
78+
}
79+
$tweet_id = $matches[1];
80+
81+
$cache = preg_replace(
82+
'#(<blockquote[^>]+?twitter-tweet[^>]+)(>.+)<script.*$#',
83+
sprintf(
84+
'<amp-twitter width="%d" height="%d" layout="responsive" data-tweetid="%s">$1 placeholder $2</amp-twitter>',
85+
esc_attr( $this->DEFAULT_WIDTH ),
86+
esc_attr( $this->DEFAULT_HEIGHT ),
87+
esc_attr( $tweet_id )
88+
),
89+
$cache
90+
);
91+
return $cache;
92+
}
93+
6394
/**
6495
* Gets AMP-compliant markup for the Twitter shortcode.
6596
*
@@ -110,12 +141,14 @@ public function shortcode( $attr ) {
110141
/**
111142
* Render oEmbed.
112143
*
144+
* @deprecated Since 1.1 as now the sanitize_raw_embeds() is used exclusively, allowing the original oEmbed response to be rapped by amp-twitter.
113145
* @see \WP_Embed::shortcode()
114146
*
115147
* @param array $matches URL pattern matches.
116148
* @return string Rendered oEmbed.
117149
*/
118150
public function oembed( $matches ) {
151+
_deprecated_function( __FUNCTION__, '1.1' );
119152
$id = false;
120153

121154
if ( isset( $matches['tweet'] ) && is_numeric( $matches['tweet'] ) ) {
@@ -212,6 +245,10 @@ public function sanitize_raw_embeds( $dom ) {
212245
* @return bool Whether node is for raw embed.
213246
*/
214247
private function is_tweet_raw_embed( $node ) {
248+
if ( $node->parentNode && 'amp-twitter' === $node->parentNode->nodeName ) {
249+
return false;
250+
}
251+
215252
$class_attr = $node->getAttribute( 'class' );
216253

217254
return null !== $class_attr && false !== strpos( $class_attr, 'twitter-tweet' );
@@ -248,6 +285,11 @@ private function create_amp_twitter_and_replace_node( $dom, $node ) {
248285
$attributes
249286
);
250287

288+
$placeholder = $node->cloneNode( true );
289+
$placeholder->setAttribute( 'placeholder', '' );
290+
291+
$new_node->appendChild( $placeholder );
292+
251293
$this->sanitize_embed_script( $node );
252294

253295
$node->parentNode->replaceChild( $new_node, $node );

‎tests/php/test-amp-twitter-embed.php‎

Lines changed: 55 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
<?php
2-
2+
/**
3+
* Tests for Twitter Embeds.
4+
*
5+
* @package AMP
6+
*/
7+
8+
/**
9+
* Class AMP_Twitter_Embed_Handler_Test
10+
*
11+
* @covers AMP_Twitter_Embed_Handler
12+
*/
313
class AMP_Twitter_Embed_Test extends WP_UnitTestCase {
14+
15+
/**
16+
* Get conversion data.
17+
*
18+
* @return array
19+
*/
420
public function get_conversion_data() {
521
return [
622
'no_embed' => [
@@ -9,28 +25,34 @@ public function get_conversion_data() {
925
],
1026
'url_simple' => [
1127
'https://twitter.com/wordpress/status/987437752164737025' . PHP_EOL,
12-
'<p><amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480"></amp-twitter></p>' . PHP_EOL,
28+
'<p><amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480">',
29+
"</amp-twitter></p>\n",
1330
],
1431
'url_with_big_tweet_id' => [
1532
'https://twitter.com/wordpress/status/705219971425574912' . PHP_EOL,
16-
'<p><amp-twitter data-tweetid="705219971425574912" layout="responsive" width="600" height="480"></amp-twitter></p>' . PHP_EOL,
33+
'<p><amp-twitter data-tweetid="705219971425574912" layout="responsive" width="600" height="480">',
34+
"</amp-twitter></p>\n",
1735
],
1836

1937
'timeline_url_with_profile' => [
2038
'https://twitter.com/wordpress' . PHP_EOL,
21-
'<p><amp-twitter data-timeline-source-type="profile" data-timeline-screen-name="wordpress" layout="responsive" width="600" height="480"></amp-twitter></p>' . PHP_EOL,
39+
'<p><amp-twitter data-timeline-source-type="profile" data-timeline-screen-name="wordpress" layout="responsive" width="600" height="480">',
40+
"</amp-twitter></p>\n",
2241
],
2342
'timeline_url_with_likes' => [
2443
'https://twitter.com/wordpress/likes' . PHP_EOL,
25-
'<p><amp-twitter data-timeline-source-type="likes" data-timeline-screen-name="wordpress" layout="responsive" width="600" height="480"></amp-twitter></p>' . PHP_EOL,
44+
'<p><amp-twitter data-timeline-source-type="likes" data-timeline-screen-name="wordpress" layout="responsive" width="600" height="480">',
45+
"</amp-twitter></p>\n",
2646
],
2747
'timeline_url_with_list' => [
2848
'https://twitter.com/wordpress/lists/random_list' . PHP_EOL,
29-
'<p><amp-twitter data-timeline-source-type="list" data-timeline-slug="random_list" data-timeline-owner-screen-name="wordpress" layout="responsive" width="600" height="480"></amp-twitter></p>' . PHP_EOL,
49+
'<p><amp-twitter data-timeline-source-type="list" data-timeline-slug="random_list" data-timeline-owner-screen-name="wordpress" layout="responsive" width="600" height="480">',
50+
"</amp-twitter></p>\n",
3051
],
3152
'timeline_url_with_list2' => [
3253
'https://twitter.com/robertnyman/lists/web-gdes' . PHP_EOL,
33-
'<p><amp-twitter data-timeline-source-type="list" data-timeline-slug="web-gdes" data-timeline-owner-screen-name="robertnyman" layout="responsive" width="600" height="480"></amp-twitter></p>' . PHP_EOL,
54+
'<p><amp-twitter data-timeline-source-type="list" data-timeline-slug="web-gdes" data-timeline-owner-screen-name="robertnyman" layout="responsive" width="600" height="480">',
55+
"</amp-twitter></p>\n",
3456
],
3557

3658
'shortcode_without_id' => [
@@ -39,23 +61,28 @@ public function get_conversion_data() {
3961
],
4062
'shortcode_simple' => [
4163
'[tweet 987437752164737025]' . PHP_EOL,
42-
'<amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480"></amp-twitter>' . PHP_EOL,
64+
'<amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480">',
65+
"</amp-twitter>\n",
4366
],
4467
'shortcode_with_tweet_attribute' => [
4568
'[tweet tweet=987437752164737025]' . PHP_EOL,
46-
'<amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480"></amp-twitter>' . PHP_EOL,
69+
'<amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480">',
70+
"</amp-twitter>\n",
4771
],
4872
'shortcode_with_big_tweet_id' => [
4973
'[tweet 705219971425574912]' . PHP_EOL,
50-
'<amp-twitter data-tweetid="705219971425574912" layout="responsive" width="600" height="480"></amp-twitter>' . PHP_EOL,
74+
'<amp-twitter data-tweetid="705219971425574912" layout="responsive" width="600" height="480">',
75+
"</amp-twitter>\n",
5176
],
5277
'shortcode_with_url' => [
5378
'[tweet https://twitter.com/wordpress/status/987437752164737025]' . PHP_EOL,
54-
'<amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480"></amp-twitter>' . PHP_EOL,
79+
'<amp-twitter data-tweetid="987437752164737025" layout="responsive" width="600" height="480">',
80+
"</amp-twitter>\n",
5581
],
5682
'shortcode_with_url_with_big_tweet_id' => [
5783
'[tweet https://twitter.com/wordpress/status/705219971425574912]' . PHP_EOL,
58-
'<amp-twitter data-tweetid="705219971425574912" layout="responsive" width="600" height="480"></amp-twitter>' . PHP_EOL,
84+
'<amp-twitter data-tweetid="705219971425574912" layout="responsive" width="600" height="480">',
85+
"</amp-twitter>\n",
5986
],
6087
'shortcode_with_non_numeric_tweet_id' => [
6188
'[tweet abcd]' . PHP_EOL,
@@ -65,14 +92,22 @@ public function get_conversion_data() {
6592
}
6693

6794
/**
95+
* Test conversion.
96+
*
6897
* @dataProvider get_conversion_data
98+
* @param string $source Source.
99+
* @param string $expected_start Expected start.
100+
* @param string $expected_end Expected end.
69101
*/
70-
public function test__conversion( $source, $expected ) {
102+
public function test__conversion( $source, $expected_start, $expected_end = null ) {
71103
$embed = new AMP_Twitter_Embed_Handler();
72104
$embed->register_embed();
73105
$filtered_content = apply_filters( 'the_content', $source );
74106

75-
$this->assertEquals( $expected, $filtered_content );
107+
$this->assertStringStartsWith( $expected_start, $filtered_content );
108+
if ( $expected_end ) {
109+
$this->assertStringEndsWith( $expected_end, $filtered_content );
110+
}
76111
}
77112

78113
public function get_scripts_data() {
@@ -95,6 +130,7 @@ public function test__get_scripts( $source, $expected ) {
95130
$embed = new AMP_Twitter_Embed_Handler();
96131
$embed->register_embed();
97132
$source = apply_filters( 'the_content', $source );
133+
$source = preg_replace( '#(<amp-twitter.+?>).*?(</amp-twitter>)#s', '$1$2', $source );
98134

99135
$whitelist_sanitizer = new AMP_Tag_And_Attribute_Sanitizer( AMP_DOM_Utils::get_dom_from_content( $source ) );
100136
$whitelist_sanitizer->sanitize();
@@ -124,8 +160,8 @@ public function get_raw_embed_dataset() {
124160
],
125161

126162
'blockquote_embed' => [
127-
wpautop( '<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Celebrate the WordPress 15th Anniversary on May 27 <a href="https://t.co/jv62WkI9lr">https://t.co/jv62WkI9lr</a> <a href="https://t.co/4ZECodSK78">pic.twitter.com/4ZECodSK78</a></p>&mdash; WordPress (@WordPress) <a href="https://twitter.com/WordPress/status/987437752164737025?ref_src=twsrc%5Etfw">April 20, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>' ), // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
128-
'<amp-twitter width="600" height="480" layout="responsive" data-tweetid="987437752164737025" class="twitter-tweet" data-lang="en"></amp-twitter>' . "\n\n",
163+
wpautop( '<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Celebrate the WordPress 15th Anniversary on May 27 <a href="https://t.co/jv62WkI9lr">https://t.co/jv62WkI9lr</a> <a href="https://t.co/4ZECodSK78">pic.twitter.com/4ZECodSK78</a></p>-- WordPress (@WordPress) <a href="https://twitter.com/WordPress/status/987437752164737025?ref_src=twsrc%5Etfw">April 20, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>' ), // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
164+
'<amp-twitter width="600" height="480" layout="responsive" data-tweetid="987437752164737025"><blockquote class="twitter-tweet" data-lang="en" placeholder=""><p lang="en" dir="ltr">Celebrate the WordPress 15th Anniversary on May 27 <a href="https://t.co/jv62WkI9lr">https://t.co/jv62WkI9lr</a> <a href="https://t.co/4ZECodSK78">pic.twitter.com/4ZECodSK78</a></p>-- WordPress (@WordPress) <a href="https://twitter.com/WordPress/status/987437752164737025?ref_src=twsrc%5Etfw">April 20, 2018</a></blockquote></amp-twitter>' . "\n\n",
129165
],
130166

131167
'blockquote_embed_with_data_conversation' => [
@@ -139,8 +175,8 @@ public function get_raw_embed_dataset() {
139175
],
140176

141177
'blockquote_embed_not_autop' => [
142-
'<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Celebrate the WordPress 15th Anniversary on May 27 <a href="https://t.co/jv62WkI9lr">https://t.co/jv62WkI9lr</a> <a href="https://t.co/4ZECodSK78">pic.twitter.com/4ZECodSK78</a></p>&mdash; WordPress (@WordPress) <a href="https://twitter.com/WordPress/status/987437752164737025?ref_src=twsrc%5Etfw">April 20, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
143-
'<amp-twitter width="600" height="480" layout="responsive" data-tweetid="987437752164737025" class="twitter-tweet" data-lang="en"></amp-twitter> ',
178+
'<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Celebrate the WordPress 15th Anniversary on May 27 <a href="https://t.co/jv62WkI9lr">https://t.co/jv62WkI9lr</a> <a href="https://t.co/4ZECodSK78">pic.twitter.com/4ZECodSK78</a></p>-- WordPress (@WordPress) <a href="https://twitter.com/WordPress/status/987437752164737025?ref_src=twsrc%5Etfw">April 20, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine
179+
'<amp-twitter width="600" height="480" layout="responsive" data-tweetid="987437752164737025"><blockquote class="twitter-tweet" data-lang="en" placeholder=""><p lang="en" dir="ltr">Celebrate the WordPress 15th Anniversary on May 27 <a href="https://t.co/jv62WkI9lr">https://t.co/jv62WkI9lr</a> <a href="https://t.co/4ZECodSK78">pic.twitter.com/4ZECodSK78</a></p>-- WordPress (@WordPress) <a href="https://twitter.com/WordPress/status/987437752164737025?ref_src=twsrc%5Etfw">April 20, 2018</a></blockquote></amp-twitter> ',
144180
],
145181
];
146182
}
@@ -151,7 +187,7 @@ public function get_raw_embed_dataset() {
151187
* @param string $source Content.
152188
* @param string $expected Expected content.
153189
* @dataProvider get_raw_embed_dataset
154-
* @covers AMP_Instagram_Embed_Handler::sanitize_raw_embeds()
190+
* @covers AMP_Twitter_Embed_Handler::sanitize_raw_embeds()
155191
*/
156192
public function test__raw_embed_sanitizer( $source, $expected ) {
157193
$dom = AMP_DOM_Utils::get_dom_from_content( $source );

0 commit comments

Comments
 (0)