Skip to content

Commit

Permalink
Editor: Fix duplicate save panels (#62863)
Browse files Browse the repository at this point in the history
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
  • Loading branch information
5 people committed Jul 2, 2024
1 parent 35de0f6 commit b9e25f3
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 42 deletions.
2 changes: 2 additions & 0 deletions packages/edit-site/src/components/editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
useHasEditorCanvasContainer,
} from '../editor-canvas-container';
import SaveButton from '../save-button';
import SavePanel from '../save-panel';
import SiteEditorMoreMenu from '../more-menu';
import SiteIcon from '../site-icon';
import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
Expand Down Expand Up @@ -205,6 +206,7 @@ export default function EditSiteEditor( { isLoading } ) {
customSaveButton={
_isPreviewingTheme && <SaveButton size="compact" />
}
customSavePanel={ _isPreviewingTheme && <SavePanel /> }
forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
title={
! hasDefaultEditorCanvasView
Expand Down
5 changes: 2 additions & 3 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ import SiteHub from '../site-hub';
import ResizableFrame from '../resizable-frame';
import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
import { unlock } from '../../lock-unlock';
import SavePanel from '../save-panel';
import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
import { useCommonCommands } from '../../hooks/commands/use-common-commands';
Expand All @@ -56,6 +55,7 @@ import useLayoutAreas from './router';
import useMovingAnimation from './animation';
import SidebarContent from '../sidebar';
import SaveHub from '../save-hub';
import SavePanel from '../save-panel';

const { useCommands } = unlock( coreCommandsPrivateApis );
const { useCommandContext } = unlock( commandsPrivateApis );
Expand Down Expand Up @@ -209,6 +209,7 @@ export default function Layout() {
{ areas.sidebar }
</SidebarContent>
<SaveHub />
<SavePanel />
</motion.div>
) }
</AnimatePresence>
Expand Down Expand Up @@ -282,8 +283,6 @@ export default function Layout() {
</div>
) }
</div>

<SavePanel />
</div>
</>
);
Expand Down
29 changes: 17 additions & 12 deletions packages/editor/src/components/editor-interface/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export default function EditorInterface( {
disableIframe,
autoFocus,
customSaveButton,
customSavePanel,
forceDisableBlockTools,
title,
iframeProps,
Expand Down Expand Up @@ -212,18 +213,22 @@ export default function EditorInterface( {
)
}
actions={
! isPreviewMode ? (
<SavePublishPanels
closeEntitiesSavedStates={ closeEntitiesSavedStates }
isEntitiesSavedStatesOpen={
entitiesSavedStatesCallback
}
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
forceIsDirtyPublishPanel={ forceIsDirty }
/>
) : undefined
! isPreviewMode
? customSavePanel || (
<SavePublishPanels
closeEntitiesSavedStates={
closeEntitiesSavedStates
}
isEntitiesSavedStatesOpen={
entitiesSavedStatesCallback
}
setEntitiesSavedStatesCallback={
setEntitiesSavedStatesCallback
}
forceIsDirtyPublishPanel={ forceIsDirty }
/>
)
: undefined
}
shortcuts={ {
previous: previousShortcut,
Expand Down
56 changes: 33 additions & 23 deletions packages/editor/src/components/save-publish-panels/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,28 @@ export default function SavePublishPanels( {
useDispatch( editorStore );
const {
publishSidebarOpened,
hasNonPostEntityChanges,
hasPostMetaChanges,
} = useSelect(
( select ) => ( {
publishSidebarOpened:
select( editorStore ).isPublishSidebarOpened(),
hasNonPostEntityChanges:
select( editorStore ).hasNonPostEntityChanges(),
hasPostMetaChanges: unlock(
select( editorStore )
).hasPostMetaChanges(),
} ),
[]
);
isPublishable,
isDirty,
hasOtherEntitiesChanges,
} = useSelect( ( select ) => {
const {
isPublishSidebarOpened,
isEditedPostPublishable,
isCurrentPostPublished,
isEditedPostDirty,
hasNonPostEntityChanges,
} = select( editorStore );
const _hasOtherEntitiesChanges =
hasNonPostEntityChanges() ||
unlock( select( editorStore ) ).hasPostMetaChanges();
return {
publishSidebarOpened: isPublishSidebarOpened(),
isPublishable:
! isCurrentPostPublished() && isEditedPostPublishable(),
isDirty: _hasOtherEntitiesChanges || isEditedPostDirty(),
hasOtherEntitiesChanges: _hasOtherEntitiesChanges,
};
}, [] );

const openEntitiesSavedStates = useCallback(
() => setEntitiesSavedStatesCallback( true ),
Expand All @@ -62,29 +70,31 @@ export default function SavePublishPanels( {
PostPublishExtension={ PluginPostPublishPanel.Slot }
/>
);
} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
} else if ( isPublishable && ! hasOtherEntitiesChanges ) {
unmountableContent = (
<div className="editor-layout__toggle-entities-saved-states-panel">
<div className="editor-layout__toggle-publish-panel">
<Button
variant="secondary"
className="editor-layout__toggle-entities-saved-states-panel-button"
onClick={ openEntitiesSavedStates }
className="editor-layout__toggle-publish-panel-button"
onClick={ togglePublishSidebar }
aria-expanded={ false }
>
{ __( 'Open save panel' ) }
{ __( 'Open publish panel' ) }
</Button>
</div>
);
} else {
unmountableContent = (
<div className="editor-layout__toggle-publish-panel">
<div className="editor-layout__toggle-entities-saved-states-panel">
<Button
variant="secondary"
className="editor-layout__toggle-publish-panel-button"
onClick={ togglePublishSidebar }
className="editor-layout__toggle-entities-saved-states-panel-button"
onClick={ openEntitiesSavedStates }
aria-expanded={ false }
disabled={ ! isDirty }
__experimentalIsFocusable
>
{ __( 'Open publish panel' ) }
{ __( 'Open save panel' ) }
</Button>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/specs/editor/various/multi-entity-saving.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,12 @@ test.describe( 'Editor - Multi-entity save flow', () => {
await expect( saveButton ).toBeEnabled();

// Verify multi-entity saving not enabled.
await expect( openSavePanel ).toBeHidden();
await expect( publishPanel ).toBeHidden();

await siteTitleField.fill( `${ originalSiteTitle }!` );

// Multi-entity saving should be enabled.
await expect( openSavePanel ).toBeVisible();
await expect( openSavePanel ).toBeEnabled();
} );

test( 'Site blocks should save individually', async ( {
Expand Down
5 changes: 4 additions & 1 deletion test/e2e/specs/editor/various/switch-to-draft.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
.getByRole( 'button', { name: 'Close Settings' } )
.click();
}
await page.getByRole( 'button', { name: 'Save' } ).click();
await page
.getByRole( 'region', { name: 'Editor top bar' } )
.getByRole( 'button', { name: 'Save', exact: true } )
.click();
await expect(
page.getByRole( 'button', {
name: 'Dismiss this notice',
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/multi-entity-saving.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ test.describe( 'Site Editor - Multi-entity save flow', () => {
).toBeEnabled();
await expect(
page
.getByRole( 'region', { name: 'Save panel' } )
.getByRole( 'region', { name: 'Editor publish' } )
.getByRole( 'button', { name: 'Open save panel' } )
).toBeVisible();

Expand Down

0 comments on commit b9e25f3

Please sign in to comment.