Display location-aware snackbar upon loading the site editor

[mmtr]

Fixes Automattic/wp-calypso#71274

Proposed changes:

Adds a new Gutenberg extension that only runs in the site editor. The new extension shows a snackbar after entering the edit mode to better inform users what's being edited.

Template	Template part

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

N/A

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

No

Testing instructions:

• Apply these changes to a test site:
  • Jetpack site: Spin up a JN site running this branch and activate the latest version of Gutenberg.
  • WP.com Simple site: Run bin/jetpack-downloader test jetpack add/site-editor-snackbar-load on your sandbox.
  • WP.com Atomic site: Install Jetpack Beta and activate this branch.
• Go to Appearance > Editor.
• Make sure no snackbars are displayed when you're on the view/readonly mode.
  • Note that this mode is only available in recent versions of Gutenberg.
  • Also note that this mode is skipped in WP.com when accessing the site editor via Calypso.
• Select a template or template part and enter the edit mode.
• Make sure a snackbar is displayed indicating the title and type of the entity being edited.
• Go to Posts > Add New.
• Make sure no snackbars are displayed and that there aren't any JS errors produced by these changes.
• Deactivate the Gutenberg plugin (note that this is only possible on a Jetpack / Atomic site).
• Go to Appearance > Editor.
• Make sure no snackbars are displayed and that there aren't any JS errors produced by these changes.

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack add/site-editor-snackbar-load

to get started. More details: p9dueE-5Nn-p2

[github-actions]

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.
  
• ✅ All commits were linted before commit.
  
• ✅ 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 (other than "Required review") 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 you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: March 7, 2023.
• Scheduled code freeze: February 28, 2023.

[Copons]

cc @davewhitley for a design review.

For additional context, this was originally requested here: pc4f5j-2wc-p2#comment-2997 ("Way finding" section).

[dsas]

This only works on the initial load of the page. It doesn't work if you change templates. I think this is fine because if you've just explicitly chosen to edit something, it seems a bit repetitive to confirm that yes you are editing the thing you just chose to edit.

Edit: Oh actually it's not a load thing. If I get to template (part) list via the central drop down I don't get a snackbar, but if I get to it via the W menu I do get a snackbar.

wsNJa7.mov

[mmtr]

If I get to template (part) list via the central drop down I don't get a snackbar, but if I get to it via the W menu I do get a snackbar.

Good catch! Should be solved as of 8c73f07.

[jeherve]

This tests well for me. 🚢

[Copons]

wsNJa7.mov

I haven't tested this but in @dsas's video I can see a Editing the Home snackbar missing the entity type 🤔
Was that corrected by 8c73f07?

Besides that, I'd like to have a design 👀 before shipping. We can wait, as this is not a critical change. 🙂

[mmtr]

Was that corrected by 8c73f07?

Yes!

[dsas]

This isn't appearing when I go via the link-in-bio flow and newsletter flow, the snackbar isn't appearing. Should it? 🤔

[mmtr]

@dsas It should and it does for me:

Screen.Recording.2023-02-09.at.12.07.17.mov

Did you sandbox the new site before entering the site editor?

[dsas]

Did you sandbox the new site before entering the site editor?

Maybe not. I can't get the link-in-bio flow to give me a tld that isn't a .link (which is intentional) and I don't seem to be able to sandbox .link sites 😕 .

Given your video above, I'm sure it's must be working....Saying "Editing the Blank template" is technically correct, but also sort of odd from a user point-of-view.

[davewhitley]

looks good 👍

[jeherve]

@mmtr Does this still work for you? I may be missing something, but I do not see the snackbar when editing templates (with the latest version of the Gutenberg plugin on a WoA site for example).

[mmtr]

@jeherve It doesn't work for me either, thanks for spotting it!

I think something changed in Gutenberg and navigating from the view mode to the edit mode no longer triggers a change in the core/edit-site store, effectively breaking our logic that detects the canvas mode:

jetpack/projects/plugins/jetpack/extensions/plugins/site-editor-snackbars/index.js

Lines 35 to 48 in fbb712b

	const unsubscribe = subscribe( () => {
	// Gutenberg adds a `canvas` query param after changing the canvas mode, but
	// the subscriber callback runs before the URL actually changes, so we need
	// to delay its execution.
	setTimeout( () => {
	const params = new URLSearchParams( window.location.search );
	if ( ! params.has( 'canvas' ) ) {
	return unsubscribe();
	}
	setCanvasMode( params.get( 'canvas' ) );
	}, 0 );
	}, 'core/edit-site' );

I fixed a similar issue in Automattic/wp-calypso#80818, so I'll look into a it once I have some capacity (which is quite limited at the moment because of my support rotation this week and our team meetup next week 😅 ).