[Editor preview]: Use unmapped hostname for the preview (#39859)

* This is a test to see whether using the unmapped site urls for the preview window iframe urls will prevent reoccuring 404s. See: p58i-89x-p2

* Because we can login to calypso.localhost:3000 using Safari (thanks to ITP) we could try to push this to horizon to test

* Removing the feature wrapper so we roll out to production

client/gutenberg/editor/calypsoify-iframe.tsx

@@ -440,16 +440,23 @@ class CalypsoifyIframe extends Component< Props & ConnectedProps & ProtectedForm
 		previewPort.onmessage = ( message: MessageEvent ) => {
 			previewPort.close();
 
-			const { frameNonce } = this.props;
+			const { frameNonce, unmappedSiteUrl } = this.props;
 			const { previewUrl, editedPost } = message.data;
-
 			const parsedPreviewUrl = url.parse( previewUrl, true );
+
 			if ( frameNonce ) {
 				parsedPreviewUrl.query[ 'frame-nonce' ] = frameNonce;
 			}
+
 			parsedPreviewUrl.query.iframe = 'true';
 			delete parsedPreviewUrl.search;
 
+			const { host: unmappedSiteUrlHost } = url.parse( unmappedSiteUrl );
+			if ( unmappedSiteUrlHost ) {
+				parsedPreviewUrl.host = unmappedSiteUrlHost;
+				parsedPreviewUrl.hostname = unmappedSiteUrlHost;
+			}
+
 			this.setState( {
 				previewUrl: url.format( parsedPreviewUrl ),
 				editedPost,
@@ -683,6 +690,7 @@ const mapStateToProps = (
 			partial.placeholder,
 			'wp_template_part'
 		),
+		unmappedSiteUrl: getSiteOption( state, siteId, 'unmapped_url' ),
 	};
 };