Make sure the modal loads if post settings panel not open

WordPress · Jul 11, 2023 · 4d9d97a · 4d9d97a
1 parent 929dee0
commit 4d9d97a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 16 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -13,6 +13,7 @@ import {
 	EditorNotices,
 	EditorKeyboardShortcutsRegister,
 	EditorSnackbars,
+	PostSyncStatusModal,
 	store as editorStore,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -291,6 +292,7 @@ function Layout( { styles } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
+			<PostSyncStatusModal />
 			<StartPageOptions />
 			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />

diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -51,7 +51,10 @@ export { default as PostSlugCheck } from './post-slug/check';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
-export { default as PostSyncStatus } from './post-sync-status';
+export {
+	default as PostSyncStatus,
+	PostSyncStatusModal,
+} from './post-sync-status';
 export { default as PostTaxonomies } from './post-taxonomies';
 export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
 export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';

diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js
@@ -13,30 +13,57 @@ import {
 } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { ReusableBlocksRenameHint } from '@wordpress/block-editor';
-import { getQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
 export default function PostSyncStatus() {
+	const { syncStatus, postType, meta } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		return {
+			syncStatus: getEditedPostAttribute( 'wp_pattern_sync_status' ),
+			meta: getEditedPostAttribute( 'meta' ),
+			postType: getEditedPostAttribute( 'type' ),
+		};
+	} );
+
+	if ( postType !== 'wp_block' ) {
+		return null;
+	}
+	// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+	const currentSyncStatus =
+		meta.wp_pattern_sync_status === 'unsynced' ? 'unsynced' : syncStatus;
+
+	return (
+		<PanelRow className="edit-post-sync-status">
+			<span>{ __( 'Sync status' ) }</span>
+			<div>
+				{ currentSyncStatus === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ) }
+			</div>
+		</PanelRow>
+	);
+}
+
+export function PostSyncStatusModal() {
 	const { editPost } = useDispatch( editorStore );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ syncType, setSyncType ] = useState( 'fully' );
 
-	const { syncStatus, postType, isNewPost } = useSelect( ( select ) => {
+	const { postType, isNewPost } = useSelect( ( select ) => {
 		const { getEditedPostAttribute, isCleanNewPost } =
 			select( editorStore );
 		return {
-			syncStatus: getEditedPostAttribute( 'wp_pattern_sync_status' ),
 			postType: getEditedPostAttribute( 'type' ),
 			isNewPost: isCleanNewPost(),
 		};
 	}, [] );
 
 	useEffect( () => {
-		if ( isNewPost ) {
+		if ( isNewPost && postType === 'wp_block' ) {
 			setIsModalOpen( true );
 		}
 		// We only want the modal to open when the page is first loaded.
@@ -47,19 +74,17 @@ export default function PostSyncStatus() {
 		editPost( {
 			meta: {
 				wp_pattern_sync_status:
-					syncType === 'unsynced' ? 'unsynced' : null,
+					syncType === 'unsynced' ? 'unsynced' : undefined,
 			},
 		} );
 	};
 
 	if ( postType !== 'wp_block' ) {
 		return null;
 	}
-	const { action } = getQueryArgs( window.location.href );
-	const currentSyncStatus = action === 'edit' ? syncStatus : syncType;
 
 	return (
-		<PanelRow className="edit-post-sync-status">
+		<>
 			{ isModalOpen && (
 				<Modal
 					title={ __( 'Set pattern sync status' ) }
@@ -100,12 +125,6 @@ export default function PostSyncStatus() {
 					</form>
 				</Modal>
 			) }
-			<span>{ __( 'Sync status' ) }</span>
-			<div>
-				{ currentSyncStatus === 'unsynced'
-					? __( 'Not synced' )
-					: __( 'Fully synced' ) }
-			</div>
-		</PanelRow>
+		</>
 	);
 }