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

Jump to bottom

Block Supports: Add missing UTF-8 conversion #24447

Merged
merged 3 commits into from
Aug 11, 2020
Merged

Block Supports: Add missing UTF-8 conversion #24447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01bd02f
Block Supports: Add missing UTF-8 conversion
ockham Aug 7, 2020
5ea13cd
Re-encode back to UTF-8
ockham Aug 10, 2020
051d893
Add unit test
ockham Aug 10, 2020
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
4 changes: 2 additions & 2 deletions lib/block-supports/index.php
View file
Open in desktop
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
Open in desktop
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 );
}
}