Add warning notice

Automattic · Dec 19, 2023 · de4424c · de4424c
1 parent 5435136
commit de4424c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/projects/packages/forms/src/blocks/contact-form/edit.js b/projects/packages/forms/src/blocks/contact-form/edit.js
@@ -20,6 +20,7 @@ import {
 	SelectControl,
 	TextareaControl,
 	TextControl,
+	Notice,
 } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -160,7 +161,7 @@ export const JetpackContactFormEdit = forwardRef(
 			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] );
 
-		useFormAccessibleName( postTitle, formTitle, clientId, setAttributes );
+		useFormAccessibleName( formTitle, clientId, setAttributes );
 
 		useEffect( () => {
 			if ( to === undefined && postAuthorEmail ) {
@@ -308,6 +309,16 @@ export const JetpackContactFormEdit = forwardRef(
 		return (
 			<>
 				<InspectorControls>
+					{ ! attributes.formTitle && (
+						<PanelBody>
+							<Notice status="warning" isDismissible={ false }>
+								{ __(
+									'Add a heading inside the form or before it to help everybody identify it.',
+									'jetpack-forms'
+								) }
+							</Notice>{ ' ' }
+						</PanelBody>
+					) }
 					<PanelBody title={ __( 'Manage Responses', 'jetpack-forms' ) }>
 						<JetpackManageResponsesSettings setAttributes={ setAttributes } />
 					</PanelBody>

diff --git a/projects/packages/forms/src/blocks/contact-form/hooks/use-form-accessible-name.js b/projects/packages/forms/src/blocks/contact-form/hooks/use-form-accessible-name.js
@@ -20,22 +20,21 @@ const getNameFromBlockPreviousHeadings = ( block, pageBlocks ) => {
  * content changes. The heuristic is as follows:
  * 1. Look for a heading inside the form
  * 2. Look for a heading in the previous siblings
- * 3. Use the post title
+ * 3. Use the post title (in Contact_Form::parse, server side)
  *
- * @param {string} postTitle - The post title
  * @param {string} formTitle - The form title
  * @param {string} clientId - The block unique identifier
  * @param {Function} setAttributes - Function to call to update one or more attributes
  */
-export default function useFormAccessibleName( postTitle, formTitle, clientId, setAttributes ) {
+export default function useFormAccessibleName( formTitle, clientId, setAttributes ) {
 	const { pageBlocks } = useSelect( select => ( {
 		pageBlocks: select( 'core/block-editor' ).getBlocks(),
 	} ) );
 
 	useEffect( () => {
 		const currentBlock = pageBlocks.find( block => block.clientId === clientId );
 
-		let name;
+		let name = '';
 
 		if ( currentBlock ) {
 			// #1
@@ -47,11 +46,8 @@ export default function useFormAccessibleName( postTitle, formTitle, clientId, s
 			}
 		}
 
-		// #3
-		name = name || postTitle;
-
 		if ( formTitle !== name ) {
 			setAttributes( { formTitle: name } );
 		}
-	}, [ postTitle, clientId, formTitle, setAttributes, pageBlocks ] );
+	}, [ clientId, formTitle, setAttributes, pageBlocks ] );
 }
diff --git a/projects/packages/forms/src/contact-form/class-contact-form.php b/projects/packages/forms/src/contact-form/class-contact-form.php
@@ -240,6 +240,8 @@ public static function style_on() {
 	 * @return string HTML for the concat form.
 	 */
 	public static function parse( $attributes, $content ) {
+		global $post;
+
 		if ( Settings::is_syncing() ) {
 			return '';
 		}
@@ -352,7 +354,7 @@ public static function parse( $attributes, $content ) {
 			$url                     = apply_filters( 'grunion_contact_form_form_action', "{$url}#contact-form-{$id}", $GLOBALS['post'], $id );
 			$has_submit_button_block = str_contains( $content, 'wp-block-jetpack-button' );
 			$form_classes            = 'contact-form commentsblock';
-			$form_accessible_name    = $attributes['formTitle'];
+			$form_accessible_name    = $attributes['formTitle'] ? $attributes['formTitle'] : $post->post_title;
 			$form_aria_label         = isset( $form_accessible_name ) && ! empty( $form_accessible_name ) ? 'aria-label="' . esc_attr( $form_accessible_name ) . '"' : '';
 
 			if ( $has_submit_button_block ) {