Upgrade nudge: replace CSS class to avoid Gutenberg editor iframe warning

[shsajalchowdhury]

What

Fixes #46416

Why

The upgrade-nudge component adds a CSS class when rendered in the editor-canvas context. The Gutenberg iframe compatibility checker (get-compatibility-styles.js) scans all stylesheets injected into the editor iframe for content matching the string .wp-block. When it finds it in a stylesheet that wasn't properly enqueued via block.json, it emits warnings:

editor-jetpack-sidebar-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.

This CSS is pulled into multiple bundles (Social sidebar, external media) through a barrel-file re-export chain in shared-extension-utils, where unused components like Nudge are still evaluated due to side-effect CSS imports — JavaScript tree-shaking can't eliminate the module because the CSS import in index.jsx is a side-effect.

How

Replace the generic .wp-block class with a custom .jetpack-nudge-canvas class. This:

• Removes the .wp-block string from the stylesheet entirely
• Gutenberg's compatibility checker no longer flags it
• Preserves the same left/right alignment styling for paid plan upgrade nudges in the editor canvas

Testing Instructions

1. Open any post in the block editor
2. Open the browser DevTools console
3. Before: One or more warnings like editor-jetpack-sidebar-css was added to the iframe incorrectly
4. After: No such warnings — the upgrade nudge banner still renders with correct left/right alignment

Changelog

Upgrade nudge: replace .wp-block CSS class with .jetpack-nudge-canvas to avoid Gutenberg iframe compatibility warnings in the block editor.

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

No. This change only renames a CSS class from .wp-block to .jetpack-nudge-canvas — no data collection or tracking changes.

Testing instructions

1. Open any post in the block editor
2. Open the browser DevTools console
3. Before: One or more warnings like editor-jetpack-sidebar-css was added to the iframe incorrectly
4. After: No such warnings — the upgrade nudge banner still renders with correct left/right alignment

[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.
  
• ✅ 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 🤖

---