From e1994de4d30dd0d87b74349bf302ed480afa36da Mon Sep 17 00:00:00 2001 From: Pierre Gordon Date: Tue, 12 May 2020 01:02:52 -0400 Subject: [PATCH 1/3] Use amp-embedly-card for Tiktok embeds --- .../embeds/class-amp-tiktok-embed-handler.php | 41 +++++++------------ .../test-class-amp-tiktok-embed-handler.php | 5 +-- 2 files changed, 17 insertions(+), 29 deletions(-) diff --git a/includes/embeds/class-amp-tiktok-embed-handler.php b/includes/embeds/class-amp-tiktok-embed-handler.php index b2a62c7129e..ff8be9d52c7 100644 --- a/includes/embeds/class-amp-tiktok-embed-handler.php +++ b/includes/embeds/class-amp-tiktok-embed-handler.php @@ -50,7 +50,7 @@ public function sanitize_raw_embeds( Document $dom ) { * @return bool Whether the node is a raw embed. */ protected function is_raw_embed( DOMElement $node ) { - return ! $node->firstChild || ( $node->firstChild && 'amp-iframe' !== $node->firstChild->nodeName ); + return ! $node->firstChild || ( $node->firstChild && 'amp-embedly-card' !== $node->firstChild->nodeName ); } /** @@ -59,34 +59,24 @@ protected function is_raw_embed( DOMElement $node ) { * @param DOMElement $blockquote_node The
node to make AMP compatible. */ protected function make_embed_amp_compatible( DOMElement $blockquote_node ) { - $dom = $blockquote_node->ownerDocument; - $video_id = $blockquote_node->getAttribute( 'data-video-id' ); + $dom = $blockquote_node->ownerDocument; + $video_url = $blockquote_node->getAttribute( 'cite' ); - // If there is no video ID, stop here as its needed for the iframe `src` attribute. - if ( empty( $video_id ) ) { + // If there is no video ID, stop here as its needed for the `data-url` parameter. + if ( empty( $video_url ) ) { return; } $this->remove_embed_script( $blockquote_node ); - $amp_iframe_node = AMP_DOM_Utils::create_node( + $amp_node = AMP_DOM_Utils::create_node( Document::fromNode( $dom ), - 'amp-iframe', + 'amp-embedly-card', [ - 'layout' => 'fixed-height', - - /* - * The iframe dimensions cannot be derived from the embed, so we default to a dimension that should - * allow the embed to be fully shown. - */ - 'height' => 900, - - /* - * A `lang` query parameter is added to the URL via JS. This can't be determined here so it is not - * added. Whether it alters the embed in any way or not has not been determined. - */ - 'src' => 'https://www.tiktok.com/embed/v2/' . $video_id, - 'sandbox' => 'allow-scripts allow-same-origin allow-popups', + 'layout' => 'responsive', + 'height' => 700, + 'width' => 340, + 'data-url' => $video_url, ] ); @@ -99,23 +89,22 @@ protected function make_embed_amp_compatible( DOMElement $blockquote_node ) { // Append the placeholder if it was found. if ( 'section' === $child->nodeName ) { /** - * Placeholder to append to the iframe. + * Placeholder to append to the AMP component. * * @var DOMElement $placeholder_node */ $placeholder_node = $blockquote_node->removeChild( $child ); $placeholder_node->setAttribute( 'placeholder', '' ); - $amp_iframe_node->appendChild( $placeholder_node ); + $amp_node->appendChild( $placeholder_node ); break; } } - // On the non-amp page the embed is wrapped with a
, so the same is done here. - $blockquote_node->appendChild( $amp_iframe_node ); + $blockquote_node->parentNode->replaceChild( $amp_node, $blockquote_node ); } /** - * Remove TikTok's embed script if it exists. + * Remove the TikTok embed script if it exists. * * @param DOMElement $node The DOMNode to make AMP compatible. */ diff --git a/tests/php/test-class-amp-tiktok-embed-handler.php b/tests/php/test-class-amp-tiktok-embed-handler.php index 0ab5d8196c8..3a8dc051f28 100644 --- a/tests/php/test-class-amp-tiktok-embed-handler.php +++ b/tests/php/test-class-amp-tiktok-embed-handler.php @@ -71,10 +71,9 @@ public function get_conversion_data() { 'url_simple' => [ 'https://www.tiktok.com/@scout2015/video/6718335390845095173' . PHP_EOL, - '
' . PHP_EOL . PHP_EOL . - '
@scout2015 ' . PHP_EOL . + '
@scout2015 ' . PHP_EOL . '

Scramble up ur name & I’ll try to guess it😍❀️ #foryoupage #petsoftiktok #aesthetic

' . PHP_EOL . - '

♬ original sound – π‡πšπ°πšπ’π’π“†‰

' . PHP_EOL . PHP_EOL, + '

♬ original sound – π‡πšπ°πšπ’π’π“†‰

' . PHP_EOL . PHP_EOL, ], ]; } From 8ab4907e9e2516443a5be58817b13a7dedcc81f0 Mon Sep 17 00:00:00 2001 From: Pierre Gordon Date: Tue, 12 May 2020 01:36:28 -0400 Subject: [PATCH 2/3] Disable share icons --- includes/embeds/class-amp-tiktok-embed-handler.php | 9 +++++---- tests/php/test-class-amp-tiktok-embed-handler.php | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/includes/embeds/class-amp-tiktok-embed-handler.php b/includes/embeds/class-amp-tiktok-embed-handler.php index ff8be9d52c7..7158f7da8a3 100644 --- a/includes/embeds/class-amp-tiktok-embed-handler.php +++ b/includes/embeds/class-amp-tiktok-embed-handler.php @@ -73,10 +73,11 @@ protected function make_embed_amp_compatible( DOMElement $blockquote_node ) { Document::fromNode( $dom ), 'amp-embedly-card', [ - 'layout' => 'responsive', - 'height' => 700, - 'width' => 340, - 'data-url' => $video_url, + 'layout' => 'responsive', + 'height' => 700, + 'width' => 340, + 'data-card-controls' => 0, + 'data-url' => $video_url, ] ); diff --git a/tests/php/test-class-amp-tiktok-embed-handler.php b/tests/php/test-class-amp-tiktok-embed-handler.php index 3a8dc051f28..86bfe9f4373 100644 --- a/tests/php/test-class-amp-tiktok-embed-handler.php +++ b/tests/php/test-class-amp-tiktok-embed-handler.php @@ -71,7 +71,7 @@ public function get_conversion_data() { 'url_simple' => [ 'https://www.tiktok.com/@scout2015/video/6718335390845095173' . PHP_EOL, - '
@scout2015 ' . PHP_EOL . + '
@scout2015 ' . PHP_EOL . '

Scramble up ur name & I’ll try to guess it😍❀️ #foryoupage #petsoftiktok #aesthetic

' . PHP_EOL . '

♬ original sound – π‡πšπ°πšπ’π’π“†‰

' . PHP_EOL . PHP_EOL, ], From cc6cc7186542a42d602b384b0a34ee552a567cc4 Mon Sep 17 00:00:00 2001 From: Pierre Gordon <16200219+pierlon@users.noreply.github.com> Date: Wed, 13 May 2020 14:42:51 -0400 Subject: [PATCH 3/3] Pin amp-experiment to v0.1 (#4690) --- includes/amp-helper-functions.php | 8 ++++++++ tests/php/test-class-amp-theme-support.php | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/includes/amp-helper-functions.php b/includes/amp-helper-functions.php index 7d4b7fff377..98f332ae39e 100644 --- a/includes/amp-helper-functions.php +++ b/includes/amp-helper-functions.php @@ -834,6 +834,14 @@ function amp_register_default_scripts( $wp_scripts ) { null ); } + + if ( $wp_scripts->query( 'amp-experiment', 'registered' ) ) { + /* + * Version 1.0 of amp-experiment is still experimental and requires the user to enable it. + * @todo Revisit once amp-experiment is no longer experimental. + */ + $wp_scripts->registered['amp-experiment']->src = 'https://cdn.ampproject.org/v0/amp-experiment-0.1.js'; + } } /** diff --git a/tests/php/test-class-amp-theme-support.php b/tests/php/test-class-amp-theme-support.php index fbbb9918f8a..a5cf91a3c87 100644 --- a/tests/php/test-class-amp-theme-support.php +++ b/tests/php/test-class-amp-theme-support.php @@ -1982,11 +1982,11 @@ static function ( $url ) { '', '', '', - '', + '', '', '', - '', + '', '#\s*#s', '##s',