Skip to content

Conversation

@scruffian
Copy link
Member

@scruffian scruffian commented Jun 7, 2019

Changes proposed in this Pull Request

  • This is a PoC branch to show how we might achieve a premium block flow.
  • The basic concept is to wrap the block in a HOC which contains the Upgrade banner and a few other styles.
  • Ideally we should be reusing the Calypso components rather than duplicating them, but we have to strike a balance between avoiding duplication, and shipping quickly.

Testing instructions

This is tricky to test

  • Checkout this branch and build the app with `npx lerna run build --scope='@automattic/wpcom-block-editor' -- -- --output-path=[path to some dir to sync with your sandbox]
  • Sync the changes with your sandbox
  • Alternatively use the patch I created here: D29204-code (either way you'll need the other changes in D29204-code)
  • Sandbox a wpcom simple site that doesn't have a plan
  • Add a Simple Payments block to your site
  • You should see the banner like this:

Screenshot 2019-06-07 at 06 27 45

Screenshot 2019-06-07 at 06 27 51

@matticbot
Copy link
Contributor

padding: 10px;
}

.upgrade-nudge {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styles are duplicated from the component in Calypso :(

@@ -0,0 +1,28 @@
/**
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{ translate( 'To gain access to this block.' ) }
</span>
</div>
<button className="upgrade-nudge__button">{ translate( 'Upgrade' ) }</button>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should reuse the component at the very least.

if ( name === 'jetpack/simple-payments' ) {
return {
...settings,
edit: wrapPremiumBlocks( settings.edit ),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapping the block in another component seems like an elegant way of creating a consistent experience for all premium blocks.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, I like that approach 👍

@matticbot
Copy link
Contributor

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

@simison
Copy link
Member

simison commented Jul 4, 2019

Merged this work in Automattic/jetpack#12823

@simison simison closed this Jul 4, 2019
@simison simison deleted the add/premium-block-flow branch July 4, 2019 18:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants