From 6d41470b6ce3a4df120dd3c937acdc33573d86f0 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 9 Dec 2024 16:53:17 +0100 Subject: [PATCH 1/7] Move buttons at the bottom when rendered withim a modal dialog. --- .../src/components/save-panel/index.js | 22 +++- packages/editor/README.md | 1 + .../components/entities-saved-states/index.js | 104 +++++++++++------- 3 files changed, 86 insertions(+), 41 deletions(-) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 95ec9b9ffc8c4..29ba0fee0eece 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -31,7 +31,11 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } = unlock( privateApis ); const { useLocation } = unlock( routerPrivateApis ); -const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => { +const EntitiesSavedStatesForPreview = ( { + onClose, + renderDialog, + isWithinModalDialog, +} ) => { const isDirtyProps = useEntitiesSavedStatesIsDirty(); let activateSaveLabel; if ( isDirtyProps.isDirty ) { @@ -76,22 +80,32 @@ const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => { saveEnabled: true, saveLabel: activateSaveLabel, renderDialog, + isWithinModalDialog, } } /> ); }; -const _EntitiesSavedStates = ( { onClose, renderDialog } ) => { +const _EntitiesSavedStates = ( { + onClose, + renderDialog, + isWithinModalDialog, +} ) => { if ( isPreviewingTheme() ) { return ( ); } return ( - + ); }; @@ -135,7 +149,7 @@ export default function SavePanel() { 'Save site, content, and template changes' ) } > - <_EntitiesSavedStates onClose={ onClose } /> + <_EntitiesSavedStates onClose={ onClose } isWithinModalDialog /> ) : null; } diff --git a/packages/editor/README.md b/packages/editor/README.md index 3211e6664256d..472241efbb17d 100644 --- a/packages/editor/README.md +++ b/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_ `boolean`: Whether to render the component with modal dialog behavior. +- _props.isWithinModalDialog_ `boolean`: Whether this component is rendered within a Modal component. _Returns_ diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 200473cccff70..c3229b482e054 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + /** * WordPress dependencies */ @@ -29,18 +34,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 {boolean} props.renderDialog Whether to render the component with modal dialog behavior. + * @param {Object} props The component props. + * @param {Function} props.close The function to close the dialog. + * @param {boolean} props.renderDialog Whether to render the component with modal dialog behavior. + * @param {boolean} props.isWithinModalDialog Whether this component is rendered within a Modal component. * * @return {React.ReactNode} The rendered component. */ -export default function EntitiesSavedStates( { close, renderDialog } ) { +export default function EntitiesSavedStates( { + close, + renderDialog, + isWithinModalDialog, +} ) { const isDirtyProps = useIsDirty(); return ( ); @@ -60,6 +71,7 @@ export default function EntitiesSavedStates( { close, renderDialog } ) { * @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.isWithinModalDialog Whether this component is rendered within a Modal component. * * @return {React.ReactNode} The rendered component. */ @@ -74,6 +86,7 @@ export function EntitiesSavedStatesExtensible( { isDirty, setUnselectedEntities, unselectedEntities, + isWithinModalDialog, } ) { const saveButtonRef = useRef(); const { saveDirtyEntities } = unlock( useDispatch( editorStore ) ); @@ -119,46 +132,57 @@ export function EntitiesSavedStatesExtensible( { ? __( 'Select the items you want to save.' ) : undefined; + const actionButtons = ( + <> + + { __( 'Cancel' ) } + + + saveDirtyEntities( { + onSave, + dirtyEntityRecords, + entitiesToSkip: unselectedEntities, + close, + } ) + } + className="editor-entities-saved-states__save-button" + expanded={ isWithinModalDialog ? false : true } + > + { saveLabel } + + + ); + return (
- - - { __( 'Cancel' ) } - - - saveDirtyEntities( { - onSave, - dirtyEntityRecords, - entitiesToSkip: unselectedEntities, - close, - } ) - } - className="editor-entities-saved-states__save-button" - > - { saveLabel } - - + { ! isWithinModalDialog && ( + + { actionButtons } + + ) }
- { __( 'Are you ready to save?' ) } + { __( 'xxAre you ready to save?' ) } { additionalPrompt }
@@ -198,6 +222,12 @@ export function EntitiesSavedStatesExtensible( { /> ); } ) } + + { isWithinModalDialog && ( + + { actionButtons } + + ) }
); } From 7fe4a8d7272fd39c3165c6bac4f1f67c82a49ee3 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 10 Dec 2024 11:28:41 +0100 Subject: [PATCH 2/7] Refine styling. --- .../entities-saved-states/entity-type-list.js | 6 +++- .../components/entities-saved-states/index.js | 14 +++++--- .../entities-saved-states/style.scss | 36 +++++++++++++++++++ 3 files changed, 51 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/entities-saved-states/entity-type-list.js b/packages/editor/src/components/entities-saved-states/entity-type-list.js index 71041dd9aebab..7cdf4c41e0f1f 100644 --- a/packages/editor/src/components/entities-saved-states/entity-type-list.js +++ b/packages/editor/src/components/entities-saved-states/entity-type-list.js @@ -94,7 +94,11 @@ export default function EntityTypeList( { } return ( - + { list.map( ( record ) => { return ( diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index c3229b482e054..9cf34499cdfb6 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -160,7 +160,6 @@ export function EntitiesSavedStatesExtensible( { } ) } className="editor-entities-saved-states__save-button" - expanded={ isWithinModalDialog ? false : true } > { saveLabel } @@ -190,11 +189,14 @@ export function EntitiesSavedStatesExtensible( { id={ renderDialog ? dialogLabel : undefined } > - { __( 'xxAre you ready to save?' ) } + { __( 'Are you ready to save?' ) } { additionalPrompt }
-

+

{ isDirty ? createInterpolateElement( sprintf( @@ -224,7 +226,11 @@ export function EntitiesSavedStatesExtensible( { } ) } { isWithinModalDialog && ( - + { actionButtons } ) } diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index e2c320678c322..ba988b7621c58 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -16,6 +16,42 @@ } } +.entities-saved-states__panel.is-within-modal-dialog { + .entities-saved-states__text-prompt { + padding: 0; + } + + .entities-saved-states__panel-body { + padding-left: 0; + padding-right: 0; + border: 0; + + > h2 { + margin-left: -1 * $grid-unit-20; + margin-right: -1 * $grid-unit-20; + margin-bottom: 0; + + button { + font-size: $font-size-x-small; + text-transform: uppercase; + } + } + } + + .entities-saved-states__text-prompt--header-wrapper { + display: none; + } + + .entities-saved-states__text-prompt--changes-count { + margin-top: 0; + margin-bottom: $grid-unit-30; + } + + .entities-saved-states__panel-footer { + margin-top: $grid-unit-20; + } +} + .entities-saved-states__description-heading { font-size: $default-font-size; } From 7cbf0b20646e30b9f65d30efe36cbd1b04ddc971 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 10 Dec 2024 11:51:58 +0100 Subject: [PATCH 3/7] Make modal dialog header visible and fix labeling. --- packages/edit-site/src/components/save-panel/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 29ba0fee0eece..fcf6df0d4cf81 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -144,10 +144,7 @@ export default function SavePanel() { <_EntitiesSavedStates onClose={ onClose } isWithinModalDialog /> From 0587e036097ca83ead55a3cd600ff1a7cee91c50 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 10 Dec 2024 13:02:18 +0100 Subject: [PATCH 4/7] Fix label and description when used with modal behavior. --- .../components/entities-saved-states/index.js | 58 ++++++++++--------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 9cf34499cdfb6..abcace4155e53 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -122,10 +122,13 @@ export function EntitiesSavedStatesExtensible( { const [ saveDialogRef, saveDialogProps ] = useDialog( { onClose: () => dismissPanel(), } ); - const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' ); - const dialogDescription = useInstanceId( + const dialogLabelId = useInstanceId( EntitiesSavedStatesExtensible, - 'description' + 'entities-saved-states__panel-label' + ); + const dialogDescriptionId = useInstanceId( + EntitiesSavedStatesExtensible, + 'entities-saved-states__panel-description' ); const selectItemsToSaveDescription = !! dirtyEntityRecords.length @@ -174,8 +177,8 @@ export function EntitiesSavedStatesExtensible( { 'is-within-modal-dialog': isWithinModalDialog, } ) } role={ renderDialog ? 'dialog' : undefined } - aria-labelledby={ renderDialog ? dialogLabel : undefined } - aria-describedby={ renderDialog ? dialogDescription : undefined } + aria-labelledby={ renderDialog ? dialogLabelId : undefined } + aria-describedby={ renderDialog ? dialogDescriptionId : undefined } > { ! isWithinModalDialog && ( @@ -184,34 +187,33 @@ export function EntitiesSavedStatesExtensible( { ) }

-
- +
+ { __( 'Are you ready to save?' ) } - { additionalPrompt }
-

- { isDirty - ? createInterpolateElement( - sprintf( - /* translators: %d: number of site changes waiting to be saved. */ - _n( - 'There is %d site change waiting to be saved.', - 'There are %d site changes waiting to be saved.', +

+ { additionalPrompt } +

+ { isDirty + ? createInterpolateElement( + sprintf( + /* translators: %d: number of site changes waiting to be saved. */ + _n( + 'There is %d site change waiting to be saved.', + 'There are %d site changes waiting to be saved.', + dirtyEntityRecords.length + ), dirtyEntityRecords.length ), - dirtyEntityRecords.length - ), - { strong: } - ) - : selectItemsToSaveDescription } -

+ { strong: } + ) + : selectItemsToSaveDescription } +

+
{ sortedPartitionedSavables.map( ( list ) => { From f5a9e5d6e19f41cbd8fc0c9a4dac6f5464dbcbfb Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 13 Dec 2024 09:22:30 +0100 Subject: [PATCH 5/7] Try modal dialog small size. --- packages/edit-site/src/components/save-panel/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index fcf6df0d4cf81..1b96daea9fd69 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -145,6 +145,7 @@ export default function SavePanel() { className="edit-site-save-panel__modal" onRequestClose={ onClose } title={ __( 'Review changes' ) } + size="small" > <_EntitiesSavedStates onClose={ onClose } isWithinModalDialog /> From 165163fddb866d384250607fa2ed4c39410ae38c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 13 Dec 2024 12:56:10 +0100 Subject: [PATCH 6/7] Adjust changes list margins. --- packages/editor/src/components/entities-saved-states/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index ba988b7621c58..d306cec0169a2 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -59,7 +59,7 @@ .entities-saved-states__changes { color: $gray-700; font-size: $helptext-font-size; - margin: $grid-unit-10 $grid-unit-20 0 $grid-unit-20; + margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30; list-style: disc; li { From 5a1b633cae64a4ca9f61b1d57c0a92099aab6ed3 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 16 Dec 2024 09:58:44 +0100 Subject: [PATCH 7/7] Use default font size and color for the changes items. --- .../editor/src/components/entities-saved-states/style.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index d306cec0169a2..4283a7ad1659d 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -52,13 +52,8 @@ } } -.entities-saved-states__description-heading { - font-size: $default-font-size; -} - .entities-saved-states__changes { - color: $gray-700; - font-size: $helptext-font-size; + font-size: $default-font-size; margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30; list-style: disc;