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

Server Styles - fix deduplication of style rules. #24486

Merged
merged 4 commits into from
Aug 13, 2020
Merged

Server Styles - fix deduplication of style rules. #24486

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d0874a
normalize styles for dedupe
Addison-Stavlo Aug 11, 2020
5e99bc8
update tests
Addison-Stavlo Aug 11, 2020
6bdc66f
Refactor style deduping; amend tests
mcsf Aug 12, 2020
d1ebff0
add comment back in
Addison-Stavlo Aug 12, 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
48 changes: 22 additions & 26 deletions lib/block-supports/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,40 +65,36 @@ function gutenberg_apply_block_supports( $block_content, $block ) {
return $block_content;
}

// Some inline styles may be added without ending ';', add this if necessary.
$current_styles = trim( $block_root->getAttribute( 'style' ), ' ' );
if ( strlen( $current_styles ) > 0 && substr( $current_styles, -1 ) !== ';' ) {
$current_styles = $current_styles . ';';
};

// Merge and dedupe new and existing classes and styles.
$classes_to_add = esc_attr( implode( ' ', array_key_exists( 'css_classes', $attributes ) ? $attributes['css_classes'] : array() ) );
$styles_to_add = esc_attr( implode( ' ', array_key_exists( 'inline_styles', $attributes ) ? $attributes['inline_styles'] : array() ) );
$new_classes = implode( ' ', array_unique( explode( ' ', ltrim( $block_root->getAttribute( 'class' ) . ' ' ) . $classes_to_add ) ) );
// Normalize styles for dedupe.
$all_styles = explode( ';', $current_styles . $styles_to_add );
$normalized_styles = array();
foreach ( $all_styles as $style ) {
if ( '' === $style ) {
continue;
}
// Split key and value of style.
$split_style = explode( ':', $style );
// Trim whitespace and recombine the style in a consistent form.
$style = trim( $split_style[0] ) . ': ' . trim( $split_style[1] ) . ';';
$normalized_styles[] = $style;
}
$new_styles = implode( ' ', array_unique( $normalized_styles ) );
$current_classes = explode( ' ', trim( $block_root->getAttribute( 'class' ) ) );
$classes_to_add = array_key_exists( 'css_classes', $attributes ) ? $attributes['css_classes'] : array();
$new_classes = array_unique( array_filter( array_merge( $current_classes, $classes_to_add ) ) );

$current_styles = preg_split( '/\s*;\s*/', trim( $block_root->getAttribute( 'style' ) ) );
$styles_to_add = array_key_exists( 'inline_styles', $attributes ) ? $attributes['inline_styles'] : array();
$new_styles = array_unique( array_map( 'gutenberg_normalize_css_rule', array_filter( array_merge( $current_styles, $styles_to_add ) ) ) );

// Apply new styles and classes.
if ( ! empty( $new_classes ) ) {
$block_root->setAttribute( 'class', $new_classes );
$block_root->setAttribute( 'class', esc_attr( implode( ' ', $new_classes ) ) );
Addison-Stavlo marked this conversation as resolved.
Show resolved Hide resolved
}

if ( ! empty( $new_styles ) ) {
$block_root->setAttribute( 'style', $new_styles );
$block_root->setAttribute( 'style', esc_attr( implode( '; ', $new_styles ) . ';' ) );
}

return mb_convert_encoding( $dom->saveHtml(), 'UTF-8', 'HTML-ENTITIES' );
}
add_filter( 'render_block', 'gutenberg_apply_block_supports', 10, 2 );

/**
* Normalizes spacing in a string representing a CSS rule
*
* @example
* 'color :red;' becomes 'color:red'
*
* @param string $css_rule_string CSS rule.
* @return string Normalized CSS rule.
*/
function gutenberg_normalize_css_rule( $css_rule_string ) {
return trim( implode( ': ', preg_split( '/\s*:\s*/', $css_rule_string, 2 ) ), ';' );
}
6 changes: 3 additions & 3 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 @@ -407,7 +407,7 @@ function test_custom_font_size() {
'innerHTML' => array(),
);

$expected_classes = 'wp-block-example foo-bar-class ';
$expected_classes = 'wp-block-example foo-bar-class';
$expected_styles = 'test: style; font-size: 10px;';

$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
Expand Down Expand Up @@ -464,7 +464,7 @@ function test_line_height() {
'innerHTML' => array(),
);

$expected_classes = 'wp-block-example foo-bar-class ';
$expected_classes = 'wp-block-example foo-bar-class';
$expected_styles = 'test: style; line-height: 10;';

$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
Expand Down Expand Up @@ -636,7 +636,7 @@ function test_one_supported() {
'innerHTML' => array(),
);

$expected_classes = 'wp-block-example foo-bar-class ';
$expected_classes = 'wp-block-example foo-bar-class';
$expected_styles = 'test: style; font-size: 10px;';

$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
Expand Down