From fca00ad445154a7c19b0191e8c10469b9aa32766 Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Wed, 27 Nov 2024 20:27:56 +0530 Subject: [PATCH 1/4] feat: added wrapper for dialog behaviour --- .../components/save-publish-panels/index.js | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js index d95d9f3592890..61f3b7c9ceaec 100644 --- a/packages/editor/src/components/save-publish-panels/index.js +++ b/packages/editor/src/components/save-publish-panels/index.js @@ -5,11 +5,17 @@ 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 from '../entities-saved-states'; +import EntitiesSavedStates, { + EntitiesSavedStatesExtensible, +} 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,10 +108,47 @@ export default function SavePublishPanels( { return ( <> { isEntitiesSavedStatesOpen && ( - + + + ) } { ! 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 ( +
+ { ' ' } + { children } +
+ ); +} From 8c4caa5c61f614a4e313f80fae68453b69b24acb Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Wed, 27 Nov 2024 20:28:50 +0530 Subject: [PATCH 2/4] chore: removed renderDialog prop & relating behaviour --- packages/editor/README.md | 1 - .../components/entities-saved-states/index.js | 47 +++---------------- 2 files changed, 7 insertions(+), 41 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index bc00e15c8fb89..8f38651c6b76b 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -401,7 +401,6 @@ _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_ diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 849bd2d0d71c8..383e119ba3246 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -8,10 +8,6 @@ import { useRef, createInterpolateElement, } from '@wordpress/element'; -import { - __experimentalUseDialog as useDialog, - useInstanceId, -} from '@wordpress/compose'; import { useDispatch } from '@wordpress/data'; /** @@ -29,23 +25,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 +46,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 +59,6 @@ export function EntitiesSavedStatesExtensible( { onSave = identity, saveEnabled: saveEnabledProp = undefined, saveLabel = __( 'Save' ), - renderDialog = undefined, dirtyEntityRecords, isDirty, setUnselectedEntities, @@ -109,24 +95,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( From d977929870fa413c5d699aa964fc160c53ac66e6 Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Wed, 27 Nov 2024 20:29:21 +0530 Subject: [PATCH 3/4] chore: removed extra props "renderDialog" as no longer required --- packages/edit-site/src/components/save-panel/index.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index b77e5a9a1a10b..4b8089790dcaa 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -80,13 +80,11 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => { ); }; -const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => { +const _EntitiesSavedStates = ( { onClose } ) => { if ( isPreviewingTheme() ) { return ; } - return ( - - ); + return ; }; export default function SavePanel() { @@ -159,9 +157,7 @@ export default function SavePanel() { { __( 'Open save panel' ) }

- { isSaveViewOpen && ( - <_EntitiesSavedStates onClose={ onClose } renderDialog /> - ) } + { isSaveViewOpen && <_EntitiesSavedStates onClose={ onClose } /> } ); } From 0db9b84a1605bc7b60eccaf7305dda53b2ce3e8b Mon Sep 17 00:00:00 2001 From: Mayank-Tripathi32 Date: Thu, 28 Nov 2024 23:13:28 +0530 Subject: [PATCH 4/4] chore: updated wrapper name, exported it from entities-saved-states & updated preview panel to use wrapper --- .../src/components/save-panel/index.js | 41 ++++++++++++---- packages/editor/README.md | 14 ++++++ .../components/entities-saved-states/index.js | 38 +++++++++++++++ packages/editor/src/components/index.js | 5 +- .../components/save-publish-panels/index.js | 47 ++----------------- 5 files changed, 92 insertions(+), 53 deletions(-) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 4b8089790dcaa..b549d82a176a0 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,17 +70,34 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => { return values; }; + if ( canvas === 'view' ) { + return ( + + ); + } + return ( - + + + ); }; diff --git a/packages/editor/README.md b/packages/editor/README.md index 8f38651c6b76b..54b6577f77a07 100644 --- a/packages/editor/README.md +++ b/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. diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 383e119ba3246..b4fdafacf09e5 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/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( {
); } + +/** + * 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 b42566aac653b..b2ef6d7851326 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 61f3b7c9ceaec..8010a612cb815 100644 --- a/packages/editor/src/components/save-publish-panels/index.js +++ b/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 && ( - + - + ) } { ! 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 ( -
- { ' ' } - { children } -
- ); -}