Upgrade nudge: fix collapsed banner outside the block editor - #50873
Conversation
The `.jetpack-upgrade-plan-banner` styles that give the banner its vertical
breathing room live only in the Jetpack plugin's editor-only stylesheet
(extensions/extended-blocks/paid-blocks/editor.scss). The shared `Nudge`
component ships its own stylesheet, and that copy has no vertical margins and
no flex-wrap.
Anywhere the shared stylesheet loads without the editor one -- most visibly the
pre-rendered frontend nudge in _inc/blocks/upgrade-nudge.html, which
Jetpack_Gutenberg::get_render_callback_with_availability_check() prints above
paid blocks for admins -- the banner collapses to the 28px height of its own
button, the Upgrade button sits flush against the top and bottom edges, and the
description runs under the button instead of wrapping. The Forms preview screen
renders the form on the frontend for an admin, so the file upload field hits
this path every time.
Move the spacing into the shared stylesheet so the banner stands on its own,
using logical properties so it works in RTL. The Jetpack editor stylesheet
already declares the same values at the same specificity, so the editor
rendering is unchanged.
Also:
- Define `.jetpack-upgrade-plan__hidden` in the shared stylesheet. The shared
component emits that class for `visible={false}` and for a missing checkout
URL, but only the editor stylesheet declared it, so neither actually hid
anything outside the editor.
- Fix a dead selector in the editor stylesheet: #50260 renamed the nudge's
editor-canvas class from `wp-block` to `jetpack-nudge-canvas` but left
`.jetpack-upgrade-plan-banner.wp-block[data-align]` behind, so left- and
right-aligned nudges lost their content-width cap.
Fixes FORMS-737
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
github-actions
Bot
added
[JS Package] Shared Extension Utils
[Plugin] Jetpack
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! Jetpack plugin: No scheduled milestone found for this plugin. If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
github-actions
Bot
added
the
[Status] Needs Author Reply
Putting the spacing in the shared jetpack-shared-extension-utils stylesheet reached further than the bug does. Five other consumers already style `.jetpack-upgrade-plan-banner__wrapper` at the same specificity -- the AI assistant and connect banners set `flex-wrap: nowrap`, ai-post-excerpt sets `flex-direction: column` plus its own description margin, and the logo generator sets its own padding. Ties at equal specificity resolve by source order, so the shared-package edit would have changed those banners depending on bundle ordering. The broken banner is the pre-rendered frontend one, and its stylesheet is _inc/blocks/components.css, built solely from extensions/shared/components. That entry's style.scss already exists to carry editor styling to the frontend (it does the same for Gutenberg's Warning component), and nothing else imports it, so the rules land exactly where the bug is and nowhere else. Revert the shared package and its changelog; add the rules there instead.
Code Coverage SummaryThis PR did not change code coverage! That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷 |
kraftbj
added
[Status] Needs Review
|
This PR is staring to look better but I am still seeing the following on the peview page. 
I am expecting to see the upload banner to be 100% of the width. I am not sure why this is not the case. |
|
Also I noticed that the HTML code that we generate seems a bit off. See 
|
Enej raised two things on the PR. The banner was still narrower than the field it warns about. The nudge is printed as a sibling of the block, so inside a flex container it becomes a flex item and shrinks to its content width. Contact_Form only adds the `has-no-jetpack-form-layout` class when the block has no layout attribute (class-contact-form.php), and grunion.scss only stretches children under that class -- so a form saved from the editor, which does carry a layout attribute, leaves the banner at content width. Set `width: 100%` on the banner. Note this deliberately isn't `flex: 0 0 100%`: a form saved with a layout attribute renders a *column* flex container with `align-items: flex-start`, where flex-basis sizes the block axis and leaves the width untouched. Measured on a real form, the flex-basis version stayed at 414px inside a 620px form while `width: 100%` gives the full 620px. Also stop the shared Nudge emitting a literal `undefined__description` class. The description built its class with a bare template literal while the title already used a guarded `clsx` call; use the same guard so the prefixed class only appears when a class name is actually passed. Consumers that pass one keep their prefixed class.
|
Both fixed in Width. Worth flagging why the fix is
Verified on a Jurassic Ninja site against the real built
No change on forms saved without a layout attribute (still full width), and the editor rendering is untouched since these rules only ship in the pre-rendered frontend stylesheet. One note on CI: the WordPress.com Tests red mark is a reporting artifact, not a real failure. The TeamCity build passes with zero build problems and zero failing tests — the GitHub check has a 600 second budget and this build lands around 10m30s, so the reporter gives up a few seconds before TeamCity finishes. Re-running it now. |
|
This banner is on the frontend of the site. In the editor it looks correct for me but not on when it in the preview mode or in when a admin is looking at it on the front end of the site. |
|
Here's what I'm seeing in the editor + preview + logged-in front-end + logged-out front end. 
|
enejb
left a comment
enejb
left a comment
There was a problem hiding this comment.
This PR fixes things for me! Nice work!
github-actions
Bot
removed
the
[Status] Needs Review
2 participants
Proposed changes
Jetpack_Gutenberg::get_render_callback_with_availability_check()prints an upgrade nudge above paid blocks on the frontend for admins. That nudge is pre-rendered at build time fromextensions/shared/components/index.jsxinto_inc/blocks/upgrade-nudge.html, and its stylesheet is_inc/blocks/components.css, built from the same entry.The markup is the shared
Nudgecomponent, so it carries the same classes as the editor's paid-block banner. But the rules that give that banner its vertical breathing room live inextensions/extended-blocks/paid-blocks/editor.scss, which is editor-only and never loads on the frontend. The shared component's own stylesheet has no vertical margins and noflex-wrap, so on the frontend the banner collapses to the 28px height of its own button: the Upgrade button sits flush against the top and bottom edges, and the description runs underneath it instead of wrapping.The Forms preview screen renders the form on the frontend for an admin, so a form with a File upload field hits this on every preview.
Changes:
extensions/shared/components/style.scss. That file already exists to carry editor styling to the frontend (it does the same for Gutenberg'sWarningcomponent), it is only imported by the pre-rendered components entry, and nothing else imports that entry — so the rules land exactly where the bug is and nowhere else. Logical properties, so it is RTL-correct.paid-blocks/editor.scss: Upgrade nudge: replace CSS class to avoid Gutenberg editor iframe warning #50260 renamed the nudge's editor-canvas class fromwp-blocktojetpack-nudge-canvasbut left.jetpack-upgrade-plan-banner.wp-block[data-align]behind, so left- and right-aligned nudges lost their content-width cap. That selector currently matches nothing, so this has no blast radius either.Notes for review:
@automattic/jetpack-shared-extension-utilsand backed it out. Five consumers already style.jetpack-upgrade-plan-banner__wrapperat the same specificity —ai-assistantandconnect-bannersetflex-wrap: nowrap,ai-post-excerptsetsflex-direction: columnplus its own description margin, the logo generator sets its own padding — and equal-specificity ties resolve by source order, so editing the shared package would have shifted those banners depending on bundle ordering. See the second commit for the reasoning.paid-blocks/editor.scssare now near-duplicates of the shared stylesheet, and.jetpack-upgrade-plan__hiddenis emitted by the shared component but only declared in the editor stylesheet — sovisible={false}and a missing checkout URL don't actually hide anything outside the editor. Both deserve a proper cleanup of the shared component rather than another scoped patch.Related product discussion/links
Does this pull request change what data or activity we track or use?
No.
Screenshots
Before:
After:
Testing instructions
Requires a self-hosted Jetpack site without a paid plan (the file upload field needs one), logged in as an admin.
jetpack build plugins/jetpack --deps..jetpack-upgrade-plan-bannerclasses but are styled by different stylesheets and are deliberately untouched here.