Try using mshots for fetching vertically oriented screenshots in the …

…design step in Gutenboarding

client/landing/gutenboarding/available-designs.ts

@@ -21,16 +21,21 @@ export const getDesignImageUrl = ( design: Design ) => {
 	// See `bin/generate-gutenboarding-design-thumbnails.js` for generating screenshots.
 	// https://github.com/Automattic/mShots/issues/16
 	// https://github.com/Automattic/wp-calypso/issues/40564
-	if ( ! isEnabled( 'gutenboarding/mshot-preview' ) ) {
-		return `/calypso/page-templates/design-screenshots/${ design.slug }_${ design.template }_${ design.theme }.jpg`;
-	}
-
-	const mshotsUrl = 'https://s.wordpress.com/mshots/v1/';
+	// if ( ! isEnabled( 'gutenboarding/mshot-preview' ) ) {
+	// 	return `/calypso/page-templates/design-screenshots/${ design.slug }_${ design.template }_${ design.theme }.jpg`;
+	// }
+	const mshotsUrl = 'https://s0.wp.com/mshots/v1/';
 	const previewUrl = addQueryArgs( design.src, {
 		font_headings: design.fonts.headings,
 		font_base: design.fonts.base,
 	} );
-	return mshotsUrl + encodeURIComponent( previewUrl );
+	const mshotsRequest = addQueryArgs( mshotsUrl + encodeURIComponent( previewUrl ), {
+		vpw: 1200,
+		vph: 3072,
+		w: 900,
+		h: 1800,
+	} );
+	return mshotsRequest;
 };
 
 /**

client/landing/gutenboarding/components/mshots-image/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import * as React from 'react';
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+interface Props {
+	src: string;
+	alt: string;
+}
+
+const MshotsImage: React.FunctionComponent< Props > = ( { src, alt } ) => {
+	const [ resolvedUrl, setResolvedUrl ] = React.useState< string | undefined >();
+	const [ count, setCount ] = React.useState( 0 );
+
+	const mShotsEndpointUrl = src;
+
+	React.useEffect( () => {
+		async function fetchMshots() {
+			const response = await window.fetch( mShotsEndpointUrl, {
+				method: 'GET',
+				mode: 'cors',
+				cache: 'no-cache',
+			} );
+
+			if ( response.ok && response.headers.get( 'Content-Type' ) === 'image/jpeg' ) {
+				try {
+					const blob = await response.blob();
+					setResolvedUrl( window.URL.createObjectURL( blob ) );
+				} catch ( e ) {
+					setResolvedUrl( mShotsEndpointUrl );
+				}
+			}
+
+			if ( response.status === 307 ) {
+				const id = setTimeout( () => setCount( count + 1 ), 1000 );
+				return () => clearTimeout( id );
+			}
+		}
+		fetchMshots();
+	}, [ mShotsEndpointUrl, count ] );
+
+	return (
+		<div className="mshots-image">
+			{ ! resolvedUrl && <p>Loading...</p> }
+			{ resolvedUrl && <img src={ src } alt={ alt } /> }
+		</div>
+	);
+};
+
+export default MshotsImage;

client/landing/gutenboarding/onboarding-block/design-selector/index.tsx

@@ -15,6 +15,7 @@ import { SubTitle, Title } from '../../components/titles';
 import { useTrackStep } from '../../hooks/use-track-step';
 import useStepNavigation from '../../hooks/use-step-navigation';
 import Badge from '../../components/badge';
+import MshotsImage from '../../components/mshots-image';
 import designs, { getDesignImageUrl } from '../../available-designs';
 import JetpackLogo from 'components/jetpack-logo'; // @TODO: extract to @automattic package
 import type { Design } from '../../stores/onboard/types';
@@ -69,11 +70,12 @@ const DesignSelector: React.FunctionComponent = () => {
 							} }
 						>
 							<span className="design-selector__image-frame">
-								<img
+								<MshotsImage src={ getDesignImageUrl( design ) } alt="" />
+								{ /* <img
 									alt=""
 									aria-labelledby={ makeOptionId( design ) }
 									src={ getDesignImageUrl( design ) }
-								/>
+								/> */ }
 							</span>
 							<span className="design-selector__option-overlay">
 								<span id={ makeOptionId( design ) } className="design-selector__option-meta">