Recurring Payments block - added example

[MichaelArestad]

Master issue: #13510

Adds example to Recurring Payments block

In progress notes

I don't believe the current preview is very good. In fact, no preview is better than this, however, this will get the conversation started.

When hovering over the block, you see a loading state where it tries to talk to Stripe:

When that fails, you see this:

Ideally, this is what we want the user to see:

I need someone like @gravityrail or an experienced JS dev to remove the notice and loading state for the preview so the button shows up instantly. Sadly, this is beyond what I'm comfortable with.

Changes proposed in this Pull Request:

• Implements the ability to preview the block before inserting it.

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

• This is a new feature of Gutenberg we are moving to support.

Testing instructions:

• Go to the post editor
• Click the + to open a block inserter from the top bar
• Hover over the recurring payments block

Proposed changelog entry for your changes:

• We should probably add one changelog entry for all the blocks we add examples to. Something like: "Added previews to Jetpack blocks within the Gutenberg editor."

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello MichaelArestad! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D34422-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: May 5, 2020.
Scheduled code freeze: April 28, 2020

Generated by 🚫 dangerJS against a70075b

[simison]

FYI @artpi in case you have spare cycles!

[artpi]

Oh nice, I just discovered it and it's from October! Jeez, I must have seen it and forgot, sorry!
Added to Recurring Payments Trello!

[stale]

This PR has been marked as stale. This happened because:

• It has been inactive in the past 3 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this PR has clear testing instructions, is it up to date with master, and it is still valid. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[matticbot]

MichaelArestad, Your synced wpcom patch D34422-code has been updated.

[artpi]

@MichaelArestad - thank you for this!
We will definitely not be changing recurring payments block to fake the preview.
The upgrade nudge and stripe connection requirement is a needed step.

Do you think there's a way to use another block (button) as a preview and just "fake it" ?

[MichaelArestad]

Do you think there's a way to use another block (button) as a preview and just "fake it" ?

There totally is, but it's a little over my head.

[artpi]

Note to whoever takes this task:

• change to static markup for preview
• premium content block as well

[jeherve]

I'll close this PR for now because of the lack of activity on this. We can always reopen in the future if needed, but it will need a rebase, so it may be easier to start a new PR at this point.