diff --git a/CHANGELOG.md b/CHANGELOG.md index 2378772..38af142 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to `WP Block Converter` will be documented in this file. +## 1.3.2 + +- Preserve new lines in embed blocks. They are required for proper front end rendering. +- Fix aspect ratio calculation when height and width are percentages - which fixes TikTok embeds. + ## 1.3.1 - Fixes embeds of x.com urls (instead of twitter.com) diff --git a/src/class-block-converter.php b/src/class-block-converter.php index cac77da..07a42cc 100644 --- a/src/class-block-converter.php +++ b/src/class-block-converter.php @@ -67,6 +67,7 @@ public function convert(): string { } // Merge the block into the HTML collection. + $html[] = $this->minify_block( (string) $tag_block ); } @@ -274,7 +275,7 @@ protected function embed( string $url ): Block { $data = _wp_oembed_get_object()->get_data( $url, [] ); $aspect_ratio = ''; - if ( ! empty( $data->height ) && ! empty( $data->width ) ) { + if ( ! empty( $data->height ) && ! empty( $data->width ) && is_numeric( $data->height ) && is_numeric( $data->width ) ) { if ( 1.78 === round( $data->width / $data->height, 2 ) ) { $aspect_ratio = '16-9'; } @@ -446,8 +447,13 @@ public static function get_node_tag_from_html( $html, $tag = 'body' ) { * @return string */ protected function minify_block( $block ) { - if ( preg_match( '/(\s){2,}/s', $block ) === 1 ) { - return preg_replace( '/(\s){2,}/s', '', $block ); + if ( \str_contains( $block, 'wp-block-embed' ) ) { + $pattern = '/(\h){2,}/s'; + } else { + $pattern = '/(\s){2,}/s'; + } + if ( preg_match( $pattern, $block ) === 1 ) { + return preg_replace( $pattern, '', $block ); } return $block; diff --git a/tests/feature/test-block-converter.php b/tests/feature/test-block-converter.php index 71b08c7..a60d5db 100644 --- a/tests/feature/test-block-converter.php +++ b/tests/feature/test-block-converter.php @@ -18,103 +18,103 @@ * @group block */ class Test_Block_Block_Converter extends Test_Case { - public function test_convert_content_to_blocks() { - $html = '
Content to migrate
Content to migrate
Content to migrate
bar
' ); - $block = $converter->convert(); + public function test_convert_paragraphs_to_block() { + $converter = new Block_Converter( 'bar
' ); + $block = $converter->convert(); - $this->assertNotEmpty( $block ); - $this->assertSame( + $this->assertNotEmpty( $block ); + $this->assertSame( 'bar
', $block, - ); - } + ); + } - public function test_convert_with_empty_paragraphs_to_block() { - $converter = new Block_Converter( 'bar
' ); - $block = $converter->convert(); + public function test_convert_with_empty_paragraphs_to_block() { + $converter = new Block_Converter( 'bar
' ); + $block = $converter->convert(); - $this->assertNotEmpty( $block ); - $this->assertSame( - 'bar
', + $this->assertNotEmpty( $block ); + $this->assertSame( + 'bar
', $block, - ); - } + ); + } - public function test_convert_with_empty_paragraphs_of_arbitrary_length_to_block() { - $arbitraryNewLines = str_repeat( "\n\r", mt_rand( 1, 1000) ); - $arbitrarySpaces = str_repeat( " ", mt_rand( 1, 1000 ) ); + public function test_convert_with_empty_paragraphs_of_arbitrary_length_to_block() { + $arbitraryNewLines = str_repeat( "\n\r", mt_rand( 1, 1000) ); + $arbitrarySpaces = str_repeat( " ", mt_rand( 1, 1000 ) ); - $converter = new Block_Converter( 'bar
' . $arbitrarySpaces . $arbitraryNewLines . '
' ); - $block = $converter->convert(); + $converter = new Block_Converter( 'bar
' . $arbitrarySpaces . $arbitraryNewLines . '
' ); + $block = $converter->convert(); - $this->assertNotEmpty( $block ); - $this->assertSame( + $this->assertNotEmpty( $block ); + $this->assertSame( $block, 'bar
', - ); - } + ); + } public function test_convert_with_filter_override_single_tag() { $this->expectApplied( 'wp_block_converter_document_html' )->once(); @@ -159,87 +159,112 @@ 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"}' ); + 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( 'https://www.youtube.com/watch?v=dQw4w9WgXcQ
' ); - $block = $converter->convert(); + $converter = new Block_Converter( 'https://www.youtube.com/watch?v=dQw4w9WgXcQ
' ); + $block = $converter->convert(); - $this->assertNotEmpty( $block ); - $this->assertSame( - '', + $this->assertNotEmpty( $block ); + $this->assertSame( + '', $block, - ); - } - - public function test_twitter_url_to_embed() { - $this->fake_request( 'https://publish.twitter.com/oembed?maxwidth=500&maxheight=750&url=https%3A%2F%2Ftwitter.com%2Falleyco%2Fstatus%2F1679189879086018562&dnt=1&format=json' ) - ->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— 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( 'https://twitter.com/alleyco/status/1679189879086018562
' ); - $block = $converter->convert(); - - $this->assertNotEmpty( $block ); - $this->assertSame( - '', - $block, - ); - } - - public function test_x_url_to_embed() { - $this->fake_request( 'https://publish.x.com/oembed?url=https%3A%2F%2Fx.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— 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( 'https://x.com/alleyco/status/1679189879086018562
' ); - $block = $converter->convert(); - - $this->assertNotEmpty( $block ); - $this->assertSame( - '', - $block, - ); - } - - public function test_linked_x_url_to_embed() { - $this->fake_request( 'https://publish.x.com/oembed?url=https%3A%2F%2Fx.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— 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( 'https://x.com/alleyco/status/1679189879086018562
' ); - $block = $converter->convert(); - - $this->assertNotEmpty( $block ); - $this->assertSame( - '', - $block, - ); - } - - public function test_instagram_url_to_embed() { - $converter = new Block_Converter( 'https://www.instagram.com/p/CSpmSvAphdf/
' ); - $block = $converter->convert(); - - $this->assertNotEmpty( $block ); - $this->assertSame( - '', - $block, - ); - } - - public function test_facebook_url_to_embed() { - $converter = new Block_Converter( 'https://www.facebook.com/sesametheopossum/posts/1329405240877426
' ); - $block = $converter->convert(); - - $this->assertNotEmpty( $block ); - $this->assertSame( - '', - $block, - ); - } + ); + } + + public function test_twitter_url_to_embed() { + $this->fake_request( 'https://publish.twitter.com/oembed?maxwidth=500&maxheight=750&url=https%3A%2F%2Ftwitter.com%2Falleyco%2Fstatus%2F1679189879086018562&dnt=1&format=json' ) + ->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— 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( 'https://twitter.com/alleyco/status/1679189879086018562
' ); + $block = $converter->convert(); + + $this->assertNotEmpty( $block ); + $this->assertSame( + '', + $block, + ); + } + + public function test_x_url_to_embed() { + $this->fake_request( 'https://publish.x.com/oembed?url=https%3A%2F%2Fx.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— 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( 'https://x.com/alleyco/status/1679189879086018562
' ); + $block = $converter->convert(); + + $this->assertNotEmpty( $block ); + $this->assertSame( + '', + $block, + ); + } + + public function test_linked_x_url_to_embed() { + $this->fake_request( 'https://publish.x.com/oembed?url=https%3A%2F%2Fx.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— 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( 'https://x.com/alleyco/status/1679189879086018562
' ); + $block = $converter->convert(); + + $this->assertNotEmpty( $block ); + $this->assertSame( + '', + $block, + ); + } + + public function test_instagram_url_to_embed() { + $converter = new Block_Converter( 'https://www.instagram.com/p/CSpmSvAphdf/
' ); + $block = $converter->convert(); + + $this->assertNotEmpty( $block ); + $this->assertSame( + '', + $block, + ); + } + + public function test_facebook_url_to_embed() { + $converter = new Block_Converter( 'https://www.facebook.com/sesametheopossum/posts/1329405240877426
' ); + $block = $converter->convert(); + + $this->assertNotEmpty( $block ); + $this->assertSame( + '', + $block, + ); + } + + public function test_tiktok_url_to_embed() { + $converter = new Block_Converter( 'https://www.tiktok.com/@atribecalledval/video/7348705314746699054
' ); + $block = $converter->convert(); + + $this->assertNotEmpty( $block ); + $this->assertSame( + '', + $block, + ); + } public function test_macroable() { Block_Converter::macro(