diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js index 2840191b4849f1..fc1db1e01b8930 100644 --- a/packages/edit-site/src/components/save-panel/index.js +++ b/packages/edit-site/src/components/save-panel/index.js @@ -85,18 +85,37 @@ const _EntitiesSavedStates = ( { onClose } ) => { }; export default function SavePanel() { - const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => { - const { isSaveViewOpened, getCanvasMode } = unlock( - select( editSiteStore ) - ); + const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect( + ( select ) => { + const { + __experimentalGetDirtyEntityRecords, + isSavingEntityRecord, + isResolving, + } = select( coreStore ); + const dirtyEntityRecords = __experimentalGetDirtyEntityRecords(); + const isActivatingTheme = isResolving( 'activateTheme' ); + const { isSaveViewOpened, getCanvasMode } = unlock( + select( editSiteStore ) + ); - // The currently selected entity to display. - // Typically template or template part in the site editor. - return { - isSaveViewOpen: isSaveViewOpened(), - canvasMode: getCanvasMode(), - }; - }, [] ); + // The currently selected entity to display. + // Typically template or template part in the site editor. + return { + isSaveViewOpen: isSaveViewOpened(), + canvasMode: getCanvasMode(), + isDirty: dirtyEntityRecords.length > 0, + isSaving: + dirtyEntityRecords.some( ( record ) => + isSavingEntityRecord( + record.kind, + record.name, + record.key + ) + ) || isActivatingTheme, + }; + }, + [] + ); const { setIsSaveViewOpened } = useDispatch( editSiteStore ); const onClose = () => setIsSaveViewOpened( false ); @@ -114,7 +133,8 @@ export default function SavePanel() { ) : null; } - + const activateSaveEnabled = isPreviewingTheme() || isDirty; + const disabled = isSaving || ! activateSaveEnabled; return ( setIsSaveViewOpened( true ) } aria-expanded={ false } + disabled={ disabled } + __experimentalIsFocusable > { __( 'Open save panel' ) }