Patterns: add option to set sync status when adding from wp-admin pat…

…terns list (#52352)

* Show a modal to set sync status if adding pattern from pattern list page

* Make sure the modal loads if post settings panel not open

* don't load modal component at all if not new post

* Simplify the sync status so undefined always = synced

* Update packages/editor/src/components/post-sync-status/index.js

---------

Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

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 } />

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';

packages/editor/src/components/post-sync-status/index.js

@@ -1,35 +1,127 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { PanelRow } from '@wordpress/components';
+import {
+	PanelRow,
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+} from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { ReusableBlocksRenameHint } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
 export default function PostSyncStatus() {
-	const { syncStatus, postType } = useSelect( ( select ) => {
+	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;
 	}
-
-	const isFullySynced = ! syncStatus;
+	// 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>
-				{ isFullySynced ? __( 'Fully synced' ) : __( 'Not synced' ) }
+				{ currentSyncStatus === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ) }
 			</div>
 		</PanelRow>
 	);
 }
+
+export function PostSyncStatusModal() {
+	const { editPost } = useDispatch( editorStore );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ syncType, setSyncType ] = useState( undefined );
+
+	const { postType, isNewPost } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isCleanNewPost } =
+			select( editorStore );
+		return {
+			postType: getEditedPostAttribute( 'type' ),
+			isNewPost: isCleanNewPost(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( isNewPost && postType === 'wp_block' ) {
+			setIsModalOpen( true );
+		}
+		// We only want the modal to open when the page is first loaded.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	const setSyncStatus = () => {
+		editPost( {
+			meta: {
+				wp_pattern_sync_status: syncType,
+			},
+		} );
+	};
+
+	if ( postType !== 'wp_block' || ! isNewPost ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Set pattern sync status' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setIsModalOpen( false );
+							setSyncStatus();
+						} }
+					>
+						<VStack spacing="5">
+							<ReusableBlocksRenameHint />
+							<ToggleControl
+								label={ __( 'Synced' ) }
+								help={ __(
+									'Editing the pattern will update it anywhere it is used.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button variant="primary" type="submit">
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}