From 01bd02f49e120b0d92545989d0906b4086fad43d Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Fri, 7 Aug 2020 16:47:08 +0200 Subject: [PATCH 1/3] Block Supports: Add missing UTF-8 conversion --- lib/block-supports/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/index.php b/lib/block-supports/index.php index ec8708aa8e9f1..02edce5c00b5b 100644 --- a/lib/block-supports/index.php +++ b/lib/block-supports/index.php @@ -51,7 +51,7 @@ function gutenberg_apply_block_supports( $block_content, $block ) { // Suppress warnings from this method from polluting the front-end. // @codingStandardsIgnoreStart - if ( ! @$dom->loadHTML( $block_content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD | LIBXML_COMPACT ) ) { + if ( ! @$dom->loadHTML( mb_convert_encoding( $block_content, 'HTML-ENTITIES', 'UTF-8' ), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD | LIBXML_COMPACT ) ) { // @codingStandardsIgnoreEnd return $block_content; } From 5ea13cd355716a176bc6c417fae55836b0fa0d5b Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 10 Aug 2020 16:39:48 +0200 Subject: [PATCH 2/3] Re-encode back to UTF-8 --- lib/block-supports/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/index.php b/lib/block-supports/index.php index 02edce5c00b5b..56ef7eb736803 100644 --- a/lib/block-supports/index.php +++ b/lib/block-supports/index.php @@ -84,6 +84,6 @@ function gutenberg_apply_block_supports( $block_content, $block ) { $block_root->setAttribute( 'style', $new_styles ); } - return $dom->saveHtml(); + return mb_convert_encoding( $dom->saveHtml(), 'UTF-8', 'HTML-ENTITIES' ); } add_filter( 'render_block', 'gutenberg_apply_block_supports', 10, 2 ); From 051d893b2db74e256e89252587e719393ba544e3 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 10 Aug 2020 16:40:26 +0200 Subject: [PATCH 3/3] Add unit test --- phpunit/class-block-supported-styles-test.php | 78 ++++++++++++++----- 1 file changed, 58 insertions(+), 20 deletions(-) diff --git a/phpunit/class-block-supported-styles-test.php b/phpunit/class-block-supported-styles-test.php index c4596be98e9ca..f0589e3d15100 100644 --- a/phpunit/class-block-supported-styles-test.php +++ b/phpunit/class-block-supported-styles-test.php @@ -65,6 +65,19 @@ private function get_attribute_from_block( $attribute, $block ) { return substr( $split_arr, 0, $end_index ); } + /** + * Retrieves block content from the rendered block string + * (i.e. what's wrapped by the block wrapper `
`). + * + * @param string $block String of rendered block to check. + */ + private function get_content_from_block( $block ) { + $start_index = strpos( $block, '>' ) + 1; + $split_arr = substr( $block, $start_index ); + $end_index = strpos( $split_arr, '<' ); + return substr( $split_arr, 0, $end_index ); + } + /** * Runs assertions that the rendered output has expected class/style attrs. * @@ -73,20 +86,45 @@ private function get_attribute_from_block( $attribute, $block ) { * @param string $expected_styles Expected output styles attr string. */ private function assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ) { - $styled_block = apply_filters( 'render_block', $this->block_content, $block ); + $styled_block = apply_filters( 'render_block', self::BLOCK_MARKUP, $block ); + $class_list = $this->get_attribute_from_block( 'class', $styled_block ); + $style_list = $this->get_attribute_from_block( 'style', $styled_block ); + + $this->assertEquals( $expected_classes, $class_list ); + $this->assertEquals( $expected_styles, $style_list ); + } + + /** + * Runs assertions that the rendered output has expected content and class/style attrs. + * + * @param array $block Block to render. + * @param string $expected_classes Expected output class attr string. + * @param string $expected_styles Expected output styles attr string. + */ + private function assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ) { + $styled_block = apply_filters( 'render_block', self::BLOCK_MARKUP, $block ); + $content = $this->get_content_from_block( $styled_block ); $class_list = $this->get_attribute_from_block( 'class', $styled_block ); $style_list = $this->get_attribute_from_block( 'style', $styled_block ); + $this->assertEquals( self::BLOCK_CONTENT, $content ); $this->assertEquals( $expected_classes, $class_list ); $this->assertEquals( $expected_styles, $style_list ); } /** - * Example block content to test with. + * Block content to test with (i.e. what's wrapped by the block wrapper `
`). + * + * @var string + */ + const BLOCK_CONTENT = 'Some non-Latin chärs to make sure DOM öperations don\'t mess them up: こんにちは'; + + /** + * Example block markup string to test with. * * @var string */ - private $block_content = '
So say we all.
'; + const BLOCK_MARKUP = '
' . self::BLOCK_CONTENT . '
'; /** * Tests color support for named color support for named colors. @@ -117,7 +155,7 @@ function test_named_color_support() { $expected_classes = 'wp-block-example foo-bar-class has-text-color has-red-color has-background has-black-background-color'; $expected_styles = 'test:style; '; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -154,7 +192,7 @@ function test_custom_color_support() { $expected_styles = 'test:style; color: #000; background-color: #fff;'; $expected_classes = 'wp-block-example foo-bar-class has-text-color has-background'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -185,7 +223,7 @@ function test_named_link_color_support() { $expected_classes = 'wp-block-example foo-bar-class has-link-color'; $expected_styles = 'test:style; --wp--style--color--link:var(--wp--preset--color--red);'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -216,7 +254,7 @@ function test_custom_link_color_support() { $expected_classes = 'wp-block-example foo-bar-class has-link-color'; $expected_styles = 'test:style; --wp--style--color--link: #fff;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -247,7 +285,7 @@ function test_named_gradient_support() { $expected_classes = 'wp-block-example foo-bar-class has-background has-red-gradient-background'; $expected_styles = 'test:style; '; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -278,7 +316,7 @@ function test_custom_gradient_support() { $expected_classes = 'wp-block-example foo-bar-class has-background'; $expected_styles = 'test:style; background: some-gradient-style;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -314,7 +352,7 @@ function test_color_unsupported() { $expected_classes = 'wp-block-example foo-bar-class'; $expected_styles = 'test:style;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -343,7 +381,7 @@ function test_named_font_size() { $expected_classes = 'wp-block-example foo-bar-class has-large-font-size'; $expected_styles = 'test:style; '; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -372,7 +410,7 @@ function test_custom_font_size() { $expected_classes = 'wp-block-example foo-bar-class '; $expected_styles = 'test:style; font-size: 10px;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -400,7 +438,7 @@ function test_font_size_unsupported() { $expected_classes = 'wp-block-example foo-bar-class'; $expected_styles = 'test:style;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -429,7 +467,7 @@ function test_line_height() { $expected_classes = 'wp-block-example foo-bar-class '; $expected_styles = 'test:style; line-height: 10;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -456,7 +494,7 @@ function test_line_height_unsupported() { $expected_classes = 'wp-block-example foo-bar-class'; $expected_styles = 'test:style;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -485,7 +523,7 @@ function test_block_alignment() { $expected_classes = 'wp-block-example foo-bar-class alignwide'; $expected_styles = 'test:style; '; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -512,7 +550,7 @@ function test_block_alignment_unsupported() { $expected_classes = 'wp-block-example foo-bar-class'; $expected_styles = 'test:style;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -559,7 +597,7 @@ function test_all_supported() { $expected_classes = 'wp-block-example foo-bar-class has-text-color has-background alignwide'; $expected_styles = 'test:style; color: #000; background-color: #fff; background: some-gradient; font-size: 10px; line-height: 20;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -601,7 +639,7 @@ function test_one_supported() { $expected_classes = 'wp-block-example foo-bar-class '; $expected_styles = 'test:style; font-size: 10px;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } /** @@ -647,6 +685,6 @@ function test_render_callback_required() { $expected_classes = 'wp-block-example foo-bar-class'; $expected_styles = 'test:style;'; - $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + $this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } }