Skip to content

Commit

Permalink
Merge pull request #14 from alleyinteractive/feature/issue-12/add-oem…
Browse files Browse the repository at this point in the history 
…bed-support

Issue-12: Add oEmbed support
  • Loading branch information
@mogmarsh
mogmarsh authored Feb 28, 2024
2 parents 4337f20 + 49ef308 commit d8b1fdd
Show file tree
Hide file tree
Showing 2 changed files with 167 additions and 1 deletion.
116 changes: 115 additions & 1 deletion src/class-block-converter.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,19 @@ protected function blockquote( DOMNode $node ): ?Block {
protected function p( DOMNode $node ): ?Block {
$content = static::get_node_html( $node );

if ( ! empty( filter_var( $node->textContent, FILTER_VALIDATE_URL ) ) ) {
// Instagram and Facebook embeds require an api key to retrieve oEmbed data.
if ( \str_contains( $node->textContent, 'instagram.com' ) ) {
return $this->instagram_embed( $node->textContent );
}
if ( \str_contains( $node->textContent, 'facebook.com' ) ) {
return $this->facebook_embed( $node->textContent );
}
if ( false !== wp_oembed_get( $node->textContent ) ) {
return $this->embed( $node->textContent );
}
}

if ( empty( $content ) ) {
return null;
}
Expand Down Expand Up @@ -235,7 +248,7 @@ protected function img( DOMElement|DOMNode $element ): ?Block {
* Create ol blocks.
*
* @param DOMNode $node The node.
* @return block
* @return Block
*/
protected function ol( DOMNode $node ): Block {
return new Block(
Expand All @@ -247,6 +260,107 @@ protected function ol( DOMNode $node ): Block {
);
}

/**
* Create embed blocks.
*
* @param string $url The URL.
* @return Block
*/
protected function embed( string $url ): Block {
// This would probably be better as an internal request to /wp-json/oembed/1.0/proxy?url=...
$data = _wp_oembed_get_object()->get_data( $url, [] );

$aspect_ratio = '';
if ( ! empty( $data->height ) && ! empty( $data->width ) ) {
if ( 1.78 === round( $data->width / $data->height, 2 ) ) {
$aspect_ratio = '16-9';
}
if ( 1.33 === round( $data->width / $data->height, 2 ) ) {
$aspect_ratio = '4-3';
}
}

$atts = [
'url' => $url,
'type' => $data->type,
'providerNameSlug' => sanitize_title( $data->provider_name ),
'responsive' => true,
];

if ( ! empty( $aspect_ratio ) ) {
$aspect_ratio = sprintf( 'wp-embed-aspect-%s wp-has-aspect-ratio', $aspect_ratio );
$atts['className'] = $aspect_ratio;
}

return new Block(
block_name: 'embed',
attributes: $atts,
content: sprintf(
'<figure class="wp-block-embed is-type-%s is-provider-%s wp-block-embed-%s%s"><div class="wp-block-embed__wrapper">
%s
</div></figure>',
$data->type,
sanitize_title( $data->provider_name ),
sanitize_title( $data->provider_name ),
$aspect_ratio ? ' ' . $aspect_ratio : '',
$url
),
);
}

/**
* Create Instagram embed blocks.
*
* @param string $url The URL.
* @return Block
*/
protected function instagram_embed( string $url ): Block {
$atts = [
'url' => $url,
'type' => 'rich',
'providerNameSlug' => 'instagram',
'responsive' => true,
];

return new Block(
block_name: 'embed',
attributes: $atts,
content: sprintf(
'<figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram"><div class="wp-block-embed__wrapper">
%s
</div></figure>',
$url
),
);
}

/**
* Create Instagram embed blocks.
*
* @param string $url The URL.
* @return Blockx
*/
protected function facebook_embed( string $url ): Block {
$atts = [
'url' => $url,
'type' => 'rich',
'providerNameSlug' => 'embed-handler',
'responsive' => true,
'previewable' => false,
];

return new Block(
block_name: 'embed',
attributes: $atts,
content: sprintf(
'<figure class="wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler"><div class="wp-block-embed__wrapper">
%s
</div></figure>',
$url
),
);
}

/**
* Create separator blocks.
*
Expand Down
52 changes: 52 additions & 0 deletions tests/feature/test-block-converter.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,58 @@ public function test_convert_with_filter_override_entire_content() {
$this->assertSame( 'Override', $block );
}

public function test_youtube_url_to_embed() {
$this->fake_request( 'https://www.youtube.com/oembed?maxwidth=500&maxheight=750&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdQw4w9WgXcQ&dnt=1&format=json' )
->with_response_code( 200 )
->with_body( '{"title":"Rick Astley - Never Gonna Give You Up (Official Music Video)","author_name":"Rick Astley","author_url":"https://www.youtube.com/@RickAstleyYT","type":"video","height":281,"width":500,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg","html":"\u003ciframe width=\u0022500\u0022 height=\u0022281\u0022 src=\u0022https://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed\u0022 frameborder=\u00220\u0022 allow=\u0022accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\u0022 allowfullscreen title=\u0022Rick Astley - Never Gonna Give You Up (Official Music Video)\u0022\u003e\u003c/iframe\u003e"}' );

$converter = new Block_Converter( '<p>https://www.youtube.com/watch?v=dQw4w9WgXcQ</p>' );
$block = $converter->convert();

$this->assertNotEmpty( $block );
$this->assertSame(
'<!-- wp:embed {"url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} --><figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">https://www.youtube.com/watch?v=dQw4w9WgXcQ</div></figure><!-- /wp:embed -->',
$block,
);
}

public function test_x_url_to_embed() {
$this->fake_request( 'https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2Falleyco%2Fstatus%2F1679189879086018562' )
->with_response_code( 200 )
->with_body( '{"url":"https:\/\/twitter.com\/alleyco\/status\/1679189879086018562","author_name":"Alley","author_url":"https:\/\/twitter.com\/alleyco","html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EWe’re a full-service digital agency with the foresight, perspective, and grit to power your brightest ideas and build solutions for your most evasive problems. Learn more about our services here:\u003Ca href=\"https:\/\/t.co\/8zZ5zP1Oyc\"\u003Ehttps:\/\/t.co\/8zZ5zP1Oyc\u003C\/a\u003E\u003C\/p\u003E&mdash; Alley (@alleyco) \u003Ca href=\"https:\/\/twitter.com\/alleyco\/status\/1679189879086018562?ref_src=twsrc%5Etfw\"\u003EJuly 12, 2023\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E\n\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}' );

$converter = new Block_Converter( '<p>https://twitter.com/alleyco/status/1679189879086018562</p>' );
$block = $converter->convert();

$this->assertNotEmpty( $block );
$this->assertSame(
'<!-- wp:embed {"url":"https://twitter.com/alleyco/status/1679189879086018562","type":"rich","providerNameSlug":"twitter","responsive":true} --><figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">https://twitter.com/alleyco/status/1679189879086018562</div></figure><!-- /wp:embed -->',
$block,
);
}

public function test_instagram_url_to_embed() {
$converter = new Block_Converter( '<p>https://www.instagram.com/p/CSpmSvAphdf/</p>' );
$block = $converter->convert();

$this->assertNotEmpty( $block );
$this->assertSame(
'<!-- wp:embed {"url":"https://www.instagram.com/p/CSpmSvAphdf/","type":"rich","providerNameSlug":"instagram","responsive":true} --><figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram"><div class="wp-block-embed__wrapper">https://www.instagram.com/p/CSpmSvAphdf/</div></figure><!-- /wp:embed -->',
$block,
);
}

public function test_facebook_url_to_embed() {
$converter = new Block_Converter( '<p>https://www.facebook.com/sesametheopossum/posts/1329405240877426</p>' );
$block = $converter->convert();

$this->assertNotEmpty( $block );
$this->assertSame(
'<!-- wp:embed {"url":"https://www.facebook.com/sesametheopossum/posts/1329405240877426","type":"rich","providerNameSlug":"embed-handler","responsive":true,"previewable":false} --><figure class="wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler"><div class="wp-block-embed__wrapper">https://www.facebook.com/sesametheopossum/posts/1329405240877426</div></figure><!-- /wp:embed -->',
$block,
);
}

public function test_macroable() {
Block_Converter::macro(
'special-tag',
Expand Down

0 comments on commit d8b1fdd

Please sign in to comment.