Template editing: update fullscreen WP back functionality (#58534)

* This commit:
- checks for a clientId in the list view to fix a bug in template editing mode where no block is selected
- turns the logo button into a back button similar to the document bar when editing a template to avoid creating a post_type=wp_template link (which doesn't work)

* Rolling back change in favour of #58533

* Updating tests and adding some to cover the new functionality

* This commit adds a method to the post editor settings that return the initial post id and post type.

* No need for a useCallback. Use useMemo!

* Reverting adding intialPost props to the settings. Prop drill down to the relevant component.

packages/edit-post/src/components/header/fullscreen-mode-close/index.js

@@ -24,7 +24,7 @@ import { useReducedMotion } from '@wordpress/compose';
  */
 import { store as editPostStore } from '../../../store';
 
-function FullscreenModeClose( { showTooltip, icon, href } ) {
+function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( editorStore );
@@ -33,15 +33,15 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 				select( coreStore );
 			const siteData =
 				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
+			const _postType = initialPost?.type || getCurrentPostType();
 			return {
 				isActive: isFeatureActive( 'fullscreenMode' ),
 				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
 					'root',
 					'__unstableBase',
 					undefined,
 				] ),
-				postType: getPostType( getCurrentPostType() ),
+				postType: getPostType( _postType ),
 				siteIconUrl: siteData.site_icon_url,
 			};
 		},
@@ -88,17 +88,20 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		'has-icon': siteIconUrl,
 	} );
 
+	const buttonHref =
+		href ??
+		addQueryArgs( 'edit.php', {
+			post_type: postType.slug,
+		} );
+
+	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
+
 	return (
 		<motion.div whileHover="expand">
 			<Button
 				className={ classes }
-				href={
-					href ??
-					addQueryArgs( 'edit.php', {
-						post_type: postType.slug,
-					} )
-				}
-				label={ postType?.labels?.view_items ?? __( 'Back' ) }
+				href={ buttonHref }
+				label={ buttonLabel }
 				showTooltip={ showTooltip }
 			>
 				{ buttonIcon }

packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js

@@ -15,8 +15,7 @@ import FullscreenModeClose from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
+	return jest.fn();
 } );
 
 jest.mock( '@wordpress/core-data' );
@@ -28,16 +27,15 @@ describe( 'FullscreenModeClose', () => {
 				return cb( () => ( {
 					isResolving: () => false,
 					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
 					getPostType: () => true,
 					getEntityRecord: () => ( {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
+					getCurrentPostType: () => 'post',
 				} ) );
 			} );
 
 			render( <FullscreenModeClose /> );
-
 			const siteIcon = screen.getByAltText( 'Site Icon' );
 
 			expect( siteIcon ).toBeVisible();
@@ -48,11 +46,11 @@ describe( 'FullscreenModeClose', () => {
 				return cb( () => ( {
 					isResolving: () => false,
 					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
 					getPostType: () => true,
 					getEntityRecord: () => ( {
 						site_icon_url: '',
 					} ),
+					getCurrentPostType: () => 'post',
 				} ) );
 			} );
 
@@ -64,5 +62,33 @@ describe( 'FullscreenModeClose', () => {
 
 			expect( container ).toMatchSnapshot();
 		} );
+
+		it( 'should add correct href using post type from initialPost props', () => {
+			useSelect.mockImplementation( ( cb ) => {
+				return cb( () => ( {
+					isResolving: () => false,
+					isFeatureActive: () => true,
+					getPostType: () => {
+						return {
+							slug: 'page',
+							labels: {
+								view_items: 'View Pages',
+							},
+						};
+					},
+					getEntityRecord: () => ( {
+						site_icon_url: '',
+					} ),
+					getCurrentPostType: () => 'post',
+				} ) );
+			} );
+
+			render( <FullscreenModeClose initialPost={ { type: 'page' } } /> );
+
+			const button = screen.getByLabelText( 'View Pages' );
+			expect( button.href ).toBe(
+				'http://localhost/edit.php?post_type=page'
+			);
+		} );
 	} );
 } );

