MU WPCOM: Port override-preview-button-url feature from ETK (#38196)

* MU WPCOM: Port override-preview-button-url feature from ETK

* changelog

* Load feature only on simple sites

projects/packages/jetpack-mu-wpcom/changelog/mu-wpcom-override-preview-button-url

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+MU WPCOM: Port override-preview-button-url feature from ETK

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -99,6 +99,7 @@ public static function load_features() {
 		require_once __DIR__ . '/features/import-customizations/import-customizations.php';
 		require_once __DIR__ . '/features/marketplace-products-updater/class-marketplace-products-updater.php';
 		require_once __DIR__ . '/features/media/heif-support.php';
+		require_once __DIR__ . '/features/override-preview-button-url/override-preview-button-url.php';
 		require_once __DIR__ . '/features/site-editor-dashboard-link/site-editor-dashboard-link.php';
 		require_once __DIR__ . '/features/wpcom-block-editor/class-jetpack-wpcom-block-editor.php';
 		require_once __DIR__ . '/features/wpcom-block-editor/functions.editor-type.php';

projects/packages/jetpack-mu-wpcom/src/features/override-preview-button-url/override-preview-button-url.js

@@ -0,0 +1,33 @@
+import { use } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * The gutenberg block editor preview button opens a new window to a simple site's mapped
+ * domain.
+ * Adds logmein query param to editor draft post preview url to add WordPress cookies in
+ * a first party context ( allowing us to avoid third party cookie issues )
+ */
+async function overridePreviewButtonUrl() {
+	use( registry => {
+		return {
+			dispatch: store => {
+				const namespace = store.name ?? store;
+				const actions = { ...registry.dispatch( namespace ) };
+
+				if ( namespace === 'core/editor' && actions.__unstableSaveForPreview ) {
+					const { __unstableSaveForPreview } = actions;
+					actions.__unstableSaveForPreview = async ( ...args ) => {
+						const link = await __unstableSaveForPreview( ...args );
+						return link.startsWith( window.location.origin )
+							? link
+							: addQueryArgs( link, { logmein: 'direct' } );
+					};
+				}
+
+				return actions;
+			},
+		};
+	} );
+}
+
+overridePreviewButtonUrl();

projects/packages/jetpack-mu-wpcom/src/features/override-preview-button-url/override-preview-button-url.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Apply the new font-smoothing styles.
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+use Automattic\Jetpack\Jetpack_Mu_Wpcom;
+
+// Turn off the feature on ETK plugin.
+define( 'MU_WPCOM_OVERRIDE_PREVIEW_BUTTON_URL', true );
+
+/**
+ * Check if the feature should be loaded.
+ *
+ * @return bool
+ */
+function should_load_override_preview_button_url() {
+	if ( ! class_exists( 'Automattic\Jetpack\Status\Host' ) ) {
+		return false;
+	}
+
+	$host = new Automattic\Jetpack\Status\Host();
+	if ( ! $host->is_wpcom_simple() ) {
+		return false;
+	}
+
+	global $pagenow;
+	$allowed_pages = array(
+		'post.php',
+		'post-new.php',
+	);
+	return isset( $pagenow ) && in_array( $pagenow, $allowed_pages, true );
+}
+
+/**
+ * Enqueue assets
+ */
+function wpcom_enqueue_override_preview_button_url_assets() {
+	if ( ! should_load_override_preview_button_url() ) {
+		return;
+	}
+
+	$asset_file          = include Jetpack_Mu_Wpcom::BASE_DIR . 'build/override-preview-button-url/override-preview-button-url.asset.php';
+	$script_dependencies = $asset_file['dependencies'] ?? array();
+	$script_version      = $asset_file['version'] ?? filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/override-preview-button-url/override-preview-button-url.js' );
+	$script_id           = 'wpcom-override-preview-button-url-script';
+
+	wp_enqueue_script(
+		$script_id,
+		plugins_url( 'build/override-preview-button-url/override-preview-button-url.js', Jetpack_Mu_Wpcom::BASE_FILE ),
+		$script_dependencies,
+		$script_version,
+		true
+	);
+}
+add_action( 'admin_enqueue_scripts', 'wpcom_enqueue_override_preview_button_url_assets' );

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -16,6 +16,8 @@ module.exports = [
 			'core-customizer-css-preview':
 				'./src/features/custom-css/custom-css/js/core-customizer-css-preview.js',
 			'customizer-control': './src/features/custom-css/custom-css/css/customizer-control.css',
+			'override-preview-button-url':
+				'./src/features/override-preview-button-url/override-preview-button-url.js',
 		},
 		mode: jetpackConfig.mode,
 		devtool: jetpackConfig.devtool,