From 0ca65a86de99513a831c1be801d286898974aa20 Mon Sep 17 00:00:00 2001 From: Copons Date: Tue, 28 Apr 2020 18:15:43 +0100 Subject: [PATCH 1/3] Prevent line breaks and HTML in Button text --- extensions/blocks/button/button.php | 2 +- extensions/blocks/button/edit.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/extensions/blocks/button/button.php b/extensions/blocks/button/button.php index 5be960368553..a45ef57f0158 100644 --- a/extensions/blocks/button/button.php +++ b/extensions/blocks/button/button.php @@ -43,7 +43,7 @@ function render_block( $attributes, $content ) { } $element = get_attribute( $attributes, 'element' ); - $text = get_attribute( $attributes, 'text' ); + $text = wp_strip_all_tags( get_attribute( $attributes, 'text' ), true ); $unique_id = get_attribute( $attributes, 'uniqueId' ); $classes = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attributes ); diff --git a/extensions/blocks/button/edit.js b/extensions/blocks/button/edit.js index aada28c01689..108fc7189b3f 100644 --- a/extensions/blocks/button/edit.js +++ b/extensions/blocks/button/edit.js @@ -74,6 +74,7 @@ function ButtonEdit( { setAttributes( { text: value } ) } placeholder={ placeholder || __( 'Add text…', 'jetpack' ) } style={ buttonStyles } From 8cbe5b4aadf6df714c8299b0ebefcafcc01b388e Mon Sep 17 00:00:00 2001 From: Copons Date: Wed, 29 Apr 2020 16:08:02 +0100 Subject: [PATCH 2/3] Force remove
from the button content --- extensions/blocks/button/edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/extensions/blocks/button/edit.js b/extensions/blocks/button/edit.js index 108fc7189b3f..3462fa8b8c12 100644 --- a/extensions/blocks/button/edit.js +++ b/extensions/blocks/button/edit.js @@ -75,7 +75,8 @@ function ButtonEdit( { allowedFormats={ [] } className={ buttonClasses } disableLineBreaks - onChange={ value => setAttributes( { text: value } ) } + // TODO: Remove `replace` once minimum Gutenberg version is 8.0 (to fully support `disableLineBreaks`) + onChange={ value => setAttributes( { text: value.replace( /
/gim, ' ' ) } ) } placeholder={ placeholder || __( 'Add text…', 'jetpack' ) } style={ buttonStyles } value={ text } From 2343a5480fda635b2c68272940595e804c91df3a Mon Sep 17 00:00:00 2001 From: Copons Date: Thu, 30 Apr 2020 12:12:06 +0100 Subject: [PATCH 3/3] Update SSR button creation --- extensions/blocks/button/button.php | 67 ++++++++--------------------- extensions/blocks/button/edit.js | 13 ++++-- 2 files changed, 26 insertions(+), 54 deletions(-) diff --git a/extensions/blocks/button/button.php b/extensions/blocks/button/button.php index a45ef57f0158..079091162cee 100644 --- a/extensions/blocks/button/button.php +++ b/extensions/blocks/button/button.php @@ -43,69 +43,36 @@ function render_block( $attributes, $content ) { } $element = get_attribute( $attributes, 'element' ); - $text = wp_strip_all_tags( get_attribute( $attributes, 'text' ), true ); + $text = get_attribute( $attributes, 'text' ); $unique_id = get_attribute( $attributes, 'uniqueId' ); + $url = get_attribute( $attributes, 'url' ); $classes = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attributes ); - $dom = new \DOMDocument(); - $button = $dom->createElement( $element, $content ); + $button_classes = get_button_classes( $attributes ); + $button_styles = get_button_styles( $attributes ); - if ( 'input' === $element ) { - $button = $dom->createElement( 'input' ); + $button_attributes = sprintf( ' class="%s" style="%s"', esc_attr( $button_classes ), esc_attr( $button_styles ) ); - $attribute = $dom->createAttribute( 'value' ); - $attribute->value = $text; - $button->appendChild( $attribute ); + if ( empty( $unique_id ) ) { + $button_attributes .= ' data-id-attr="placeholder"'; } else { - $button = $dom->createElement( $element, $text ); - } - - $attribute = $dom->createAttribute( 'class' ); - $attribute->value = get_button_classes( $attributes ); - $button->appendChild( $attribute ); - - $button_styles = get_button_styles( $attributes ); - if ( ! empty( $button_styles ) ) { - $attribute = $dom->createAttribute( 'style' ); - $attribute->value = $button_styles; - $button->appendChild( $attribute ); - } - - $attribute = $dom->createAttribute( 'data-id-attr' ); - $attribute->value = empty( $unique_id ) ? 'placeholder' : $unique_id; - $button->appendChild( $attribute ); - if ( $unique_id ) { - $attribute = $dom->createAttribute( 'id' ); - $attribute->value = $unique_id; - $button->appendChild( $attribute ); + $button_attributes .= sprintf( ' data-id-attr="%1$s" id="%1$s"', esc_attr( $unique_id ) ); } if ( 'a' === $element ) { - $attribute = $dom->createAttribute( 'href' ); - $attribute->value = get_attribute( $attributes, 'url' ); - $button->appendChild( $attribute ); - - $attribute = $dom->createAttribute( 'target' ); - $attribute->value = '_blank'; - $button->appendChild( $attribute ); - - $attribute = $dom->createAttribute( 'role' ); - $attribute->value = 'button'; - $button->appendChild( $attribute ); - - $attribute = $dom->createAttribute( 'rel' ); - $attribute->value = 'noopener noreferrer'; - $button->appendChild( $attribute ); - } elseif ( 'button' === $element || 'input' === $element ) { - $attribute = $dom->createAttribute( 'type' ); - $attribute->value = 'submit'; - $button->appendChild( $attribute ); + $button_attributes .= sprintf( ' href="%s" target="_blank" role="button" rel="noopener noreferrer"', esc_url( $url ) ); + } elseif ( 'button' === $element ) { + $button_attributes .= ' type="submit"'; + } elseif ( 'input' === $element ) { + $button_attributes .= sprintf( ' type="submit" value="%s"', wp_strip_all_tags( $text, true ) ); } - $dom->appendChild( $button ); + $button = 'input' === $element + ? '<' . $element . $button_attributes . ' />' + : '<' . $element . $button_attributes . '>' . $text . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - return '
' . $dom->saveHTML() . '
'; + return '
' . $button . '
'; } /** diff --git a/extensions/blocks/button/edit.js b/extensions/blocks/button/edit.js index 3462fa8b8c12..2ef1e33ccba2 100644 --- a/extensions/blocks/button/edit.js +++ b/extensions/blocks/button/edit.js @@ -35,7 +35,13 @@ function ButtonEdit( { setTextColor, textColor, } ) { - const { borderRadius, placeholder, text } = attributes; + const { borderRadius, element, placeholder, text } = attributes; + + const onChange = value => { + // TODO: Remove `replace` once minimum Gutenberg version is 8.0 (to fully support `disableLineBreaks`) + const newValue = 'input' === element ? value.replace( /
/gim, ' ' ) : value; + setAttributes( { text: newValue } ); + }; /* eslint-disable react-hooks/rules-of-hooks */ const { @@ -74,9 +80,8 @@ function ButtonEdit( { setAttributes( { text: value.replace( /
/gim, ' ' ) } ) } + disableLineBreaks={ 'input' === element } + onChange={ onChange } placeholder={ placeholder || __( 'Add text…', 'jetpack' ) } style={ buttonStyles } value={ text }