packages/edit-post/src/components/header/index.js

@@ -55,7 +55,7 @@ const slideX = {
 	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
 };
 
-function Header( { setEntitiesSavedStatesCallback } ) {
+function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const blockToolbarRef = useRef();
@@ -101,7 +101,10 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					variants={ slideX }
 					transition={ { type: 'tween', delay: 0.8 } }
 				>
-					<FullscreenModeClose showTooltip />
+					<FullscreenModeClose
+						showTooltip
+						initialPost={ initialPost }
+					/>
 				</motion.div>
 			</MainDashboardButton.Slot>
 			<motion.div

packages/edit-post/src/components/layout/index.js

@@ -131,7 +131,7 @@ function useEditorStyles() {
 	] );
 }
 
-function Layout() {
+function Layout( { initialPost } ) {
 	useCommands();
 	useCommonCommands();
 	useBlockCommands();
@@ -304,6 +304,7 @@ function Layout() {
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
+						initialPost={ initialPost }
 					/>
 				}
 				editorNotices={ <EditorNotices /> }

packages/edit-post/src/editor.js

@@ -32,10 +32,8 @@ function Editor( {
 	initialEdits,
 	...props
 } ) {
-	const { currentPost, getPostLinkProps, goBack } = usePostHistory(
-		initialPostId,
-		initialPostType
-	);
+	const { currentPost, getPostLinkProps, initialPost, goBack } =
+		usePostHistory( initialPostId, initialPostType );
 
 	const { hasInlineToolbar, post, preferredStyleVariations, template } =
 		useSelect(
@@ -80,8 +78,8 @@ function Editor( {
 	const defaultRenderingMode =
 		currentPost.postType === 'wp_template' ? 'all' : 'post-only';
 
-	const editorSettings = useMemo( () => {
-		const result = {
+	const editorSettings = useMemo(
+		() => ( {
 			...settings,
 			getPostLinkProps,
 			goBack,
@@ -91,17 +89,17 @@ function Editor( {
 				onChange: updatePreferredStyleVariations,
 			},
 			hasInlineToolbar,
-		};
-		return result;
-	}, [
-		settings,
-		hasInlineToolbar,
-		preferredStyleVariations,
-		updatePreferredStyleVariations,
-		getPostLinkProps,
-		goBack,
-		defaultRenderingMode,
-	] );
+		} ),
+		[
+			settings,
+			hasInlineToolbar,
+			preferredStyleVariations,
+			updatePreferredStyleVariations,
+			getPostLinkProps,
+			goBack,
+			defaultRenderingMode,
+		]
+	);
 
 	if ( ! post ) {
 		return null;
@@ -120,7 +118,7 @@ function Editor( {
 				<ErrorBoundary>
 					<CommandMenu />
 					<EditorInitialization postId={ currentPost.postId } />
-					<Layout />
+					<Layout initialPost={ initialPost } />
 				</ErrorBoundary>
 				<PostLockedModal />
 			</ExperimentalEditorProvider>

packages/edit-post/src/hooks/use-post-history.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useReducer } from '@wordpress/element';
+import { useCallback, useReducer, useMemo } from '@wordpress/element';
 import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url';
 
 /**
@@ -35,6 +35,13 @@ export default function usePostHistory( initialPostId, initialPostType ) {
 		[ { postId: initialPostId, postType: initialPostType } ]
 	);
 
+	const initialPost = useMemo( () => {
+		return {
+			type: initialPostType,
+			id: initialPostId,
+		};
+	}, [ initialPostType, initialPostId ] );
+
 	const getPostLinkProps = useCallback( ( params ) => {
 		const currentArgs = getQueryArgs( window.location.href );
 		const currentUrlWithoutArgs = removeQueryArgs(
@@ -68,6 +75,7 @@ export default function usePostHistory( initialPostId, initialPostType ) {
 	return {
 		currentPost,
 		getPostLinkProps,
+		initialPost,
 		goBack: postHistory.length > 1 ? goBack : undefined,
 	};
 }