Forms: Better handle custom submission message formatting (#45487)

* revert margin for custom message paragraphs

* changelog

* respect multiple empty lines

* fix css where clause

* prefix css class and add pretty text wrap

Author: dhasilva

projects/packages/forms/changelog/fix-forms-success-message-formatting

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: Better handle custom submission message formatting

projects/packages/forms/src/contact-form/class-contact-form.php

@@ -991,7 +991,8 @@ private static function render_ajax_success_wrapper( $form, $submission_success
 			"</h4>\n\n";
 
 		if ( 'message' === $form->get_attribute( 'customThankyou' ) ) {
-			$raw_message = wpautop( $form->get_attribute( 'customThankyouMessage' ) );
+			$raw_message = $form->get_attribute( 'customThankyouMessage' );
+
 			// Add more allowed HTML elements for file download links
 			$allowed_html = array(
 				'br'         => array(),
@@ -1007,7 +1008,10 @@ private static function render_ajax_success_wrapper( $form, $submission_success
 				),
 			);
 
-			$html .= wp_kses( $raw_message, $allowed_html );
+			$message = wp_kses( $raw_message, $allowed_html );
+			$message = '<div class="jetpack_forms_contact-form-custom-success-message">' . $message . '</div>';
+
+			$html .= $message;
 		} elseif ( ! $disable_summary ) {
 			$html .= '<template data-wp-each--submission="context.formattedSubmissionData">
 				<div>
@@ -1057,7 +1061,8 @@ public static function success_message( $feedback_id, $form ) {
 		$disable_summary = 'noSummary' === $form->get_attribute( 'customThankyou' );
 
 		if ( 'message' === $form->get_attribute( 'customThankyou' ) ) {
-			$raw_message = wpautop( $form->get_attribute( 'customThankyouMessage' ) );
+			$raw_message = $form->get_attribute( 'customThankyouMessage' );
+
 			// Add more allowed HTML elements for file download links
 			$allowed_html = array(
 				'br'         => array(),
@@ -1072,7 +1077,9 @@ public static function success_message( $feedback_id, $form ) {
 					'style' => array(),
 				),
 			);
-			$message      = wp_kses( $raw_message, $allowed_html );
+
+			$message = wp_kses( $raw_message, $allowed_html );
+			$message = '<div class="jetpack_forms_contact-form-custom-success-message">' . $message . '</div>';
 		} elseif ( ! $disable_summary ) {
 			$compiled_form = self::get_compiled_form( $feedback_id );
 			$message       = '<p>' . implode( '</p><p>', $compiled_form ) . '</p>';

projects/packages/forms/src/contact-form/css/grunion.scss

@@ -225,6 +225,15 @@ that needs to mimic the input element styles */
 	word-wrap: break-word;
 }
 
+.contact-form-submission :where(.jetpack_forms_contact-form-custom-success-message) p {
+	margin: revert;
+}
+
+.contact-form-submission :where(.jetpack_forms_contact-form-custom-success-message) {
+	white-space: pre-wrap;
+	text-wrap: pretty;
+}
+
 .contact-form-submission h4 {
 	margin-top: 32px;
 	margin-bottom: 32px;