Button Block: Properly render inner HTML if context-appropriate (#15595)

Automattic · Apr 30, 2020 · edb9e77 · edb9e77
1 parent 39b0ff5
commit edb9e77
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 51 deletions.
diff --git a/extensions/blocks/button/button.php b/extensions/blocks/button/button.php
@@ -45,67 +45,34 @@ function render_block( $attributes, $content ) {
 	$element   = get_attribute( $attributes, 'element' );
 	$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 . '</' . $element . '>';
 
 	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-	return '<div class="' . esc_attr( $classes ) . '">' . $dom->saveHTML() . '</div>';
+	return '<div class="' . esc_attr( $classes ) . '">' . $button . '</div>';
 }
 
 /**

diff --git 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( /<br>/gim, ' ' ) : value;
+		setAttributes( { text: newValue } );
+	};
 
 	/* eslint-disable react-hooks/rules-of-hooks */
 	const {
@@ -74,7 +80,8 @@ function ButtonEdit( {
 			<RichText
 				allowedFormats={ [] }
 				className={ buttonClasses }
-				onChange={ value => setAttributes( { text: value } ) }
+				disableLineBreaks={ 'input' === element }
+				onChange={ onChange }
 				placeholder={ placeholder || __( 'Add text…', 'jetpack' ) }
 				style={ buttonStyles }
 				value={ text }