Add a back button to the Header when the task list is displayed. (https://github.com/woocommerce/woocommerce-admin/pull/6397)

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -45,6 +45,19 @@
 -   See that the Themes step loads fast 😎
 -   See that the new theme is listed in the Themes step.
 
+### Set up tasks can now navigate back to the home screen #6397
+
+1. With a fresh install of wc-admin and woocommerce, go to the home screen
+2. Going to the homescreen redirects to the profile setup wizard, click "Skip setup store details" to return to the home screen
+3. On the home screen you will see the setup task list. It has the heading "Get ready to start selling"
+
+For each task in that list apart from "Store details":
+
+1. Click the item
+2. You should land on the setup task page
+3. A title in the top left should reflect the original task name from the task list. e.g. "Add tax rates"
+4. Clicking the chevron to the left of the title should take you back to the home screen
+
 ## 2.1.0
 
 ### Correct the Klarna slug #6440

plugins/woocommerce-admin/client/header/index.js

@@ -3,11 +3,16 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
+import { Tooltip } from '@wordpress/components';
 import classnames from 'classnames';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useUserPreferences } from '@woocommerce/data';
 import { getSetting } from '@woocommerce/wc-admin-settings';
 import { Text } from '@woocommerce/experimental';
+import { Icon, chevronLeft } from '@wordpress/icons';
+import { getHistory, updateQueryString } from '@woocommerce/navigation';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -18,6 +23,59 @@ import { MobileAppBanner } from '../mobile-banner';
 import useIsScrolled from '../hooks/useIsScrolled';
 import Navigation from '../navigation';
 
+const renderTaskListBackButton = () => {
+	const currentUrl = new URL( window.location.href );
+	const task = currentUrl.searchParams.get( 'task' );
+
+	if ( task ) {
+		const homeText = __( 'WooCommerce Home', 'woocommerce-admin' );
+
+		const navigateHome = () => {
+			recordEvent( 'topbar_back_button', {
+				page_name: getPageTitle( window.title ),
+			} );
+			updateQueryString( {}, getHistory().location.pathname, {} );
+		};
+
+		// if it's a task list page, render a back button to the homescreen
+		return (
+			<Tooltip text={ homeText }>
+				<div
+					tabIndex="0"
+					role="button"
+					data-testid="header-back-button"
+					className="woocommerce-layout__header-back-button"
+					onKeyDown={ ( { keyCode } ) => {
+						if ( keyCode === ENTER || keyCode === SPACE ) {
+							navigateHome();
+						}
+					} }
+				>
+					<Icon icon={ chevronLeft } onClick={ navigateHome } />
+				</div>
+			</Tooltip>
+		);
+	}
+
+	return null;
+};
+
+const getPageTitle = ( defaultTitle ) => {
+	const currentUrl = new URL( window.location.href );
+	const task = currentUrl.searchParams.get( 'task' );
+
+	// If it's the task list then render a title based on which task the user is on.
+	return (
+		{
+			payments: __( 'Choose payment methods', 'woocommerce-admin' ),
+			tax: __( 'Add tax rates', 'woocommerce-admin' ),
+			appearance: __( 'Personalize your store', 'woocommerce-admin' ),
+			products: __( 'Add products', 'woocommerce-admin' ),
+			shipping: __( 'Set up shipping costs', 'woocommerce-admin' ),
+		}[ task ] || defaultTitle
+	);
+};
+
 export const Header = ( { sections, isEmbedded = false, query } ) => {
 	const headerElement = useRef( null );
 	const siteTitle = getSetting( 'siteTitle', '' );
@@ -92,6 +150,9 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 		} );
 	};
 
+	const backButton = renderTaskListBackButton();
+	const backButtonClass = backButton ? 'with-back-button' : '';
+
 	return (
 		<div className={ className } ref={ headerElement }>
 			{ ! isModalDismissed && (
@@ -103,13 +164,13 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
 
 			<div className="woocommerce-layout__header-wrapper">
 				{ window.wcAdminFeatures.navigation && <Navigation /> }
-
+				{ renderTaskListBackButton() }
 				<Text
-					className="woocommerce-layout__header-heading"
+					className={ `woocommerce-layout__header-heading ${ backButtonClass }` }
 					as="h1"
 					variant="subtitle.small"
 				>
-					{ decodeEntities( pageTitle ) }
+					{ getPageTitle( decodeEntities( pageTitle ) ) }
 				</Text>
 
 				{ window.wcAdminFeatures[ 'activity-panels' ] && (

plugins/woocommerce-admin/client/header/style.scss

@@ -17,6 +17,16 @@
 		min-height: $header-height;
 	}
 
+	.woocommerce-layout__header-back-button {
+		cursor: pointer;
+		margin-left: $gutter-large;
+		display: flex;
+
+		&:focus {
+			box-shadow: inset -1px -1px 0 #757575, inset 1px 1px 0 #757575;
+		}
+	}
+
 	@include breakpoint( '<782px' ) {
 		flex-flow: row wrap;
 		top: $adminbar-height-mobile;
@@ -43,7 +53,10 @@
 		background: $studio-white;
 		font-weight: 600;
 		font-size: 14px;
-		text-transform: capitalize;
+
+		&.with-back-button {
+			padding-left: $fallback-gutter;
+		}
 	}
 }
 

plugins/woocommerce-admin/client/header/test/index.js

@@ -47,6 +47,13 @@ const encodedBreadcrumb = [
 	'Accounts & Privacy',
 ];
 
+const stubLocation = ( location ) => {
+	jest.spyOn( window, 'location', 'get' ).mockReturnValue( {
+		...window.location,
+		...location,
+	} );
+};
+
 describe( 'Header', () => {
 	beforeEach( () => {
 		// Mock RAF to be synchronous for testing
@@ -66,6 +73,22 @@ describe( 'Header', () => {
 		window.requestAnimationFrame.mockRestore();
 	} );
 
+	it( 'should render a back button and a custom title on task list pages', () => {
+		stubLocation( { href: 'http://localhost?task=payments' } );
+
+		const { queryByTestId, queryByText } = render(
+			<Header sections={ encodedBreadcrumb } isEmbedded={ false } />
+		);
+
+		expect(
+			queryByTestId( 'header-back-button' )
+		).not.toBeEmptyDOMElement();
+
+		expect(
+			queryByText( 'Choose payment methods' )
+		).not.toBeEmptyDOMElement();
+	} );
+
 	it( 'should render decoded breadcrumb name', () => {
 		const { queryByText } = render(
 			<Header sections={ encodedBreadcrumb } isEmbedded={ true } />

plugins/woocommerce-admin/readme.txt

@@ -86,12 +86,12 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Dev: Deprecate Onboarding::has_woocommerce_support. #6401
 - Fix: Broken link anchors to online documentation. #6455
 - Dev: Add Dependency Extraction Webpack Plugin #5762
+- Add: Back button to go to home screen from tasks in the task list. #6397
 - Fix: Update payment card style on mobile #6413
 - Fix: Missing i18n in Welcome modal. #6456
 - Fix: Restore visual styles back to Analytics tabs. #5913
 - Add: Add a "rather not say" option to revenue in the profile wizard. #6475
 
-
 == 2.1.0 ==
 
 - Dev: Allow highlight tooltip to use body tag as parent. #6309