Untangle: Add banner to import.php for Classic style that points to C…

…alypso importer (#35351)

* Add initial files to customize import.php

* changelog

* Use version in wp_enqueue_style

* Linting

* Add import_page_customizations_init

* Fix Calypso import URL

* Try admin_init

* Fix Calypso Import URL

* Check wpcom_admin_interface option

* Add translations

* Use get_current_screen and scope CSS to import-php

* Update CTA copy

* Use CSS class and add ref to link

* Update copy

projects/packages/jetpack-mu-wpcom/changelog/add-import-admin-customizations

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Import: adds a banner to wp-admin linking to the Calypso import tool

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

@@ -37,6 +37,7 @@ public static function init() {
 		add_action( 'plugins_loaded', array( __CLASS__, 'load_launchpad' ), 0 );
 		add_action( 'plugins_loaded', array( __CLASS__, 'load_block_theme_previews' ) );
 		add_action( 'plugins_loaded', array( __CLASS__, 'load_site_editor_dashboard_link' ) );
+		add_action( 'plugins_loaded', array( __CLASS__, 'load_import_customizations' ) );
 
 		add_action( 'plugins_loaded', array( __CLASS__, 'load_marketplace_products_updater' ) );
 
@@ -266,4 +267,11 @@ public static function load_verbum_comments() {
 			new \Automattic\Jetpack\Verbum_Comments();
 		}
 	}
+
+	/**
+	 * Load import.php customizations.
+	 */
+	public static function load_import_customizations() {
+		require_once __DIR__ . '/features/import-customizations/import-customizations.php';
+	}
 }

projects/packages/jetpack-mu-wpcom/src/features/import-customizations/css/import-customizations.css

@@ -0,0 +1,27 @@
+.import-php .wrap {
+	display: grid; /* Use CSS grid to order elements */
+	grid-template-columns: 1fr;
+}
+.import-php .wrap > h1, .wrap > p:first-of-type {
+	order: 1; /* h1 and first p are placed first */
+}
+.import-php .wpcom-import-banner {
+	order: 2; /* Banner is placed second */
+	padding: 20px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	max-width: 726px;
+}
+.import-php .wpcom-import-banner p {
+	margin: 0;
+	flex-grow: 1;
+}
+.import-php .wpcom-import-banner a.button {
+	flex-shrink: 0;
+	margin-left: 20px;
+}
+.import-php .wrap > .importers {
+	order: 3; /* Table is placed third */
+	max-width: 771px;
+}

projects/packages/jetpack-mu-wpcom/src/features/import-customizations/import-customizations.php

@@ -0,0 +1,58 @@
+<?php // phpcs:ignore Squiz.Commenting.FileComment.Missing
+/**
+ * Customizations to the wp-admin/import.php page.
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+/**
+ * Only add_action if the current screen is the wp-admin/import.php page.
+ */
+function import_page_customizations_init() {
+	$screen = get_current_screen();
+
+	if ( $screen && $screen->id === 'import' ) {
+		// Only add the banner if the user is using the wp-admin interface.
+		if ( get_option( 'wpcom_admin_interface' ) === 'wp-admin' ) {
+			add_action( 'admin_notices', 'import_admin_banner' );
+			add_action( 'admin_enqueue_scripts', 'import_admin_banner_css' );
+		}
+	}
+}
+add_action( 'current_screen', 'import_page_customizations_init' );
+
+/**
+ * Displays a banner on the wp-admin/import.php page that links to the Calypso importer.
+ */
+function import_admin_banner() {
+	if ( ! function_exists( 'wpcom_get_site_slug' ) ) {
+		require_once __DIR__ . '/../../utils.php';
+	}
+
+	$site_slug  = wpcom_get_site_slug();
+	$import_url = esc_url( "https://wordpress.com/setup/import-focused/import?siteSlug={$site_slug}&ref=wp-admin" );
+
+	$banner_content = sprintf(
+		'<div class="notice wpcom-import-banner">
+			<p>%s</p>
+			<a href="%s" class="button">%s</a>
+		</div>',
+		esc_html__( 'Use WordPress.com’s guided importer to import posts and comments from Medium, Substack, Squarespace, Wix, and more.', 'jetpack-mu-wpcom' ),
+		$import_url,
+		esc_html__( 'Get started', 'jetpack-mu-wpcom' )
+	);
+
+	echo wp_kses_post( $banner_content );
+}
+
+/**
+ * Enqueues CSS for the wp-admin/import.php Calypso import banner.
+ */
+function import_admin_banner_css() {
+	$css_file_path = plugin_dir_path( __FILE__ ) . 'css/import-customizations.css';
+
+	if ( file_exists( $css_file_path ) ) {
+		$version = filemtime( $css_file_path );
+		wp_enqueue_style( 'import_admin_banner_css', plugin_dir_url( __FILE__ ) . 'css/import-customizations.css', array(), $version );
+	}
+}