Library: Add sync status to pattern details screen (#51954)

packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js

@@ -14,7 +14,6 @@ import SidebarButton from '../sidebar-button';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import usePatternDetails from './use-pattern-details';
-import useNavigationMenuContent from './use-navigation-menu-content';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
@@ -27,7 +26,6 @@ export default function SidebarNavigationScreenPattern() {
 	useInitEditedEntityFromURL();
 
 	const patternDetails = usePatternDetails( postType, postId );
-	const content = useNavigationMenuContent( postType, postId );
 
 	// The absence of a category type in the query params for template parts
 	// indicates the user has arrived at the template part via the "manage all"
@@ -47,7 +45,6 @@ export default function SidebarNavigationScreenPattern() {
 				/>
 			}
 			backPath={ backPath }
-			content={ content }
 			{ ...patternDetails }
 		/>
 	);

packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -11,7 +11,14 @@ import { Icon } from '@wordpress/components';
  */
 import { useAddedBy } from '../list/added-by';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import {
+	SidebarNavigationScreenDetailsPanel,
+	SidebarNavigationScreenDetailsPanelRow,
+	SidebarNavigationScreenDetailsPanelLabel,
+	SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
 
 export default function usePatternDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
@@ -82,5 +89,40 @@ export default function usePatternDetails( postType, postId ) {
 		/>
 	) : null;
 
-	return { title, description, footer };
+	const details = [];
+
+	if ( postType === 'wp_block' ) {
+		details.push( {
+			label: __( 'Syncing' ),
+			value:
+				record.meta?.sync_status === 'unsynced'
+					? __( 'Not synced' )
+					: __( 'Fully synced' ),
+		} );
+	}
+
+	const content = (
+		<>
+			{ !! details.length && (
+				<SidebarNavigationScreenDetailsPanel
+					spacing={ 5 }
+					title={ __( 'Details' ) }
+				>
+					{ details.map( ( { label, value } ) => (
+						<SidebarNavigationScreenDetailsPanelRow key={ label }>
+							<SidebarNavigationScreenDetailsPanelLabel>
+								{ label }
+							</SidebarNavigationScreenDetailsPanelLabel>
+							<SidebarNavigationScreenDetailsPanelValue>
+								{ value }
+							</SidebarNavigationScreenDetailsPanelValue>
+						</SidebarNavigationScreenDetailsPanelRow>
+					) ) }
+				</SidebarNavigationScreenDetailsPanel>
+			) }
+			{ useNavigationMenuContent( postType, postId ) }
+		</>
+	);
+
+	return { title, description, content, footer };
 }