Add LiveChat icon to WPAdmin on Atomic only.

[getdave]

Adds the "FAB" LiveChat icon to WPAdmin on WordPress.com envs only. This is a non-interactive element as it is not yet possible to "embed" the actual FAB widget from Calypso into WPAdmin. This acts as a temporary workaround to allow the user access to "help" via a direct link to wordpress.com/help.

To do this we must:

• Include the same markup as per Calypso FAB.
• Inline the Grid Icon SVG so as not to rely on Gridicons.
• Apply layout styles based on Calypso styles.

In addition we must use the existing color schemes unification process to define custom color overides for the icon depending on which color scheme is being used in WPAdmin. This involves adding new vars to each color scheme file and then applying these to the FAB styling.

Fixes Automattic/wp-calypso#50271
Fixes Automattic/wp-calypso#50367

Please note

• I discussed this with @jeherve and we decided putting in Masterbar was an ok choice - at least for the sake of expediency for now.
• We are going to ignore custom color schemes for the LiveChat icon for now. We can follow up to add color scheme support later as required.

Changes proposed in this Pull Request:

• Add LiveChat icon to WPAdmin for Atomic only.

Jetpack product discussion

See paYJgx-1nM-p2

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

No

Testing instructions:

The following steps should be taken on both Simple & Atomic (the visual icon check should be tested across a variety of screen sizes):

• Go to WPAdmin.
• See LiveChat icon in bottom right.
• Click icon to be taken to wordpress.com/help.
• Go to wordpress.com and open your site in Calypso.
• Create a new Post and check you are within the Gutenframed editor (here's how you check for that PCYsg-lwV-p2).
• See only a single icon in bottom right - it should be the proper Calypso FAB that you can interact with and not the static version.
• Go back to WPAdmin and create a new post not using the Gutenframed editor.
• Again you should see a single icon in the bottom right but it should be the static version that is just a link and not the interactive Calypso version.

Color Schemes

• Also try changing your color scheme and then re-testing to ensure the icon picks up the color schemes correctly.

Atomic sites

• Get Atomic site with JP Beta.
• Checkout this branch using JP Beta.
• Follow testing steps above.

Simple sites

This doesn't work yet because we need to update JP Fusion to sync the inline-help directory within masterbar to Dotcom Simple codebase.

Once this PR is provisionally accepted for Atomic sites then we'll merge this diff (D57403-code) to update JP sync and then rebase all the things.

• Follow testing steps above.

Proposed changelog entry for your changes:

• Adds WP.com Live Chat icon (link only) to bottom right of WPAdmin for Atomic sites only.

[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.
  
• ✅ Include a changelog entry for any meaningful change.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  

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 🤖

---

If you are an automattician, once your PR is ready for review 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.undefined

---

jetpack plugin:

• Next scheduled release: March 2, 2021.
• Scheduled code freeze: February 22, 2021

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello getdave! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D57354-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[getdave]

@frontdevde I'd really appreciate your help here with:

• Getting the box shadow on the icon to match up with Calypso - for some reason the var is ignored.
• Getting the sizing of the icon the same as Calypso - it isn't matching up. Must be missing some key CSS rules.

[frontdevde]

@frontdevde I'd really appreciate your help here with:
Getting the box shadow on the icon to match up with Calypso - for some reason the var is ignored.
Getting the sizing of the icon the same as Calypso - it isn't matching up. Must be missing some key CSS rules.

Pushed a couple of updates, the issues were related to

1. the var needed the actual individual r/g/b values
2. the box model was missing (in Calypso it's inherited from the button component)

Hope that helps!

[jeherve]

You'll need to fix those linting issues before we can merge this.

[mmtr]

Nice work so far, @getdave. I only took a first quick look without testing it, but I think this is going in the right direction.

My only concern is that this WP Admin FAB will conflict with the Calypso FAB on screens that we embed through an iframe (e.g. block editor / Gutenframe). It may be good to check the non-presence of the frame-nonce GET param before injecting the WP Admin FAB, since that param indicates the screen is going to be embedded on a iframe.

It'd be also good to solve all the linting warnings/errors.

[getdave]

@mmtr I fixed the doubling up of the icons in Gutenframe.

@frontdevde Just need to tidy up the CSS to move things to Sass and avoid CSS vars.

[mmtr]

Ah, forgot to note that I also checked the tracks event is triggered correctly:

[getdave]

Ah, forgot to note that I also checked the tracks event is triggered correctly:

I couldn't get this to trigger locally for me. How did you manage it?

[getdave]

Nice work, @getdave! This works quite well for me. Also verified the FAB uses the correct colors according to the current color scheme selected.

Kudos to @frontdevde for this.

[mmtr]

Ah, forgot to note that I also checked the tracks event is triggered correctly:

I couldn't get this to trigger locally for me. How did you manage it?

I ran localStorage.setItem( 'debug', 'dops:analytics' ); in the JS console and reloaded the page. All tracked events showed up after that in the console.

[getdave]

At the moment this is blocked by me not being sure of the best way to get the diff to be in sync with these changes.

[mmtr]

At the moment this is blocked by me not being sure of the best way to get the diff to be in sync with these changes.

You should be able to commandeer D57354-code and update the diff after manually copy/paste the inline-help folder.

[getdave]

Waiting on review of accompanying diff which covers Simple sites.

D57354-code

[mmtr]

LGTM!

[jeherve]

This looks good to me. 👍

[jeherve]

Cherry-picked to jetpack/branch-9.5 in 2e0f703