From 7bb91738415b6f55ad3322f16a2e612a24dff9ac Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Mon, 9 Dec 2024 16:53:17 +0100 Subject: [PATCH 01/11] 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 95ec9b9ffc8c46..29ba0fee0eece1 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 ( <EntitiesSavedStatesForPreview onClose={ onClose } renderDialog={ renderDialog } + isWithinModalDialog={ isWithinModalDialog } /> ); } return ( - <EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } /> + <EntitiesSavedStates + close={ onClose } + renderDialog={ renderDialog } + isWithinModalDialog={ isWithinModalDialog } + /> ); }; @@ -135,7 +149,7 @@ export default function SavePanel() { 'Save site, content, and template changes' ) } > - <_EntitiesSavedStates onClose={ onClose } /> + <_EntitiesSavedStates onClose={ onClose } isWithinModalDialog /> </Modal> ) : null; } diff --git a/packages/editor/README.md b/packages/editor/README.md index 3119f3f289637a..680f02325a97a3 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 200473cccff706..c3229b482e054e 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 ( <EntitiesSavedStatesExtensible close={ close } renderDialog={ renderDialog } + isWithinModalDialog={ isWithinModalDialog } { ...isDirtyProps } /> ); @@ -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 = ( + <> + <FlexItem + isBlock={ isWithinModalDialog ? false : true } + as={ Button } + variant={ isWithinModalDialog ? 'tertiary' : 'secondary' } + size={ isWithinModalDialog ? undefined : 'compact' } + onClick={ dismissPanel } + > + { __( 'Cancel' ) } + </FlexItem> + <FlexItem + isBlock={ isWithinModalDialog ? false : true } + as={ Button } + ref={ saveButtonRef } + variant="primary" + size={ isWithinModalDialog ? undefined : 'compact' } + disabled={ ! saveEnabled } + accessibleWhenDisabled + onClick={ () => + saveDirtyEntities( { + onSave, + dirtyEntityRecords, + entitiesToSkip: unselectedEntities, + close, + } ) + } + className="editor-entities-saved-states__save-button" + expanded={ isWithinModalDialog ? false : true } + > + { saveLabel } + </FlexItem> + </> + ); + return ( <div ref={ renderDialog ? saveDialogRef : undefined } { ...( renderDialog && saveDialogProps ) } - className="entities-saved-states__panel" + className={ clsx( 'entities-saved-states__panel', { + 'is-within-modal-dialog': isWithinModalDialog, + } ) } role={ renderDialog ? 'dialog' : undefined } aria-labelledby={ renderDialog ? dialogLabel : undefined } aria-describedby={ renderDialog ? dialogDescription : undefined } > - <Flex className="entities-saved-states__panel-header" gap={ 2 }> - <FlexItem - isBlock - as={ Button } - variant="secondary" - size="compact" - onClick={ dismissPanel } - > - { __( 'Cancel' ) } - </FlexItem> - <FlexItem - isBlock - as={ Button } - ref={ saveButtonRef } - variant="primary" - size="compact" - disabled={ ! saveEnabled } - accessibleWhenDisabled - onClick={ () => - saveDirtyEntities( { - onSave, - dirtyEntityRecords, - entitiesToSkip: unselectedEntities, - close, - } ) - } - className="editor-entities-saved-states__save-button" - > - { saveLabel } - </FlexItem> - </Flex> + { ! isWithinModalDialog && ( + <Flex className="entities-saved-states__panel-header" gap={ 2 }> + { actionButtons } + </Flex> + ) } <div className="entities-saved-states__text-prompt"> <div @@ -166,7 +190,7 @@ export function EntitiesSavedStatesExtensible( { id={ renderDialog ? dialogLabel : undefined } > <strong className="entities-saved-states__text-prompt--header"> - { __( 'Are you ready to save?' ) } + { __( 'xxAre you ready to save?' ) } </strong> { additionalPrompt } </div> @@ -198,6 +222,12 @@ export function EntitiesSavedStatesExtensible( { /> ); } ) } + + { isWithinModalDialog && ( + <Flex direction="row" justify="flex-end"> + { actionButtons } + </Flex> + ) } </div> ); } From a3aa1012f96456290fff459aebc9763e1e9ef7f7 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Tue, 10 Dec 2024 11:28:41 +0100 Subject: [PATCH 02/11] 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 71041dd9aebabd..7cdf4c41e0f1f9 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 ( - <PanelBody title={ entityLabel } initialOpen> + <PanelBody + title={ entityLabel } + initialOpen + className="entities-saved-states__panel-body" + > <EntityDescription record={ firstRecord } count={ count } /> { 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 c3229b482e054e..9cf34499cdfb63 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 } </FlexItem> @@ -190,11 +189,14 @@ export function EntitiesSavedStatesExtensible( { id={ renderDialog ? dialogLabel : undefined } > <strong className="entities-saved-states__text-prompt--header"> - { __( 'xxAre you ready to save?' ) } + { __( 'Are you ready to save?' ) } </strong> { additionalPrompt } </div> - <p id={ renderDialog ? dialogDescription : undefined }> + <p + id={ renderDialog ? dialogDescription : undefined } + className="entities-saved-states__text-prompt--changes-count" + > { isDirty ? createInterpolateElement( sprintf( @@ -224,7 +226,11 @@ export function EntitiesSavedStatesExtensible( { } ) } { isWithinModalDialog && ( - <Flex direction="row" justify="flex-end"> + <Flex + direction="row" + justify="flex-end" + className="entities-saved-states__panel-footer" + > { actionButtons } </Flex> ) } diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index e2c320678c322a..ba988b7621c585 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 ef42b20f72947a33de5992b3744c4d603ec808cd Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Tue, 10 Dec 2024 11:51:58 +0100 Subject: [PATCH 03/11] 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 29ba0fee0eece1..fcf6df0d4cf81b 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() { <Modal className="edit-site-save-panel__modal" onRequestClose={ onClose } - __experimentalHideHeader - contentLabel={ __( - 'Save site, content, and template changes' - ) } + title={ __( 'Review changes' ) } > <_EntitiesSavedStates onClose={ onClose } isWithinModalDialog /> </Modal> From 93943b48b15fb1b2d013b7d494f172ef15dc2ce3 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Tue, 10 Dec 2024 13:02:18 +0100 Subject: [PATCH 04/11] 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 9cf34499cdfb63..abcace4155e535 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 && ( <Flex className="entities-saved-states__panel-header" gap={ 2 }> @@ -184,34 +187,33 @@ export function EntitiesSavedStatesExtensible( { ) } <div className="entities-saved-states__text-prompt"> - <div - className="entities-saved-states__text-prompt--header-wrapper" - id={ renderDialog ? dialogLabel : undefined } - > - <strong className="entities-saved-states__text-prompt--header"> + <div className="entities-saved-states__text-prompt--header-wrapper"> + <strong + id={ renderDialog ? dialogLabelId : undefined } + className="entities-saved-states__text-prompt--header" + > { __( 'Are you ready to save?' ) } </strong> - { additionalPrompt } </div> - <p - id={ renderDialog ? dialogDescription : undefined } - className="entities-saved-states__text-prompt--changes-count" - > - { isDirty - ? createInterpolateElement( - sprintf( - /* translators: %d: number of site changes waiting to be saved. */ - _n( - 'There is <strong>%d site change</strong> waiting to be saved.', - 'There are <strong>%d site changes</strong> waiting to be saved.', + <div id={ renderDialog ? dialogDescriptionId : undefined }> + { additionalPrompt } + <p className="entities-saved-states__text-prompt--changes-count"> + { isDirty + ? createInterpolateElement( + sprintf( + /* translators: %d: number of site changes waiting to be saved. */ + _n( + 'There is <strong>%d site change</strong> waiting to be saved.', + 'There are <strong>%d site changes</strong> waiting to be saved.', + dirtyEntityRecords.length + ), dirtyEntityRecords.length ), - dirtyEntityRecords.length - ), - { strong: <strong /> } - ) - : selectItemsToSaveDescription } - </p> + { strong: <strong /> } + ) + : selectItemsToSaveDescription } + </p> + </div> </div> { sortedPartitionedSavables.map( ( list ) => { From d6ba1911f33f8602f374f4525c0c56cb0549e992 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Fri, 13 Dec 2024 09:22:30 +0100 Subject: [PATCH 05/11] 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 fcf6df0d4cf81b..1b96daea9fd69b 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 /> </Modal> From fafdc143f549963ae61a3bda5ac391a0a86eef96 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Fri, 13 Dec 2024 12:56:10 +0100 Subject: [PATCH 06/11] 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 ba988b7621c585..d306cec0169a2d 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 f0c94288efa48d930db5a32bfdc3d8d7fbff3b21 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Mon, 16 Dec 2024 09:58:44 +0100 Subject: [PATCH 07/11] 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 d306cec0169a2d..4283a7ad1659d0 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; From 1278d8ef9afb3ed625bcd8e574112a4c5c060a36 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Tue, 17 Dec 2024 12:48:02 +0100 Subject: [PATCH 08/11] Fix displaying of longer checkbox labels. --- .../components/entities-saved-states/entity-record-item.js | 1 + .../editor/src/components/entities-saved-states/style.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index e8219c4cca7ae1..ba2e93088be93e 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -64,6 +64,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) { } checked={ checked } onChange={ onChange } + className="entities-saved-states__change-control" /> </PanelRow> { hasPostMetaChanges && ( diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index 4283a7ad1659d0..e60401fb79d370 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -52,6 +52,10 @@ } } +.entities-saved-states__change-control { + flex: 1; +} + .entities-saved-states__changes { font-size: $default-font-size; margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30; From d9cb7d78a10aee28fc0be15f032c4aece7867a91 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Wed, 18 Dec 2024 10:02:52 +0100 Subject: [PATCH 09/11] Reduce changes count paragraph bottom margin. --- 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 e60401fb79d370..1385c64d2ab6d5 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -44,7 +44,7 @@ .entities-saved-states__text-prompt--changes-count { margin-top: 0; - margin-bottom: $grid-unit-30; + margin-bottom: $grid-unit-10; } .entities-saved-states__panel-footer { From 358d8dd050e14cf7f098c9bb6e7c090a3e7dc522 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Thu, 16 Jan 2025 16:12:00 +0100 Subject: [PATCH 10/11] Use more generic variant prop. --- .../src/components/save-panel/index.js | 16 ++++------ packages/editor/README.md | 2 +- .../components/entities-saved-states/index.js | 32 +++++++++---------- 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 1b96daea9fd69b..0327022b03f2b6 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -34,7 +34,7 @@ const { useLocation } = unlock( routerPrivateApis ); const EntitiesSavedStatesForPreview = ( { onClose, renderDialog, - isWithinModalDialog, + variant, } ) => { const isDirtyProps = useEntitiesSavedStatesIsDirty(); let activateSaveLabel; @@ -80,23 +80,19 @@ const EntitiesSavedStatesForPreview = ( { saveEnabled: true, saveLabel: activateSaveLabel, renderDialog, - isWithinModalDialog, + variant, } } /> ); }; -const _EntitiesSavedStates = ( { - onClose, - renderDialog, - isWithinModalDialog, -} ) => { +const _EntitiesSavedStates = ( { onClose, renderDialog, variant } ) => { if ( isPreviewingTheme() ) { return ( <EntitiesSavedStatesForPreview onClose={ onClose } renderDialog={ renderDialog } - isWithinModalDialog={ isWithinModalDialog } + variant={ variant } /> ); } @@ -104,7 +100,7 @@ const _EntitiesSavedStates = ( { <EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } - isWithinModalDialog={ isWithinModalDialog } + variant={ variant } /> ); }; @@ -147,7 +143,7 @@ export default function SavePanel() { title={ __( 'Review changes' ) } size="small" > - <_EntitiesSavedStates onClose={ onClose } isWithinModalDialog /> + <_EntitiesSavedStates onClose={ onClose } variant="inline" /> </Modal> ) : null; } diff --git a/packages/editor/README.md b/packages/editor/README.md index 680f02325a97a3..d62016bc5b7343 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -402,7 +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. +- _props.variant_ `boolean`: Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start. _Returns_ diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index abcace4155e535..bed5b71e1e064c 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -34,24 +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 {boolean} props.isWithinModalDialog Whether this component is rendered within a Modal component. + * @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.variant Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start. * * @return {React.ReactNode} The rendered component. */ export default function EntitiesSavedStates( { close, renderDialog, - isWithinModalDialog, + variant, } ) { const isDirtyProps = useIsDirty(); return ( <EntitiesSavedStatesExtensible close={ close } renderDialog={ renderDialog } - isWithinModalDialog={ isWithinModalDialog } + variant={ variant } { ...isDirtyProps } /> ); @@ -71,7 +71,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.isWithinModalDialog Whether this component is rendered within a Modal component. + * @param {boolean} props.variant Changes the layout of the component. When an `inline` value is provided, the action buttons are rendered at the end of the component instead of at the start. * * @return {React.ReactNode} The rendered component. */ @@ -86,7 +86,7 @@ export function EntitiesSavedStatesExtensible( { isDirty, setUnselectedEntities, unselectedEntities, - isWithinModalDialog, + variant = 'default', } ) { const saveButtonRef = useRef(); const { saveDirtyEntities } = unlock( useDispatch( editorStore ) ); @@ -138,20 +138,20 @@ export function EntitiesSavedStatesExtensible( { const actionButtons = ( <> <FlexItem - isBlock={ isWithinModalDialog ? false : true } + isBlock={ variant === 'inline' ? false : true } as={ Button } - variant={ isWithinModalDialog ? 'tertiary' : 'secondary' } - size={ isWithinModalDialog ? undefined : 'compact' } + variant={ variant === 'inline' ? 'tertiary' : 'secondary' } + size={ variant === 'inline' ? undefined : 'compact' } onClick={ dismissPanel } > { __( 'Cancel' ) } </FlexItem> <FlexItem - isBlock={ isWithinModalDialog ? false : true } + isBlock={ variant === 'inline' ? false : true } as={ Button } ref={ saveButtonRef } variant="primary" - size={ isWithinModalDialog ? undefined : 'compact' } + size={ variant === 'inline' ? undefined : 'compact' } disabled={ ! saveEnabled } accessibleWhenDisabled onClick={ () => @@ -174,13 +174,13 @@ export function EntitiesSavedStatesExtensible( { ref={ renderDialog ? saveDialogRef : undefined } { ...( renderDialog && saveDialogProps ) } className={ clsx( 'entities-saved-states__panel', { - 'is-within-modal-dialog': isWithinModalDialog, + 'is-within-modal-dialog': variant === 'inline', } ) } role={ renderDialog ? 'dialog' : undefined } aria-labelledby={ renderDialog ? dialogLabelId : undefined } aria-describedby={ renderDialog ? dialogDescriptionId : undefined } > - { ! isWithinModalDialog && ( + { variant === 'default' && ( <Flex className="entities-saved-states__panel-header" gap={ 2 }> { actionButtons } </Flex> @@ -227,7 +227,7 @@ export function EntitiesSavedStatesExtensible( { ); } ) } - { isWithinModalDialog && ( + { variant === 'inline' && ( <Flex direction="row" justify="flex-end" From d05a88c729dd792363dcf92ab21f3c7860d001a6 Mon Sep 17 00:00:00 2001 From: Andrea Fercia <a.fercia@gmail.com> Date: Mon, 20 Jan 2025 09:25:35 +0100 Subject: [PATCH 11/11] Polish. --- .../components/entities-saved-states/index.js | 18 ++++++++++-------- .../entities-saved-states/style.scss | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index bed5b71e1e064c..f849461b6a275e 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -135,23 +135,25 @@ export function EntitiesSavedStatesExtensible( { ? __( 'Select the items you want to save.' ) : undefined; + const isInline = variant === 'inline'; + const actionButtons = ( <> <FlexItem - isBlock={ variant === 'inline' ? false : true } + isBlock={ isInline ? false : true } as={ Button } - variant={ variant === 'inline' ? 'tertiary' : 'secondary' } - size={ variant === 'inline' ? undefined : 'compact' } + variant={ isInline ? 'tertiary' : 'secondary' } + size={ isInline ? undefined : 'compact' } onClick={ dismissPanel } > { __( 'Cancel' ) } </FlexItem> <FlexItem - isBlock={ variant === 'inline' ? false : true } + isBlock={ isInline ? false : true } as={ Button } ref={ saveButtonRef } variant="primary" - size={ variant === 'inline' ? undefined : 'compact' } + size={ isInline ? undefined : 'compact' } disabled={ ! saveEnabled } accessibleWhenDisabled onClick={ () => @@ -174,13 +176,13 @@ export function EntitiesSavedStatesExtensible( { ref={ renderDialog ? saveDialogRef : undefined } { ...( renderDialog && saveDialogProps ) } className={ clsx( 'entities-saved-states__panel', { - 'is-within-modal-dialog': variant === 'inline', + 'is-inline': isInline, } ) } role={ renderDialog ? 'dialog' : undefined } aria-labelledby={ renderDialog ? dialogLabelId : undefined } aria-describedby={ renderDialog ? dialogDescriptionId : undefined } > - { variant === 'default' && ( + { ! isInline && ( <Flex className="entities-saved-states__panel-header" gap={ 2 }> { actionButtons } </Flex> @@ -227,7 +229,7 @@ export function EntitiesSavedStatesExtensible( { ); } ) } - { variant === 'inline' && ( + { isInline && ( <Flex direction="row" justify="flex-end" diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index 1385c64d2ab6d5..d35feffa69308c 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -16,7 +16,7 @@ } } -.entities-saved-states__panel.is-within-modal-dialog { +.entities-saved-states__panel.is-inline { .entities-saved-states__text-prompt { padding: 0; }