Enhance: Added close on outside click flag & updated save post panel

packages/compose/src/hooks/use-dialog/index.ts

@@ -40,6 +40,12 @@ type DialogOptions = {
 	 */
 	constrainTabbing?: boolean;
 	onClose?: () => void;
+	/**
+	 * Whether to close on click outside.
+	 *
+	 * @default true
+	 */
+	closeOnOutsideClick?: boolean;
 	/**
 	 * Use the `onClose` prop instead.
 	 *
@@ -67,7 +73,10 @@ type useDialogReturn = [
  */
 function useDialog( options: DialogOptions ): useDialogReturn {
 	const currentOptions = useRef< DialogOptions | undefined >();
-	const { constrainTabbing = options.focusOnMount !== false } = options;
+	const {
+		constrainTabbing = options.focusOnMount !== false,
+		closeOnOutsideClick = true,
+	} = options;
 	useEffect( () => {
 		currentOptions.current = options;
 	}, Object.values( options ) );
@@ -79,7 +88,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 		// for the Popover component otherwise, the onClose should be enough.
 		if ( currentOptions.current?.__unstableOnClose ) {
 			currentOptions.current.__unstableOnClose( 'focus-outside', event );
-		} else if ( currentOptions.current?.onClose ) {
+		} else if ( currentOptions.current?.onClose && closeOnOutsideClick ) {
 			currentOptions.current.onClose();
 		}
 	} );

packages/edit-site/src/components/save-panel/index.js

@@ -80,12 +80,20 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
+const _EntitiesSavedStates = ( {
+	onClose,
+	renderDialog = undefined,
+	closeOnOutsideClick = true,
+} ) => {
 	if ( isPreviewingTheme() ) {
 		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
 	}
 	return (
-		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+		<EntitiesSavedStates
+			close={ onClose }
+			renderDialog={ renderDialog }
+			closeOnOutsideClick={ closeOnOutsideClick }
+		/>
 	);
 };
 
@@ -129,7 +137,10 @@ export default function SavePanel() {
 					'Save site, content, and template changes'
 				) }
 			>
-				<_EntitiesSavedStates onClose={ onClose } />
+				<_EntitiesSavedStates
+					onClose={ onClose }
+					closeOnOutsideClick={ false }
+				/>
 			</Modal>
 		) : null;
 	}

packages/editor/README.md

@@ -402,6 +402,7 @@ _Parameters_
 -   _props_ `Object`: The component props.
 -   _props.close_ `Function`: The function to close the dialog.
 -   _props.renderDialog_ `Function`: The function to render the dialog.
+-   _props.closeOnOutsideClick_ `boolean`: Whether to close if outside click is detected.
 
 _Returns_
 

packages/editor/src/components/entities-saved-states/index.js

@@ -29,21 +29,24 @@ function identity( values ) {
 /**
  * Renders the component for managing saved states of entities.
  *
- * @param {Object}   props              The component props.
- * @param {Function} props.close        The function to close the dialog.
- * @param {Function} props.renderDialog The function to render the dialog.
+ * @param {Object}   props                     The component props.
+ * @param {Function} props.close               The function to close the dialog.
+ * @param {Function} props.renderDialog        The function to render the dialog.
+ * @param {boolean}  props.closeOnOutsideClick Whether to close if outside click is detected.
  *
  * @return {JSX.Element} The rendered component.
  */
 export default function EntitiesSavedStates( {
 	close,
 	renderDialog = undefined,
+	closeOnOutsideClick = true,
 } ) {
 	const isDirtyProps = useIsDirty();
 	return (
 		<EntitiesSavedStatesExtensible
 			close={ close }
 			renderDialog={ renderDialog }
+			closeOnOutsideClick={ closeOnOutsideClick }
 			{ ...isDirtyProps }
 		/>
 	);
@@ -63,6 +66,7 @@ export default function EntitiesSavedStates( {
  * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
  * @param {Function} props.setUnselectedEntities Function to set unselected entities.
  * @param {Array}    props.unselectedEntities    Array of unselected entities.
+ * @param {boolean}  props.closeOnOutsideClick   Whether to close if outside click is detected.
  *
  * @return {JSX.Element} The rendered component.
  */
@@ -77,6 +81,7 @@ export function EntitiesSavedStatesExtensible( {
 	isDirty,
 	setUnselectedEntities,
 	unselectedEntities,
+	closeOnOutsideClick = true,
 } ) {
 	const saveButtonRef = useRef();
 	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
@@ -111,6 +116,7 @@ export function EntitiesSavedStatesExtensible( {
 
 	const [ saveDialogRef, saveDialogProps ] = useDialog( {
 		onClose: () => dismissPanel(),
+		closeOnOutsideClick,
 	} );
 	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
 	const dialogDescription = useInstanceId(