diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index b77e5a9a1a10ba..b549d82a176a00 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/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,27 +70,42 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => { return values; }; + if ( canvas === 'view' ) { + return ( + + ); + } + return ( - + + + ); }; -const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => { +const _EntitiesSavedStates = ( { onClose } ) => { if ( isPreviewingTheme() ) { return ; } - return ( - - ); + return ; }; export default function SavePanel() { @@ -159,9 +178,7 @@ export default function SavePanel() { { __( 'Open save panel' ) } - { isSaveViewOpen && ( - <_EntitiesSavedStates onClose={ onClose } renderDialog /> - ) } + { isSaveViewOpen && <_EntitiesSavedStates onClose={ onClose } /> } ); } diff --git a/packages/editor/README.md b/packages/editor/README.md index bc00e15c8fb892..54b6577f77a07c 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -401,12 +401,25 @@ _Parameters_ - _props_ `Object`: The component props. - _props.close_ `Function`: The function to close the dialog. -- _props.renderDialog_ `Function`: The function to render the dialog. _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. diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 849bd2d0d71c8c..b4fdafacf09e54 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -8,11 +8,11 @@ import { useRef, createInterpolateElement, } from '@wordpress/element'; +import { useDispatch } from '@wordpress/data'; import { __experimentalUseDialog as useDialog, useInstanceId, } from '@wordpress/compose'; -import { useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -29,23 +29,15 @@ 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. * * @return {JSX.Element} The rendered component. */ -export default function EntitiesSavedStates( { - close, - renderDialog = undefined, -} ) { +export default function EntitiesSavedStates( { close } ) { const isDirtyProps = useIsDirty(); return ( - + ); } @@ -58,7 +50,6 @@ export default function EntitiesSavedStates( { * @param {Function} props.onSave Function to call when saving entities. * @param {boolean} props.saveEnabled Flag indicating if save is enabled. * @param {string} props.saveLabel Label for the save button. - * @param {Function} props.renderDialog Function to render a custom dialog. * @param {Array} props.dirtyEntityRecords Array of dirty entity records. * @param {boolean} props.isDirty Flag indicating if there are dirty entities. * @param {Function} props.setUnselectedEntities Function to set unselected entities. @@ -72,7 +63,6 @@ export function EntitiesSavedStatesExtensible( { onSave = identity, saveEnabled: saveEnabledProp = undefined, saveLabel = __( 'Save' ), - renderDialog = undefined, dirtyEntityRecords, isDirty, setUnselectedEntities, @@ -109,24 +99,8 @@ export function EntitiesSavedStatesExtensible( { // its own will use the event object in place of the expected saved entities. const dismissPanel = useCallback( () => close(), [ close ] ); - const [ saveDialogRef, saveDialogProps ] = useDialog( { - onClose: () => dismissPanel(), - } ); - const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' ); - const dialogDescription = useInstanceId( - EntitiesSavedStatesExtensible, - 'description' - ); - return ( -
+
-
+
{ __( 'Are you ready to save?' ) } { additionalPrompt }
-

+

{ isDirty ? createInterpolateElement( sprintf( @@ -200,3 +171,37 @@ export function EntitiesSavedStatesExtensible( {

); } + +/** + * 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 ( +
+ { children } +
+ ); +} diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index b42566aac653be..b2ef6d7851326b 100644 --- a/packages/editor/src/components/index.js +++ b/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'; diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js index d95d9f35928906..8010a612cb8153 100644 --- a/packages/editor/src/components/save-publish-panels/index.js +++ b/packages/editor/src/components/save-publish-panels/index.js @@ -9,7 +9,9 @@ import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ -import EntitiesSavedStates from '../entities-saved-states'; +import EntitiesSavedStates, { + EntitiesSavedStatesDialogWrapper, +} from '../entities-saved-states'; import PostPublishPanel from '../post-publish-panel'; import PluginPrePublishPanel from '../plugin-pre-publish-panel'; import PluginPostPublishPanel from '../plugin-post-publish-panel'; @@ -102,7 +104,11 @@ export default function SavePublishPanels( { return ( <> { isEntitiesSavedStatesOpen && ( - + + + ) } { ! isEntitiesSavedStatesOpen && unmountableContent }