Fix product task text shown before accordion is expanded on stack layout

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.scss

@@ -22,7 +22,7 @@
 		color: #007cba;
 		padding: 0;
 		height: fit-content;
-		margin-top: 25px;
+		margin-top: 21px;
 		justify-content: center;
 
 		svg {

plugins/woocommerce-admin/client/tasks/fills/experimental-products/index.tsx

@@ -116,6 +116,7 @@ export const Products = () => {
 							<Stack
 								items={ visibleProductTypes }
 								onClickLoadSampleProduct={ loadSampleProduct }
+								showOtherOptions={ isExpanded }
 							/>
 						) : (
 							<CardLayout items={ visibleProductTypes } />

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.scss

@@ -67,6 +67,7 @@
 	.woocommerce-stack__other-options {
 		display: block;
 		margin-top: 20px;
+		margin-bottom: 4px;
 		color: $gray-700;
 		line-height: 16px;
 	}

plugins/woocommerce-admin/client/tasks/fills/experimental-products/stack.tsx

@@ -18,52 +18,55 @@ type StackProps = {
 		onClick: () => void;
 	} )[];
 	onClickLoadSampleProduct: () => void;
+	showOtherOptions?: boolean;
 };
 
 const Stack: React.FC< StackProps > = ( {
 	items,
 	onClickLoadSampleProduct,
+	showOtherOptions = true,
 } ) => {
 	return (
 		<div className="woocommerce-products-stack">
 			<List items={ items } />
-			<Text className="woocommerce-stack__other-options">
+			{ showOtherOptions && (
-				{ interpolateComponents( {
+				<Text className="woocommerce-stack__other-options">
-					mixedString: __(
+					{ interpolateComponents( {
-						'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
+						mixedString: __(
-						'woocommerce'
+							'Can’t find your product type? {{sbLink}}Start Blank{{/sbLink}} or {{LspLink}}Load Sample Products{{/LspLink}} to see what they look like in your store.',
-					),
+							'woocommerce'
-					components: {
-						sbLink: (
-							<Link
-								onClick={ () => {
-									window.location = getAdminLink(
-										'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
-									);
-									return false;
-								} }
-								href=""
-								type="wc-admin"
-							>
-								<></>
-							</Link>
 						),
-						LspLink: (
+						components: {
-							// TODO: Update this to the load sample product.
+							sbLink: (
-							<Link
+								<Link
-								href=""
+									onClick={ () => {
-								type="wc-admin"
+										window.location = getAdminLink(
-								onClick={ () => {
+											'post-new.php?post_type=product&wc_onboarding_active_task=products&tutorial=true'
-									onClickLoadSampleProduct();
+										);
-									return false;
+										return false;
-								} }
+									} }
-							>
+									href=""
-								<></>
+									type="wc-admin"
-							</Link>
+								>
-						),
+									<></>
-					},
+								</Link>
-				} ) }
+							),
-			</Text>
+							LspLink: (
+								<Link
+									href=""
+									type="wc-admin"
+									onClick={ () => {
+										onClickLoadSampleProduct();
+										return false;
+									} }
+								>
+									<></>
+								</Link>
+							),
+						},
+					} ) }
+				</Text>
+			) }
 		</div>
 	);
 };

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/index.tsx

@@ -93,6 +93,10 @@ describe( 'Products', () => {
 		const fetchMock = jest.spyOn( global, 'fetch' );
 		const { queryByText, getByRole } = render( <Products /> );
 
+		userEvent.click(
+			getByRole( 'button', { name: 'View more product types' } )
+		);
+
 		expect( queryByText( 'Load Sample Products' ) ).toBeInTheDocument();
 
 		userEvent.click(

plugins/woocommerce-admin/client/tasks/fills/experimental-products/test/stack.tsx

@@ -27,6 +27,24 @@ describe( 'Stack', () => {
 		expect( queryAllByRole( 'link' ) ).toHaveLength( 2 );
 	} );
 
+	it( 'should not render other product options', () => {
+		const { queryByText } = render(
+			<Stack
+				showOtherOptions={ false }
+				onClickLoadSampleProduct={ () => {} }
+				items={ [
+					{
+						...productTypes[ 0 ],
+						onClick: () => {},
+					},
+				] }
+			/>
+		);
+
+		expect( queryByText( 'Start Blank' ) ).not.toBeInTheDocument();
+		expect( queryByText( 'Load Sample Products' ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'should call onClickLoadSampleProduct when the "Load Sample Products" link is clicked', async () => {
 		const onClickLoadSampleProduct = jest.fn();
 		const { getByRole } = render(