Upgrade Nudge: Fix Styling by using @wordpress/editor's Warning component

[ockham]

Fixes #12946

Changes proposed in this Pull Request:

• Upgrade Nudge: Fix Styling by using @wordpress/editor's Warning component

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• Fix styling of the recently introduced Upgrade Nudge

Screenshots

Testing instructions:

• Switch to this branch locally, build Jetpack (yarn build), and start Docker (yarn docker:up)
• Now add the following line to any file in docker/mu-plugins, e.g. a newly created 0-blocks-upgrade.php (needs to start with <?php): define ( 'JETPACK_SHOW_BLOCK_UPGRADE_NUDGE', true );
• Make sure you're connected to WP.com, and on a free plan
• Start a new post, and insert the 'Simple Payments' block
• It should come with an Upgrade Nudge on top of it, which should look as depicted in the screenshots.

Proposed changelog entry for your changes:

(Covered by whatever we add for #12823)

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello ockham! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D30168-code before merging this PR. Thank you!

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: August 6, 2019.
Scheduled code freeze: July 30, 2019

Generated by 🚫 dangerJS against acd632d

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[simison]

Works well 👍

Ok to merge already, but I wanted to point out these things that you could either fix in this PR or in follow-ups:

• There's a little off-border leak visible here:
  

• I'd prefer to have 14px empty space between the block content and the banner:

  

  Might just need margin-bottom: 0:
  

• I'd expect upgrade banner to get a blue hue when multiple blocks are selected:

  

  — might be just a matter of correct z-index or background:transparent?

[ockham]

Also noting that the nudge doesn't look great on WP.com:

This is apparently because of margin styling for the .editor-styles-wrapper p selector:

Looks like overrides on top of overrides 😭

If I disable all 4 margin relevant checkboxes in the element inspector as seen above, the spacing looks fine:

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[ockham]

Works well

Ok to merge already, but I wanted to point out these things that you could either fix in this PR or in follow-ups:

• There's a little off-border leak visible here:
  

Fixed by e4640ff

• I'd prefer to have 14px empty space between the block content and the banner:
  
  Might just need margin-bottom: 0:

Fixed by 0bd7b58

* I'd expect upgrade banner to get a blue hue when multiple blocks are selected: — might be just a matter of correct z-index or `background:transparent`?

Ideally, yeah. However, I've seen a bunch of code and/or styling in core (e.g. in the Warning component that this PR uses) that says something like 'make sure it works with multi-block selection' (or something like that), so it might be a tad more involved 😬

Edit: E.g. https://github.com/WordPress/gutenberg/blob/21e2dce2b287347e21c3e0618bc8fa8c0c1ef5ca/packages/block-editor/src/components/warning/style.scss#L11-L14 Though that's really just background:transparent 😂

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[ockham]

Also noting that the nudge doesn't look great on WP.com:

This is apparently because of margin styling for the .editor-styles-wrapper p selector:

Looks like overrides on top of overrides

If I disable all 4 margin relevant checkboxes in the element inspector as seen above, the spacing looks fine:

Fixed by e30a44e

[simison]

Looking very solid already!

Only things to follow up is I think fine-tuning padding/margins, e.g. there's this on hover:

And the banner seems to jump ~1-2px when selecting the block so it doesn't feel as smooth as it does for "missing block" and similar core alerts.

Multi-selection block styles we can improve in other PR, especially if it's complicated.

Good to merge 👍

[simison]

Not needed for this PR but just noting that we might want to add this colorful border to align visually more with Calypso:

We just need to figure out first if it's meant only for banners that are clickable and not for banners that have CTA button separately.

It might also just look silly with the thick grey border when hovering to block, let's see...

[mtias]

Can you try with the button vertically centered?

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[matticbot]

ockham, Your synced wpcom patch D30168-code has been updated.

[simison]

Can you try with the button vertically centered?

Fixed in 0da343a

Also upgraded the copy with a suggestion from #12946 (comment):

This block is available under the Premium Plan.
It will be hidden from site visitors until you upgrade.

The nudge looks like this now:

[zinigor]

Works well for me!