diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-wpcom-importer-banner b/projects/packages/jetpack-mu-wpcom/changelog/update-wpcom-importer-banner new file mode 100644 index 0000000000000..9ab81a93e3079 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/update-wpcom-importer-banner @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: Update the WPCOM importer card in wp-admin/import for Simple and Atomic sites + + diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php index fe5ba2886dc38..b8ed46039d033 100644 --- a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php +++ b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php @@ -274,7 +274,6 @@ public static function load_features() { require_once __DIR__ . '/features/font-smoothing-antialiased/font-smoothing-antialiased.php'; require_once __DIR__ . '/features/google-analytics/google-analytics.php'; require_once __DIR__ . '/features/holiday-snow/class-holiday-snow.php'; - require_once __DIR__ . '/features/import-customizations/import-customizations.php'; require_once __DIR__ . '/features/launch-button/index.php'; require_once __DIR__ . '/features/logo-tool/logo-tool.php'; require_once __DIR__ . '/features/marketplace-products-updater/class-marketplace-products-updater.php'; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/import-customizations/css/import-customizations.css b/projects/packages/jetpack-mu-wpcom/src/features/import-customizations/css/import-customizations.css deleted file mode 100644 index e77aee97c1bfc..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/import-customizations/css/import-customizations.css +++ /dev/null @@ -1,38 +0,0 @@ -.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: 2; /* h1 and p are placed after the banner */ -} - -.wrap > p:last-of-type { - order: 3; -} - -.import-php .wpcom-import-banner { - order: 1; /* Banner is placed as the first element */ - padding: 20px; - display: flex; - justify-content: space-between; - align-items: center; - max-width: 726px; - margin-top: 15px; -} - -.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; -} diff --git a/projects/packages/jetpack-mu-wpcom/src/features/import-customizations/import-customizations.php b/projects/packages/jetpack-mu-wpcom/src/features/import-customizations/import-customizations.php deleted file mode 100644 index b93e077900857..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/import-customizations/import-customizations.php +++ /dev/null @@ -1,66 +0,0 @@ -id === 'import' && $is_main_import_page ) { - 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( 'get_wpcom_blog_id' ) ) { - require_once __DIR__ . '/../../utils.php'; - } - - $blog_id = get_wpcom_blog_id(); - if ( false === $blog_id ) { - return; - } - - $import_url = esc_url( "https://wordpress.com/setup/site-setup/importList?siteId={$blog_id}&ref=wp-admin-importers-list" ); - - $banner_content = sprintf( - '

%s

%s', - esc_html__( 'Use WordPress.com’s guided importer to migrate your entire WordPress site or simply import posts and comments from WordPress, Medium, Substack, Squarespace, Wix, and more.', 'jetpack-mu-wpcom' ), - $import_url, - esc_html__( 'Get started', 'jetpack-mu-wpcom' ) - ); - - wp_admin_notice( - wp_kses_post( $banner_content ), - array( - 'paragraph_wrap' => false, - 'additional_classes' => array( 'wpcom-import-banner', 'notice-info' ), - ) - ); -} - -/** - * 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 ); - } -} diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-importer-entry.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-importer-entry.js new file mode 100644 index 0000000000000..c8fe16feb9328 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-importer-entry.js @@ -0,0 +1,45 @@ +/* global wp, wpcomImporterData */ + +/** + * Create the HTML markup for the WPCOM Importer card. + * + * @param {number} width - The width in pixels for the import system cell. + * @return {string} HTML markup for the WPCOM Importer card table. + */ +function wpcomImporterEntry( width ) { + return ( + '' + + '' + + '' + + '' + + '' + + '
' + + 'WordPress.com' + + '' + + wp.i18n.__( 'Run Importer', 'jetpack-mu-wpcom' ) + + '' + + '' + + '' + + wp.i18n.__( + 'Effortless WordPress migrations, plus content imports from platforms like Medium and Squarespace - no plugins or technical setup required.', + 'jetpack-mu-wpcom' + ) + + '' + + '
' + ); +} + +wp.domReady( function () { + const targetElement = document.querySelector( '.widefat.importers.striped' ); + // 24 is the padding size. + const width = targetElement.rows[ 0 ].cells[ 0 ].clientWidth - 24; + if ( targetElement ) { + targetElement.insertAdjacentHTML( 'beforebegin', wpcomImporterEntry( width ) ); + } +} ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-imports.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-imports.php index 1ba96b090363c..c56948e1d10da 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-imports.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-imports/wpcom-imports.php @@ -107,3 +107,33 @@ function wpcom_import_update_wordpress_url_on_simple( $url, $importer_type ) { * Although the hook is prefixed with wp_*, it's actually a custom WPCOM one that's only executed on Simple Sites. */ add_action( 'wp_import_run_import_url_filter', 'wpcom_import_update_wordpress_url_on_simple', 11, 2 ); + +/** + * Enqueue the wpcom importer entry script. + */ +function wpcom_imports_enqueue_script() { + wp_enqueue_script( + 'wpcom-importer-entry', + plugins_url( 'wpcom-importer-entry.js', __FILE__ ), + array( 'wp-i18n', 'wp-dom-ready' ), + '1.0.0', + true + ); + + $domain = wp_parse_url( home_url(), PHP_URL_HOST ); + $site_id = get_wpcom_blog_id(); + + $url = 'https://wordpress.com/setup/site-migration/site-migration-identify?hide_importer_link=true&siteSlug=' . $domain . '&siteId=' . $site_id; + + wp_add_inline_script( + 'wpcom-importer-entry', + 'const wpcomImporterData = ' . wp_json_encode( + array( + 'wpcomImporterUrl' => $url, + ) + ) . ';', + 'before' + ); +} + +add_action( 'admin_print_styles-import.php', 'wpcom_imports_enqueue_script' );