chore: updated wrapper name, exported it from entities-saved-states &…

… updated preview panel to use wrapper

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

@@ -11,6 +11,7 @@ import {
 	EntitiesSavedStates,
 	useEntitiesSavedStatesIsDirty,
 	privateApis,
+	EntitiesSavedStatesDialogWrapper,
 } from '@wordpress/editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -32,7 +33,10 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } =
 const { useLocation } = unlock( routerPrivateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
+
 	let activateSaveLabel;
 	if ( isDirtyProps.isDirty ) {
 		activateSaveLabel = __( 'Activate & Save' );
@@ -66,17 +70,34 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 		return values;
 	};
 
+	if ( canvas === 'view' ) {
+		return (
+			<EntitiesSavedStatesExtensible
+				{ ...{
+					...isDirtyProps,
+					additionalPrompt,
+					close: onClose,
+					onSave,
+					saveEnabled: true,
+					saveLabel: activateSaveLabel,
+				} }
+			/>
+		);
+	}
+
 	return (
-		<EntitiesSavedStatesExtensible
-			{ ...{
-				...isDirtyProps,
-				additionalPrompt,
-				close: onClose,
-				onSave,
-				saveEnabled: true,
-				saveLabel: activateSaveLabel,
-			} }
-		/>
+		<EntitiesSavedStatesDialogWrapper close={ onClose }>
+			<EntitiesSavedStatesExtensible
+				{ ...{
+					...isDirtyProps,
+					additionalPrompt,
+					close: onClose,
+					onSave,
+					saveEnabled: true,
+					saveLabel: activateSaveLabel,
+				} }
+			/>
+		</EntitiesSavedStatesDialogWrapper>
 	);
 };
 

packages/editor/README.md

@@ -406,6 +406,20 @@ _Returns_
 
 -   `JSX.Element`: The rendered component.
 
+### EntitiesSavedStatesDialogWrapper
+
+A wrapper component that renders a dialog for displaying entities.
+
+_Parameters_
+
+-   _props_ `Object`: The component's props.
+-   _props.children_ `React.ReactNode`: The content to be displayed inside the dialog.
+-   _props.close_ `Function`: A function to close the dialog.
+
+_Returns_
+
+-   `React.Element`: The rendered dialog element with children.
+
 ### ErrorBoundary
 
 ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.

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

@@ -9,6 +9,10 @@ import {
 	createInterpolateElement,
 } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import {
+	__experimentalUseDialog as useDialog,
+	useInstanceId,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -167,3 +171,37 @@ export function EntitiesSavedStatesExtensible( {
 		</div>
 	);
 }
+
+/**
+ * A wrapper component that renders a dialog for displaying entities.
+ *
+ * @param {Object}          props          The component's props.
+ * @param {React.ReactNode} props.children The content to be displayed inside the dialog.
+ * @param {Function}        props.close    A function to close the dialog.
+ *
+ * @return {React.Element} The rendered dialog element with children.
+ */
+export function EntitiesSavedStatesDialogWrapper( { children, close } ) {
+	const dismissPanel = useCallback( () => close(), [ close ] );
+	const [ saveDialogRef, saveDialogProps ] = useDialog( {
+		onClose: () => dismissPanel(),
+	} );
+
+	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
+	const dialogDescription = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'description'
+	);
+
+	return (
+		<div
+			ref={ saveDialogRef }
+			{ ...saveDialogProps }
+			role="dialog"
+			aria-labelledby={ dialogLabel }
+			aria-describedby={ dialogDescription }
+		>
+			{ children }
+		</div>
+	);
+}

packages/editor/src/components/index.js

@@ -17,7 +17,10 @@ export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as EditorNotices } from './editor-notices';
 export { default as EditorSnackbars } from './editor-snackbars';
-export { default as EntitiesSavedStates } from './entities-saved-states';
+export {
+	default as EntitiesSavedStates,
+	EntitiesSavedStatesDialogWrapper,
+} from './entities-saved-states';
 export { useIsDirty as useEntitiesSavedStatesIsDirty } from './entities-saved-states/hooks/use-is-dirty';
 export { default as ErrorBoundary } from './error-boundary';
 export { default as LocalAutosaveMonitor } from './local-autosave-monitor';

packages/editor/src/components/save-publish-panels/index.js

@@ -5,16 +5,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Button, createSlotFill } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from '@wordpress/element';
-import {
-	__experimentalUseDialog as useDialog,
-	useInstanceId,
-} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import EntitiesSavedStates, {
-	EntitiesSavedStatesExtensible,
+	EntitiesSavedStatesDialogWrapper,
 } from '../entities-saved-states';
 import PostPublishPanel from '../post-publish-panel';
 import PluginPrePublishPanel from '../plugin-pre-publish-panel';
@@ -108,47 +104,14 @@ export default function SavePublishPanels( {
 	return (
 		<>
 			{ isEntitiesSavedStatesOpen && (
-				<EntitieDialogWrapper close={ closeEntitiesSavedStates }>
+				<EntitiesSavedStatesDialogWrapper
+					close={ closeEntitiesSavedStates }
+				>
 					<EntitiesSavedStates close={ closeEntitiesSavedStates } />
-				</EntitieDialogWrapper>
+				</EntitiesSavedStatesDialogWrapper>
 			) }
 			<Slot bubblesVirtually />
 			{ ! isEntitiesSavedStatesOpen && unmountableContent }
 		</>
 	);
 }
-
-/**
- * A wrapper component that renders a dialog for displaying entities.
- *
- * @param {Object}          props          The component's props.
- * @param {React.ReactNode} props.children The content to be displayed inside the dialog.
- * @param {Function}        props.close    A function to close the dialog.
- *
- * @return {React.Element} The rendered dialog element with children.
- */
-export function EntitieDialogWrapper( { children, close } ) {
-	const dismissPanel = useCallback( () => close(), [ close ] );
-	const [ saveDialogRef, saveDialogProps ] = useDialog( {
-		onClose: () => dismissPanel(),
-	} );
-
-	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
-	const dialogDescription = useInstanceId(
-		EntitiesSavedStatesExtensible,
-		'description'
-	);
-
-	return (
-		<div
-			ref={ saveDialogRef }
-			{ ...saveDialogProps }
-			role="dialog"
-			aria-labelledby={ dialogLabel }
-			aria-describedby={ dialogDescription }
-		>
-			{ ' ' }
-			{ children }
-		</div>
-	);
-}