Merge pull request #1834 from Codeinwp/fix/form-saving-fse

Allow saving in FSE for Form Options

Author: HardeepAsrani

src/blocks/blocks/form/edit.js

@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 
-import { get, isEqual } from 'lodash';
+import { debounce, get, isEqual } from 'lodash';
 
 import hash from 'object-hash';
 
@@ -53,7 +53,6 @@ import Inspector from './inspector.js';
 import Placeholder from './placeholder.js';
 import { useResponsiveAttributes } from '../../helpers/utility-hooks';
 import { renderBoxOrNumWithUnit, _cssBlock, _px, findInnerBlocks } from '../../helpers/helper-functions';
-import { Notice } from '@wordpress/components';
 
 const { attributes: defaultAttributes } = metadata;
 
@@ -107,7 +106,7 @@ const Edit = ({
 	 * @param {import('../../common').SyncAttrs<import('./type').FormAttrs>} field
 	 * @returns
 	 */
-	const getSyncValue = field =>{
+	const getSyncValue = field => {
 		if ( attributes?.isSynced?.includes( field ) ) {
 			return getDefaultValueByField({ name, field, defaultAttributes, attributes });
 		}
@@ -143,17 +142,24 @@ const Edit = ({
 		moveBlockToPosition
 	} = useDispatch( 'core/block-editor' );
 
-	const {
-		unlockPostSaving
-	} = useDispatch( 'core/editor' );
-
 	const setFormOption = option => {
 		setFormOptions( options => ({ ...options, ...option }) );
 	};
 
+	/**
+	 * This mark the block as dirty which allow us to use the save button to trigger the update of the form options tied to WP Options.
+	 *
+	 * @type {DebouncedFunc<(function(): void)|*>}
+	 */
+	const enableSaveBtn = debounce( () => {
+		const dummyBlock = createBlock( 'core/spacer', { height: '0px' });
+		insertBlock( dummyBlock, 0, clientId, false );
+		removeBlock( dummyBlock.clientId, false );
+	}, 3000 );
+
 	const setFormOptionAndSaveUnlock = option => {
 		setFormOption( option );
-		unlockPostSaving?.();
+		enableSaveBtn();
 	};
 
 	const [ savedFormOptions, setSavedFormOptions ] = useState( true );
@@ -204,9 +210,10 @@ const Edit = ({
 		const isPublishingPost = select( 'core/editor' )?.isPublishingPost();
 		const isAutosaving = select( 'core/editor' )?.isAutosavingPost();
 		const widgetSaving = select( 'core/edit-widgets' )?.isSavingWidgetAreas();
+		const nonPostEntitySaving = select( 'core/editor' )?.isSavingNonPostEntityChanges();
 
 		return {
-			canSaveData: ( ! isAutosaving && ( isSavingPost || isPublishingPost ) ) || widgetSaving
+			canSaveData: ( ! isAutosaving && ( isSavingPost || isPublishingPost || nonPostEntitySaving ) ) || widgetSaving
 		};
 	});
 

src/blocks/helpers/block-utility.js

@@ -537,3 +537,5 @@ export function useTabSwitch( key, defaultValue ) {
 
 	return [ tab, setTab ];
 }
+
+

src/blocks/test/e2e/blocks/form.spec.js

@@ -295,4 +295,49 @@ test.describe( 'Form Block', () => {
 
 		await expect( page.getByLabel( 'Dismiss this notice' ) ).toBeVisible();
 	});
+
+	test( 'enable post save button on options changed', async({ page, editor }) => {
+		const ccValue = '[email protected]';
+
+		/*
+		 * Create a form block and insert the CC value using the Inspector Controls.
+		 */
+
+		await editor.insertBlock({ name: 'themeisle-blocks/form' });
+
+		let formBlock = ( await editor.getBlocks() ).find( ( block ) => 'themeisle-blocks/form' === block.name );
+
+		expect( formBlock ).toBeTruthy();
+
+		const { clientId } = formBlock;
+
+		await page.click( `#block-${clientId} > div > fieldset > ul > li:nth-child(1) > button` );
+
+		// Open the options panel
+		await page.getByRole( 'button', { name: 'Form Options options' }).click();
+
+		// activate the option
+		await page.getByRole( 'menuitemcheckbox', { name: 'Show CC' }).click();
+
+		// Close the options panel
+		await page.getByRole( 'button', { name: 'Form Options options' }).click();
+
+		const cc = page.getByPlaceholder( 'Send copies to' );
+
+		await cc.fill( ccValue );
+
+		await editor.publishPost();
+
+		await page.getByLabel( 'Close panel' ).click();
+
+		await page.getByPlaceholder( 'Default is to admin site' ).fill( ccValue );
+
+		const saveBtn = page.getByRole( 'button', { name: 'Update', disabled: false });
+
+		await saveBtn.waitFor({
+			timeout: 4000
+		});
+
+		expect( await saveBtn.isEnabled() ).toBeTruthy();
+	});
 });