Untangle: Add banner to import.php for Classic style that points to Calypso importer #35351

DustyReagan · 2024-01-30T20:49:08Z

Fixes https://github.com/Automattic/dotcom-forge/issues/5262

Proposed changes:

This PR uses admin_notices to create a banner on top of wp-admin/import.php with a CTA to direct the user to the Calypso import tool (found at https://wordpress.com/setup/import-focused/import?siteSlug=[site_slug])
CSS grid is used to place the banner directly above the table of registered importers.
The banner is inserted using action hooks and ONLY if the wpcom_admin_interface option is set wp-admin AKA the "Classic style".
The sibling PR Untangle: Remove the Import screen exception for Classic admin style #35258 will update the Masterbar menu item to redirect the Import menu item from Calypso to import.php.
The proposed banner copy is "Import your content with WordPress.com’s guided importer. Designed for seamless integration from multiple platforms." and the CTA is "Get started" (As seen in the screenshot below.)
The CTA click tracking is handled by ref in the URL. While that doesn't track clicks directly, it sets the reference on the destination page, so we know they came from this CTA.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Make sure you have the Jetpack Beta plugin on the WoA site
Make sure you have define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); in your wp-config.php
Choose "WordPress.com Features" in /wp-admin/admin.php?page=jetpack-beta
Search for the feature branch add/import-admin-customizations
Go to /wp-admin/import.php

github-actions · 2024-01-30T20:49:58Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/import-admin-customizations branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/import-admin-customizations

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2024-01-30T20:50:20Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

candy02058912

To my understanding, we haven't switched it over where it's accessed by the Tools > Import menu and have to access directly from /wp-admin/import.php?

Here's what I tested by directly accessing /wp-admin/import.php

Before	After

DustyReagan · 2024-01-31T20:38:48Z

To my understanding, we haven't switched it over where it's accessed by the Tools > Import menu and have to access directly from /wp-admin/import.php?

That is correct. There is a seperate PR #35258 that will point the Masterbar Import menu from Calypso to /wp-admin/import.php.

candy02058912 · 2024-02-01T07:10:58Z

@okmttdhr I've updated the testing instructions to the PR, you'll also need to have

define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true );

in your wp-config.php file.

okmttdhr · 2024-02-01T07:19:30Z

Worked well, thanks!

JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN

This was mentioned in this comment as well 🙈: #35351 (comment)

candy02058912

LGTM 👍

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

okmttdhr · 2024-02-01T07:24:36Z

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

