Skip to content

Commit

Permalink
Block Supports: Add missing UTF-8 conversion (#24447)
Browse files Browse the repository at this point in the history 
* Block Supports: Add missing UTF-8 conversion

* Re-encode back to UTF-8

* Add unit test
  • Loading branch information
@ockham
ockham committed Aug 11, 2020
1 parent 4923564 commit 8474a2e
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 22 deletions.
4 changes: 2 additions & 2 deletions lib/block-supports/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 );
78 changes: 58 additions & 20 deletions phpunit/class-block-supported-styles-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<div />`).
*
* @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.
*
Expand All @@ -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 `<div />`).
*
* @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 = '<div class="wp-block-example foo-bar-class" style="test:style;">So say we all.</div>';
const BLOCK_MARKUP = '<div class="wp-block-example foo-bar-class" style="test:style;">' . self::BLOCK_CONTENT . '</div>';

/**
* Tests color support for named color support for named colors.
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand All @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand All @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand Down Expand Up @@ -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 );
}
}

0 comments on commit 8474a2e

Please sign in to comment.