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

Use amp-tiktok for TikTok instead of amp-embedly-card #6558

Merged
merged 6 commits into from
Aug 25, 2021
Merged

Use amp-tiktok for TikTok instead of amp-embedly-card #6558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0df34ea
Prevent amp-tiktok/blockquote from being double-converted
westonruter Aug 24, 2021
fcc5af2
Use amp-tiktok instead of amp-embedly-card
westonruter Aug 24, 2021
bbcbad3
Simply check for removing script wrapped in wpautop
westonruter Aug 24, 2021
e6949f4
Use Extension::TIKTOK in XPath
westonruter Aug 25, 2021
dd3eec2
Update skip message for TikTok oEmbed conversion
westonruter Aug 25, 2021
4d03ae7
Test TikTok embed in Custom HTML block to fix missing coverage
westonruter Aug 25, 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
97 changes: 38 additions & 59 deletions includes/embeds/class-amp-tiktok-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
* @package AMP
*/

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

/**
* Class AMP_TikTok_Embed_Handler
Expand Down Expand Up @@ -34,107 +39,81 @@ public function unregister_embed() {
* @param Document $dom DOM.
*/
public function sanitize_raw_embeds( Document $dom ) {
$nodes = $dom->xpath->query( '//blockquote[ contains( @class, "tiktok-embed" ) ]' );
$nodes = $dom->xpath->query(
sprintf( '//blockquote[ @cite and @data-video-id and contains( @class, "tiktok-embed" ) and not( parent::%s ) ]', Extension::TIKTOK )
);

foreach ( $nodes as $node ) {
if ( ! $this->is_raw_embed( $node ) ) {
continue;
}

$this->make_embed_amp_compatible( $node );
}
}

/**
* Determine if the node has already been sanitized.
*
* @param DOMElement $node The DOMNode.
* @return bool Whether the node is a raw embed.
*/
protected function is_raw_embed( DOMElement $node ) {
return ! $node->firstChild || ( $node->firstChild && 'amp-embedly-card' !== $node->firstChild->nodeName );
}

/**
* Make TikTok embed AMP compatible.
*
* @param DOMElement $blockquote_node The <blockquote> node to make AMP compatible.
* @param Element $blockquote The <blockquote> node to make AMP compatible.
*/
protected function make_embed_amp_compatible( DOMElement $blockquote_node ) {
$dom = $blockquote_node->ownerDocument;
$video_url = $blockquote_node->getAttribute( 'cite' );
protected function make_embed_amp_compatible( Element $blockquote ) {
$dom = $blockquote->ownerDocument;
$video_url = $blockquote->getAttribute( Attribute::CITE );

// If there is no video ID, stop here as its needed for the `data-url` parameter.
// If there is no video ID, stop here as its needed for the `data-src` parameter.
if ( empty( $video_url ) ) {
return;
}

$this->remove_embed_script( $blockquote_node );
$this->remove_embed_script( $blockquote );

$amp_node = AMP_DOM_Utils::create_node(
$amp_tiktok = AMP_DOM_Utils::create_node(
Document::fromNode( $dom ),
'amp-embedly-card',
Extension::TIKTOK,
[
'layout' => 'responsive',
'height' => 700,
'width' => 340,
'data-card-controls' => 0,
'data-url' => $video_url,
Attribute::LAYOUT => Layout::RESPONSIVE,
Attribute::HEIGHT => 575,
Attribute::WIDTH => 325,
Attribute::DATA_SRC => $video_url,
]
);

// Find existing <section> node to use as the placeholder.
foreach ( iterator_to_array( $blockquote_node->childNodes ) as $child ) {
if ( ! ( $child instanceof DOMElement ) ) {
continue;
}

// Append the placeholder if it was found.
if ( 'section' === $child->nodeName ) {
/**
* Placeholder to append to the AMP component.
*
* @var DOMElement $placeholder_node
*/
$placeholder_node = $blockquote_node->removeChild( $child );
$placeholder_node->setAttribute( 'placeholder', '' );
$amp_node->appendChild( $placeholder_node );
break;
}
}

$blockquote_node->parentNode->replaceChild( $amp_node, $blockquote_node );
$blockquote->parentNode->replaceChild( $amp_tiktok, $blockquote );
$amp_tiktok->appendChild( $blockquote );
$blockquote->setAttributeNode( $dom->createAttribute( Attribute::PLACEHOLDER ) );
$blockquote->removeAttribute( Attribute::STYLE );
}

/**
* Remove the TikTok embed script if it exists.
*
* @param DOMElement $node The DOMNode to make AMP compatible.
* @param Element $blockquote The blockquote element being made AMP-compatible.
*/
protected function remove_embed_script( DOMElement $node ) {
$next_element_sibling = $node->nextSibling;
while ( $next_element_sibling && ! ( $next_element_sibling instanceof DOMElement ) ) {
protected function remove_embed_script( Element $blockquote ) {
$next_element_sibling = $blockquote->nextSibling;
while ( $next_element_sibling && ! ( $next_element_sibling instanceof Element ) ) {
$next_element_sibling = $next_element_sibling->nextSibling;
}

$script_src = 'tiktok.com/embed.js';

// Handle case where script is wrapped in paragraph by wpautop.
if ( $next_element_sibling instanceof DOMElement && 'p' === $next_element_sibling->nodeName ) {
$children = $next_element_sibling->getElementsByTagName( '*' );
if ( 1 === $children->length && 'script' === $children->item( 0 )->nodeName && false !== strpos( $children->item( 0 )->getAttribute( 'src' ), $script_src ) ) {
if ( $next_element_sibling instanceof Element && Tag::P === $next_element_sibling->nodeName ) {
$script = $next_element_sibling->getElementsByTagName( Tag::SCRIPT )->item( 0 );
if (
$script instanceof Element
&&
false !== strpos( $script->getAttribute( Attribute::SRC ), $script_src )
) {
$next_element_sibling->parentNode->removeChild( $next_element_sibling );
return;
}
}

// Handle case where script is immediately following.
$is_embed_script = (
$next_element_sibling instanceof DOMElement
$next_element_sibling instanceof Element
&&
'script' === strtolower( $next_element_sibling->nodeName )
Tag::SCRIPT === strtolower( $next_element_sibling->nodeName )
&&
false !== strpos( $next_element_sibling->getAttribute( 'src' ), $script_src )
false !== strpos( $next_element_sibling->getAttribute( Attribute::SRC ), $script_src )
);
if ( $is_embed_script ) {
$next_element_sibling->parentNode->removeChild( $next_element_sibling );
Expand Down
86 changes: 77 additions & 9 deletions tests/php/test-class-amp-tiktok-embed-handler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* @package AMP.
*/

use AmpProject\AmpWP\Tests\Helpers\MarkupComparison;
use AmpProject\AmpWP\Tests\Helpers\WithoutBlockPreRendering;
use AmpProject\AmpWP\Tests\TestCase;

Expand All @@ -13,6 +14,8 @@
*/
class Test_AMP_TikTok_Embed_Handler extends TestCase {

use MarkupComparison;

use WithoutBlockPreRendering {
setUp as public prevent_block_pre_render;
}
Expand Down Expand Up @@ -70,17 +73,77 @@ public function mock_http_request( $pre, $r, $url ) {
*/
public function get_conversion_data() {
return [
'no_embed' => [
'no_embed' => [
'<p>Hello world.</p>',
'<p>Hello world.</p>' . PHP_EOL,
],

'url_simple' => [
'url_simple' => [
'https://www.tiktok.com/@scout2015/video/6718335390845095173' . PHP_EOL,

'<amp-embedly-card layout="responsive" height="700" width="340" data-card-controls="0" data-url="https://www.tiktok.com/@scout2015/video/6718335390845095173"><section placeholder=""> <a target="_blank" title="@scout2015" href="https://www.tiktok.com/@scout2015">@scout2015</a> ' . PHP_EOL .
'<p>Scramble up ur name &amp; I’ll try to guess it😍❤️ <a title="foryoupage" target="_blank" href="https://www.tiktok.com/tag/foryoupage">#foryoupage</a> <a title="PetsOfTikTok" target="_blank" href="https://www.tiktok.com/tag/PetsOfTikTok">#petsoftiktok</a> <a title="aesthetic" target="_blank" href="https://www.tiktok.com/tag/aesthetic">#aesthetic</a></p>' . PHP_EOL .
'<p> <a target="_blank" title="♬ original sound - tiff" href="https://www.tiktok.com/music/original-sound-6689804660171082501">♬ original sound – tiff</a> </p></section></amp-embedly-card>' . PHP_EOL . PHP_EOL,
'
<amp-tiktok layout="responsive" height="575" width="325" data-src="https://www.tiktok.com/@scout2015/video/6718335390845095173">
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@scout2015/video/6718335390845095173" data-video-id="6718335390845095173" placeholder>
<section> <a target="_blank" title="@scout2015" href="https://www.tiktok.com/@scout2015">@scout2015</a>
<p>Scramble up ur name &amp; I’ll try to guess it😍❤️ <a title="foryoupage" target="_blank" href="https://www.tiktok.com/tag/foryoupage">#foryoupage</a> <a title="PetsOfTikTok" target="_blank" href="https://www.tiktok.com/tag/PetsOfTikTok">#petsoftiktok</a> <a title="aesthetic" target="_blank" href="https://www.tiktok.com/tag/aesthetic">#aesthetic</a></p>
<p> <a target="_blank" title="♬ original sound - tiff" href="https://www.tiktok.com/music/original-sound-6689804660171082501">♬ original sound – tiff</a> </p></section>
</blockquote>
</amp-tiktok>
',
],

'tiktok-embed-code-with-wpautop' => [
'
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@countingprimes/video/6988237085899574533" data-video-id="6988237085899574533" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@countingprimes" href="https://www.tiktok.com/@countingprimes">@countingprimes</a> <p>You can now embed TikTok\'s in AMP</p> <a target="_blank" title="♬ original sound - countingprimes" href="https://www.tiktok.com/music/original-sound-6988236987325057798">♬ original sound - countingprimes</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
',
'
<amp-tiktok layout="responsive" height="575" width="325" data-src="https://www.tiktok.com/@countingprimes/video/6988237085899574533">
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@countingprimes/video/6988237085899574533" data-video-id="6988237085899574533" placeholder>
<section>
<a target="_blank" title="@countingprimes" href="https://www.tiktok.com/@countingprimes">@countingprimes</a>
<p>You can now embed TikTok’s in AMP</p>
<p> <a target="_blank" title="♬ original sound - countingprimes" href="https://www.tiktok.com/music/original-sound-6988236987325057798">♬ original sound – countingprimes</a> </p>
</section>
</blockquote>
</amp-tiktok>
',
],

'tiktok-embed-code-without-wpautop' => [
'
<!-- wp:html -->
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@countingprimes/video/6988237085899574533" data-video-id="6988237085899574533" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@countingprimes" href="https://www.tiktok.com/@countingprimes">@countingprimes</a> <p>You can now embed TikTok\'s in AMP</p> <a target="_blank" title="♬ original sound - countingprimes" href="https://www.tiktok.com/music/original-sound-6988236987325057798">♬ original sound - countingprimes</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
<!-- /wp:html -->
',
'
<amp-tiktok layout="responsive" height="575" width="325" data-src="https://www.tiktok.com/@countingprimes/video/6988237085899574533">
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@countingprimes/video/6988237085899574533" data-video-id="6988237085899574533" placeholder>
<section>
<a target="_blank" title="@countingprimes" href="https://www.tiktok.com/@countingprimes">@countingprimes</a>
<p>You can now embed TikTok’s in AMP</p>
<a target="_blank" title="♬ original sound - countingprimes" href="https://www.tiktok.com/music/original-sound-6988236987325057798">♬ original sound – countingprimes</a>
</section>
</blockquote>
</amp-tiktok>
',
],

'amp-tiktok-passthrough' => [
'
<!-- wp:html -->
<amp-tiktok width="300" height="800" layout="intrinsic">
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@countingprimes/video/6988237085899574533" data-video-id="6988237085899574533" style="max-width: 605px;min-width: 325px;">
<section>
<a target="_blank" title="@countingprimes" href="https://www.tiktok.com/@countingprimes">@countingprimes</a>
<p>You can now embed TikTok’s in AMP</p>
<a target="_blank" title="♬ original sound — countingprimes" href="https://www.tiktok.com/music/original-sound-6988236987325057798">♬ original sound — countingprimes</a>
</section>
</blockquote>
</amp-tiktok>
<!-- /wp:html -->
',

null,
],
];
}
Expand All @@ -92,10 +155,15 @@ public function get_conversion_data() {
* @param string $expected Expected.
* @dataProvider get_conversion_data
*/
public function test_conversion( $source, $expected ) {
public function test_conversion( $source, $expected = null ) {
if ( version_compare( '5.4-alpha', get_bloginfo( 'version' ), '>' ) ) {
$this->markTestSkipped( 'The TikTok embed is only available in 5.4-alpha (until 5.4 is stable)' );
$this->markTestSkipped( 'The TikTok oEmbed provider is only available in 5.4-alpha and later' );
}
if ( ! $expected ) {
$expected = $source;
}

$expected = preg_replace( '/<!--.*?-->/s', '', $expected );

$embed = new AMP_TikTok_Embed_Handler();
$embed->register_embed();
Expand All @@ -104,8 +172,8 @@ public function test_conversion( $source, $expected ) {
$dom = AMP_DOM_Utils::get_dom_from_content( $filtered_content );
$embed->sanitize_raw_embeds( $dom );

$content = AMP_DOM_Utils::get_content_from_dom( $dom );
$actual = AMP_DOM_Utils::get_content_from_dom( $dom );

$this->assertEquals( $expected, $content );
$this->assertSimilarMarkup( $expected, $actual );
}
}