+	$screen = get_current_screen();
+
+	if ( $screen && $screen->id === 'import' ) {


Would it be better if we move this condition to load_import_customizations? 👀

I'm unsure that would work because load_import_customizations is added during the plugins_loaded action. But our get_current_screen conditional happens on the current_screen action. So, if we moved it over to load_import_customizations, we'd still need to add a callback on the current_screen hook.

🤔 Maybe we could move the wpcom_admin_interface option conditional over to load_import_customizations, but I imagined maybe "import_customizations" could be expanded in the future outside of the scope of the admin interface style. Probably not, but that's where my thoughts were. 😆

lupus2k

It works great, my only concern is the "Back to goals" button on the importer, we can create a follow up for this.

JOzUQo.mp4

okmttdhr

👍

kristastevens · 2024-02-02T14:52:00Z

Hello, following up on a Slack ping for copy review!

I have a question. The proposed copy currently reads:

Import your content with WordPress.com's guided importer. Designed for seamless integration from multiple platforms. [Get started]

What is the benefit for the user if they choose the [Get started] button vs. clicking the link underneath any of the given platforms?

DustyReagan · 2024-02-02T15:04:55Z

What is the benefit for the user if they choose the [Get started] button vs. clicking the link underneath any of the given platforms?

@kristastevens, this P2 explains it in a bit more detail pfsHM7-R-p2. But in summary, the "Get started" button links to the Calypso importer, which offers the ability to import from Medium, Squarespace, and Wix, which is not possible anywhere else. (Importer plugins do not exist for those platforms.) Calypso can also import from other platforms like Substack, WordPress, and possibly others. Additionally, it offers a guided "wizard" like experience (Seen here: https://wordpress.com/setup/import-focused/import) We want to serve the user the core wp-admin/import.php page, but we don't want to hide the abilities of the Calypso importer from them.

kristastevens · 2024-02-02T15:12:13Z

Thanks @DustyReagan, that's helpful! How about this for a proposed wording:

Use WordPress.com's guided importer to import posts and comments from Medium, Substack, Squarespace, Wix, and more. [Get started]

DustyReagan · 2024-02-02T15:17:07Z

Thanks @DustyReagan, that's helpful! How about this for a proposed wording:

Use WordPress.com's guided importer to import posts and comments from Medium, Substack, Squarespace, Wix, and more. [Get started]

Sounds great, @kristastevens. Thank you!

lupus2k

Copy looks great!

…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

DustyReagan added 2 commits January 30, 2024 14:47

Add initial files to customize import.php

e6f3243

changelog

4b68f7b

github-actions bot added [Package] Jetpack mu wpcom WordPress.com Features [mu wpcom Feature] Import Customizations labels Jan 30, 2024

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jan 30, 2024

DustyReagan added 8 commits January 30, 2024 17:19

Use version in wp_enqueue_style

48b9839

Linting

f082223

Add import_page_customizations_init

95be730

Fix Calypso import URL

4ecab79

Try admin_init

f217ce2

Fix Calypso Import URL

2701dca

Check wpcom_admin_interface option

0935c9e

Add translations

d2171ab

DustyReagan changed the title ~~Add/import admin customizations~~ Add banner to import.php for Classic style that points to Calypso importer Jan 31, 2024

candy02058912 reviewed Jan 31, 2024

View reviewed changes

DustyReagan added 2 commits January 31, 2024 11:39

Use get_current_screen and scope CSS to import-php

5eec699

Update CTA copy

ae9d057

DustyReagan added the [Status] Needs Copy Review Copy has been added. Marketing will be notified for a copy review. label Jan 31, 2024

github-actions bot added the [Status] Editorial Input Requested label Jan 31, 2024

DustyReagan requested review from a team January 31, 2024 20:39

DustyReagan added [Status] Needs Team Review and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Jan 31, 2024

DustyReagan changed the title ~~Add banner to import.php for Classic style that points to Calypso importer~~ Untangle: Add banner to import.php for Classic style that points to Calypso importer Jan 31, 2024

DustyReagan self-assigned this Jan 31, 2024

DustyReagan mentioned this pull request Jan 31, 2024

Untangle: Point /import to wp-admin and register "fake" missing importers #35233

Closed

3 tasks

This comment was marked as resolved.

Sign in to view

candy02058912 previously approved these changes Feb 1, 2024

View reviewed changes

okmttdhr reviewed Feb 1, 2024

View reviewed changes

Use CSS class and add ref to link

88693c5

DustyReagan dismissed candy02058912’s stale review via 88693c5 February 1, 2024 16:26

lupus2k previously approved these changes Feb 1, 2024

View reviewed changes

okmttdhr previously approved these changes Feb 2, 2024

View reviewed changes

Update copy

00bacec

DustyReagan dismissed stale reviews from okmttdhr and lupus2k via 00bacec February 2, 2024 21:56

lupus2k approved these changes Feb 5, 2024

View reviewed changes

DustyReagan merged commit 7e568dc into trunk Feb 5, 2024
52 checks passed

DustyReagan deleted the add/import-admin-customizations branch February 5, 2024 16:02

github-actions bot removed [Status] Needs Copy Review Copy has been added. Marketing will be notified for a copy review. [Status] Needs Team Review [Status] Editorial Input Requested labels Feb 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Untangle: Add banner to import.php for Classic style that points to Calypso importer #35351

Untangle: Add banner to import.php for Classic style that points to Calypso importer #35351

DustyReagan commented Jan 30, 2024 •

edited

Loading

github-actions bot commented Jan 30, 2024 •

edited

Loading

github-actions bot commented Jan 30, 2024 •

edited

Loading

candy02058912 left a comment

DustyReagan commented Jan 31, 2024

This comment was marked as resolved.

This comment was marked as resolved.

candy02058912 commented Feb 1, 2024

okmttdhr commented Feb 1, 2024

candy02058912 left a comment

okmttdhr Feb 1, 2024

DustyReagan Feb 1, 2024

lupus2k left a comment

okmttdhr left a comment

kristastevens commented Feb 2, 2024

DustyReagan commented Feb 2, 2024

kristastevens commented Feb 2, 2024

DustyReagan commented Feb 2, 2024

lupus2k left a comment

		$screen = get_current_screen();

		if ( $screen && $screen->id === 'import' ) {

Untangle: Add banner to import.php for Classic style that points to Calypso importer #35351

Untangle: Add banner to import.php for Classic style that points to Calypso importer #35351

Conversation

DustyReagan commented Jan 30, 2024 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Jan 30, 2024 • edited Loading

github-actions bot commented Jan 30, 2024 • edited Loading

candy02058912 left a comment

Choose a reason for hiding this comment

DustyReagan commented Jan 31, 2024

This comment was marked as resolved.

This comment was marked as resolved.

candy02058912 commented Feb 1, 2024

okmttdhr commented Feb 1, 2024

candy02058912 left a comment

Choose a reason for hiding this comment

okmttdhr Feb 1, 2024

Choose a reason for hiding this comment

DustyReagan Feb 1, 2024

Choose a reason for hiding this comment

lupus2k left a comment

Choose a reason for hiding this comment

okmttdhr left a comment

Choose a reason for hiding this comment

kristastevens commented Feb 2, 2024

DustyReagan commented Feb 2, 2024

kristastevens commented Feb 2, 2024

DustyReagan commented Feb 2, 2024

lupus2k left a comment

Choose a reason for hiding this comment

DustyReagan commented Jan 30, 2024 •

edited

Loading

github-actions bot commented Jan 30, 2024 •

edited

Loading

github-actions bot commented Jan 30, 2024 •

edited

Loading