Design Picker: Fix selecting Assembler CTA doesn't go to the editor o…

…n mobile

client/components/themes-list/index.jsx

@@ -61,7 +61,12 @@ export const ThemesList = ( { tabFilter, ...props } ) => {
 
 	const selectedSite = useSelector( getSelectedSite );
 	const isLoggedIn = useSelector( isUserLoggedIn );
-	const siteEditorUrl = useSelector( ( state ) => getSiteEditorUrl( state, selectedSite?.ID ) );
+	const siteEditorUrl = useSelector( ( state ) =>
+		getSiteEditorUrl( state, selectedSite?.ID, {
+			canvas: 'edit',
+			assembler: '1',
+		} )
+	);
 
 	const isPatternAssemblerCTAEnabled =
 		! isLoggedIn || isEnabled( 'pattern-assembler/logged-in-showcase' );

client/landing/stepper/declarative-flow/import-flow.ts

@@ -145,8 +145,8 @@ const importFlow: Flow = {
 				}
 
 				case 'designSetup': {
-					const _selectedDesign = providedDependencies?.selectedDesign as Design;
-					if ( isAssemblerDesign( _selectedDesign ) ) {
+					const { selectedDesign: _selectedDesign, shouldGoToAssembler } = providedDependencies;
+					if ( isAssemblerDesign( _selectedDesign as Design ) && shouldGoToAssembler ) {
 						return navigate( 'patternAssembler' );
 					}
 

client/landing/stepper/declarative-flow/internals/analytics/record-design.ts

@@ -1,4 +1,9 @@
-import { Design, StyleVariation, isAssemblerDesign } from '@automattic/design-picker';
+import {
+	Design,
+	StyleVariation,
+	isAssemblerDesign,
+	shouldGoToAssembler,
+} from '@automattic/design-picker';
 import { getVariationTitle, getVariationType } from '@automattic/global-styles';
 import { resolveDeviceTypeByViewPort } from '@automattic/viewport';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
@@ -54,7 +59,7 @@ export function recordSelectedDesign( {
 
 export function getDesignTypeProps( design?: Design ) {
 	return {
-		goes_to_assembler_step: isAssemblerDesign( design ),
+		goes_to_assembler_step: isAssemblerDesign( design ) && shouldGoToAssembler(),
 		assembler_source: getAssemblerSource( design ),
 	};
 }

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -13,6 +13,7 @@ import {
 	useCategorizationFromApi,
 	getDesignPreviewUrl,
 	isBlankCanvasDesign,
+	isAssemblerDesign,
 } from '@automattic/design-picker';
 import { useLocale } from '@automattic/i18n-utils';
 import { StepContainer } from '@automattic/onboarding';
@@ -463,6 +464,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 			handleSubmit( {
 				selectedDesign: _selectedDesign,
 				selectedSiteCategory: categorization.selection,
+				shouldGoToAssemblerStep,
 			} );
 		} else {
 			pickDesign( design );
@@ -471,7 +473,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 
 	function handleSubmit( providedDependencies?: ProvidedDependencies, optionalProps?: object ) {
 		const _selectedDesign = providedDependencies?.selectedDesign as Design;
-		if ( _selectedDesign?.design_type !== 'assembler' ) {
+		if ( ! isAssemblerDesign( _selectedDesign ) ) {
 			recordSelectedDesign( {
 				flow,
 				intent,

client/landing/stepper/declarative-flow/site-setup-flow.ts

@@ -268,8 +268,8 @@ const siteSetupFlow: Flow = {
 				}
 
 				case 'designSetup': {
-					const _selectedDesign = providedDependencies?.selectedDesign as Design;
-					if ( isAssemblerDesign( _selectedDesign ) ) {
+					const { selectedDesign: _selectedDesign, shouldGoToAssembler } = providedDependencies;
+					if ( isAssemblerDesign( _selectedDesign as Design ) && shouldGoToAssembler ) {
 						return navigate( 'patternAssembler' );
 					}
 

client/signup/config/flows.js

@@ -4,9 +4,9 @@ import {
 	DOT_ORG_THEME,
 	WOOCOMMERCE_THEME,
 	MARKETPLACE_THEME,
+	shouldGoToAssembler,
 } from '@automattic/design-picker';
 import { isSiteAssemblerFlow } from '@automattic/onboarding';
-import { isWithinBreakpoint } from '@automattic/viewport';
 import { get, includes, reject } from 'lodash';
 import detectHistoryNavigation from 'calypso/lib/detect-history-navigation';
 import { getQueryArgs } from 'calypso/lib/query-args';
@@ -117,9 +117,8 @@ function getThankYouNoSiteDestination() {
 
 function getChecklistThemeDestination( { flowName, siteSlug, themeParameter } ) {
 	if ( isSiteAssemblerFlow( flowName ) && themeParameter === DEFAULT_ASSEMBLER_DESIGN.slug ) {
-		// Go to the site assembler flow if viewport width >= 960px as the layout doesn't support small
-		// screen for now.
-		if ( isWithinBreakpoint( '>=960px' ) ) {
+		// Check whether to go to the assembler. If not, go to the site editor directly
+		if ( shouldGoToAssembler() ) {
 			return addQueryArgs(
 				{
 					theme: themeParameter,
@@ -130,8 +129,14 @@ function getChecklistThemeDestination( { flowName, siteSlug, themeParameter } )
 			);
 		}
 
-		return `/site-editor/${ siteSlug }`;
+		const params = new URLSearchParams( {
+			canvas: 'edit',
+			assembler: '1',
+		} );
+
+		return `/site-editor/${ siteSlug }?${ params }`;
 	}
+
 	return `/home/${ siteSlug }`;
 }
 

client/state/selectors/get-site-editor-url.js

@@ -6,11 +6,12 @@ import { getSiteAdminUrl } from 'calypso/state/sites/selectors';
  *
  * @param {Object} state  Global state tree
  * @param {?number} siteId Site ID
+ * @param {?Object} queryArgs The query arguments append to the Url
  * @returns {string} Url of site editor instance for calypso or wp-admin.
  */
-export const getSiteEditorUrl = ( state, siteId ) => {
+export const getSiteEditorUrl = ( state, siteId, queryArgs = {} ) => {
 	const siteAdminUrl = getSiteAdminUrl( state, siteId );
-	const queryArgs = {};
+
 	// Only add the origin if it's not wordpress.com.
 	if ( typeof window !== 'undefined' && window.location.origin !== 'https://wordpress.com' ) {
 		queryArgs.calypso_origin = window.location.origin;

packages/design-picker/package.json

@@ -35,6 +35,7 @@
 		"@automattic/js-utils": "workspace:^",
 		"@automattic/onboarding": "workspace:^",
 		"@automattic/typography": "workspace:^",
+		"@automattic/viewport": "workspace:^",
 		"@tanstack/react-query": "^4.29.1",
 		"@wordpress/components": "^23.0.0",
 		"@wordpress/react-i18n": "^3.21.0",

packages/design-picker/src/index.ts

@@ -19,6 +19,7 @@ export {
 	isBlankCanvasDesign,
 	isDefaultGlobalStylesVariationSlug,
 	getMShotOptions,
+	shouldGoToAssembler,
 } from './utils';
 export {
 	FONT_PAIRINGS,

packages/design-picker/src/utils/designs.ts

@@ -1,3 +1,4 @@
+import { isWithinBreakpoint } from '@automattic/viewport';
 import { addQueryArgs } from '@wordpress/url';
 import { DEFAULT_VIEWPORT_HEIGHT } from '../constants';
 import type { Design, DesignPreviewOptions } from '../types';
@@ -66,3 +67,7 @@ export const getDesignPreviewUrl = (
 };
 
 export const isAssemblerDesign = ( design?: Design ) => design?.design_type === 'assembler';
+
+// Go to the assembler only when the viewport width >= 960px as the it doesn't support small
+// screen for now.
+export const shouldGoToAssembler = () => isWithinBreakpoint( '>=960px' );

yarn.lock

@@ -627,6 +627,7 @@ __metadata:
     "@automattic/js-utils": "workspace:^"
     "@automattic/onboarding": "workspace:^"
     "@automattic/typography": "workspace:^"
+    "@automattic/viewport": "workspace:^"
     "@tanstack/react-query": ^4.29.1
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^14.0.0