Improve multistep form step initialization and navigation

Author: lezama

projects/packages/forms/changelog/update-multistep-form-default-view

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: default multistep forms to single step view in the editor and prevent viewport jumping during step navigation.

projects/packages/forms/src/blocks/contact-form/edit.tsx

@@ -247,15 +247,15 @@ function JetpackContactFormEdit( {
 
 	const { isSingleStep, isFirstStep, isLastStep, currentStepClientId } = useSelect(
 		select => {
-			const { getCurrentStepInfo, isSingleStepMode } = select( singleStepStore );
+			const { getCurrentStepInfo, isSingleStepMode, getActiveStepId } = select( singleStepStore );
 
 			const info = getCurrentStepInfo( clientId, steps );
 
 			return {
 				isSingleStep: isSingleStepMode( clientId ),
 				isFirstStep: info ? info.isFirstStep : false,
 				isLastStep: info ? info.isLastStep : false,
-				currentStepClientId: info ? info.clientId : null,
+				currentStepClientId: getActiveStepId( clientId ),
 			};
 		},
 		[ clientId, steps ]
@@ -735,6 +735,17 @@ function JetpackContactFormEdit( {
 
 	const { setActiveStep } = useDispatch( singleStepStore );
 
+	useEffect( () => {
+		if (
+			variationName === 'multistep' &&
+			isSingleStep &&
+			steps.length > 0 &&
+			! currentStepClientId
+		) {
+			setActiveStep( clientId, steps[ 0 ].clientId );
+		}
+	}, [ variationName, isSingleStep, steps, currentStepClientId, clientId, setActiveStep ] );
+
 	// Find the selected block and its parent step block
 	const selectedBlock = useFindBlockRecursively(
 		selectedBlockClientId,
@@ -750,8 +761,12 @@ function JetpackContactFormEdit( {
 			return;
 		}
 
-		// If a block is selected, make sure it's in the current step
-		if ( selectedBlockClientId && stepBlock && stepBlock.clientId !== currentStepClientId ) {
+		if (
+			selectedBlockClientId &&
+			stepBlock &&
+			stepBlock.clientId !== currentStepClientId &&
+			currentStepClientId
+		) {
 			setActiveStep( clientId, stepBlock.clientId );
 		}
 	}, [

projects/packages/forms/src/blocks/shared/components/form-step-controls/index.js

@@ -1,4 +1,4 @@
-import { BlockControls, store as blockEditorStore } from '@wordpress/block-editor';
+import { BlockControls } from '@wordpress/block-editor';
 import {
 	ToolbarGroup,
 	ToolbarButton,
@@ -29,13 +29,10 @@ export default function StepControls( { formClientId } ) {
 	const { setActiveStep, enableSingleStepMode, disableSingleStepMode } =
 		useDispatch( singleStepStore );
 
-	// Access the block editor dispatcher to programmatically select blocks when needed.
-	const { selectBlock } = useDispatch( blockEditorStore );
-
 	// Use our custom navigation hook
 	const { navigateToNextStep, navigateToPreviousStep, currentStepInfo, steps } = useStepNavigation(
 		formClientId,
-		true // always update the selected block when navigating
+		false
 	);
 
 	const { selectedStepId, isSingleStep } = useSelect(
@@ -114,7 +111,6 @@ export default function StepControls( { formClientId } ) {
 									onClick={ () => {
 										setActiveStep( formClientId, step.clientId );
 										enableSingleStepMode( formClientId );
-										selectBlock( step.clientId );
 										onClose();
 									} }
 									isSelected={ selectedStepId === step.clientId && isSingleStep }

projects/packages/forms/src/store/form-step-preview.js

@@ -59,7 +59,7 @@ const selectors = {
 	 * @return {boolean} Whether the form is in single step mode.
 	 */
 	isSingleStepMode( state, formClientId ) {
-		return !! state.singleStepMode[ formClientId ];
+		return state.singleStepMode[ formClientId ] !== false;
 	},
 
 	/**