diff --git a/projects/packages/forms/changelog/update-multistep-form-default-view b/projects/packages/forms/changelog/update-multistep-form-default-view new file mode 100644 index 0000000000000..7edcee7e16de7 --- /dev/null +++ b/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. diff --git a/projects/packages/forms/src/blocks/contact-form/edit.tsx b/projects/packages/forms/src/blocks/contact-form/edit.tsx index b417e1798cb36..7ae891c358dc2 100644 --- a/projects/packages/forms/src/blocks/contact-form/edit.tsx +++ b/projects/packages/forms/src/blocks/contact-form/edit.tsx @@ -247,7 +247,7 @@ 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 ); @@ -255,7 +255,7 @@ function JetpackContactFormEdit( { 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 ); } }, [ diff --git a/projects/packages/forms/src/blocks/shared/components/form-step-controls/index.js b/projects/packages/forms/src/blocks/shared/components/form-step-controls/index.js index 08ba3236cb2b0..0e9b185e6b063 100644 --- a/projects/packages/forms/src/blocks/shared/components/form-step-controls/index.js +++ b/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 } diff --git a/projects/packages/forms/src/store/form-step-preview.js b/projects/packages/forms/src/store/form-step-preview.js index c574b260cc286..1907facf55ef1 100644 --- a/projects/packages/forms/src/store/form-step-preview.js +++ b/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; }, /**