[WIP] Enable frontend preview for paid blocks requiring upgrade #18102

stacimc · 2020-12-16T01:05:21Z

Fixes 158-gh-Automattic/view-design and 157-gh-Automattic/view-design and 175-gh-Automattic/view-design.

Changes proposed in this Pull Request:

This PR re-enables frontend previews for paid blocks requiring an upgrade. If a block is unavailable due to not meeting plan requirements and the current user is an admin, the block will still be rendered on the frontend with an upgrade banner identical to the one that appears in the editor.

It also refactors the existing UpgradePlanBanner used in the editor to pull out as much common code as possible into a generic Nudge component that can be server-side-rendered.

Jetpack product discussion

Internal reference: pcjTuq-8U-p2

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

TBD

Testing instructions:

This requires re-testing across all the scenarios: wpcom and Jetpack, with and without the required plan, and with and without Stripe connected.

Follow testing instructions on #17907.

Note: the wp-env scripts will not sync changes to class.jetpack-gutenberg.php or class-blocks.php. These may need to be manually synced to their respective files in the sandbox.

In order to test on free Jetpack sites, you will need to turn on the jetpack_block_editor_enable_upgrade_nudge filter locally.

Proposed changelog entry for your changes:

TBD

jetpackbot · 2020-12-16T01:06:57Z

Scheduled Jetpack release: January 12, 2021.
Scheduled code freeze: January 4, 2021

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.

Generated by 🚫 dangerJS against 52c185b

stacimc · 2020-12-16T01:11:46Z

extensions/blocks/premium-content/premium-content.php

@@ -32,6 +31,7 @@ function register_block() {
 		FEATURE_NAME,
 		array(
 			'render_callback' => __NAMESPACE__ . '\render_block',
+			'enable_preview'  => true,


I would love suggestions for a better name for this option.

enable_frontend_preview might be slightly more explanatory?

stacimc · 2020-12-16T01:13:34Z

class.jetpack-gutenberg.php

+			&& apply_filters( 'jetpack_block_editor_enable_upgrade_nudge', false )
+			/** This filter is documented in _inc/lib/admin-pages/class.jetpack-react-page.php */
+			&& apply_filters( 'jetpack_show_promotions', true )
+			&& ! is_feed()


The last two conditions here were part of the original check for rendering a frontend upgrade nudge. I am looking for more context to see if they are still needed, particularly the jetpack_show_promotions filter.

I'm not seeing any usage of the jetpack_show_promotions filter across the Jetpack or WordPress.com codebase. I suspect this is a global way to turn off all promotional notifications across Jetpack. It's possible that this is being used by hosts somewhere though, so best to leave it in.

jetpack_block_editor_enable_upgrade_nudge is the current way we enable the display of upgrade nudges on WordPress.com. Do we still need this with this work?

…kit to Jetpack.

… jetpack/ prefix. This will let existing users transition without interruption.

…ia the child block functionality built into the Jetpack register block function.

…ted independently. This matches the ETK version of the block.

apeatling · 2020-12-16T19:47:23Z

class.jetpack-gutenberg.php

+			&& apply_filters( 'jetpack_block_editor_enable_upgrade_nudge', false )
+			/** This filter is documented in _inc/lib/admin-pages/class.jetpack-react-page.php */
+			&& apply_filters( 'jetpack_show_promotions', true )
+			&& ! is_feed()


I'm not seeing any usage of the jetpack_show_promotions filter across the Jetpack or WordPress.com codebase. I suspect this is a global way to turn off all promotional notifications across Jetpack. It's possible that this is being used by hosts somewhere though, so best to leave it in.

apeatling · 2020-12-16T19:50:46Z

class.jetpack-gutenberg.php

+			&& apply_filters( 'jetpack_block_editor_enable_upgrade_nudge', false )
+			/** This filter is documented in _inc/lib/admin-pages/class.jetpack-react-page.php */
+			&& apply_filters( 'jetpack_show_promotions', true )
+			&& ! is_feed()


jetpack_block_editor_enable_upgrade_nudge is the current way we enable the display of upgrade nudges on WordPress.com. Do we still need this with this work?

apeatling · 2020-12-16T19:51:39Z

extensions/blocks/premium-content/premium-content.php

-	// Stripe connection nudge.
-	if ( ! membership_checks() && current_user_can_edit() ) {
-		$stripe_nudge = render_stripe_nudge();
+		$stripe_nudge = render_stripe_nudge;


Missing ().

apeatling · 2020-12-16T19:52:53Z

extensions/blocks/premium-content/premium-content.php

@@ -32,6 +31,7 @@ function register_block() {
 		FEATURE_NAME,
 		array(
 			'render_callback' => __NAMESPACE__ . '\render_block',
+			'enable_preview'  => true,


enable_frontend_preview might be slightly more explanatory?

stacimc · 2020-12-16T19:58:29Z

jetpack_block_editor_enable_upgrade_nudge is the current way we enable the display of upgrade nudges on WordPress.com. Do we still need this with this work?

This enables upgrade nudges in the editor, yes. It was part of the original conditional for displaying frontend upgrade nudges as well, so I included it in the first pass. I think you're right and it can be removed -- my thinking is:

If upgrade nudges in the editor weren't enabled, the user wouldn't have been able to insert the block at all, so we should never end up in a scenario where we're rendering a paid block on the frontend of a free site that does not support nudges.

Previously the Upgrade nudges were managed by the Premium Content blocks' render_callbacks. This will not work if the plan_check is enabled in the block at registration, because the render callback is wrapped in an availability check and won't be called. This commit abstracts the logic up a level. If the availability check fails, instead of returning immediately, we now check to see if upgrade nudges are enabled and the user is an admin. If so, we render an upgrade nudge in addition to the ouptut of the block's render_callback. The logic for rendering the upgrade nudges can also be removed from the Premium Content block now.

Adds an optional argument to `jetpack_register_block` to enable rendering a preview on the frontend for admins when upgrade nudges are enabled.

jeherve · 2020-12-17T12:38:51Z

Somewhat related: #14893, #18054.

Internal reference: pcjTuq-8U-p2

Refactors the frontend upgrade nudge to a reusable SSR-rendable nudge that is used by the UpgradePlanBanner (the nudge used in the editor).

stacimc · 2021-01-08T03:03:25Z

Closing in favor of #18239

matticbot added the Touches WP.com Files label Dec 16, 2020

stacimc self-assigned this Dec 16, 2020

github-actions bot added the [Status] Needs Package Release This PR made changes to a package. Let's update that package now. label Dec 16, 2020

stacimc commented Dec 16, 2020

View reviewed changes

apeatling and others added 21 commits December 16, 2020 11:40

First pass at moving over the premium content block from editing tool…

c56e9ad

…kit to Jetpack.

Fix include paths.

de0a1b4

Add premium content plan requirement, and allow the block to skip the…

f074f0c

… jetpack/ prefix. This will let existing users transition without interruption.

Correctly register child blocks.

29b228d

Add Premium content child blocks to the paid plan check.

99e5a89

Move the container block to the root, and register the child blocks v…

3a46beb

…ia the child block functionality built into the Jetpack register block function.

Add the editor css styles.

326fb61

Include the server side render functions for child blocks.

7bbef17

Add fix for Automattic/wp-calypso#47944

166c38e

Allow login and buttons blocks to appear in the inserter and be inser…

8df38b0

…ted independently. This matches the ETK version of the block.

Update the default template content for the subscriber view.

86c23fd

Fix icon.js lint errors

cd38baa

First pass at fixing PHP linting errors.

29c5adb

Replace all full-site-editing textdomain usage.

8e799a4

Second pass at PHP lint errors.

ec1228c

Third pass at PHP lint errors.

9c96711

Final pass at php lint issues.

18e663e

Remove references to Dashicon component.

6f18a3a

Keep deprectated setup consistent across blocks.

0dab871

Incorporate changes from @stacimc's PR Automattic/wp-calypso#47388

0b14f0d

Fix phpcs issues.

838db4f

apeatling force-pushed the add/premium-content-block branch from b7ae39a to 838db4f Compare December 16, 2020 19:41

apeatling reviewed Dec 16, 2020

View reviewed changes

stacimc added 2 commits December 16, 2020 13:40

Add arg to jetpack_register_block to enable preview on the frontend

16b5b3c

Adds an optional argument to `jetpack_register_block` to enable rendering a preview on the frontend for admins when upgrade nudges are enabled.

stacimc force-pushed the update/enable-upgrade-nudge-on-frontend branch from ce5ff8e to 16b5b3c Compare December 16, 2020 21:40

stacimc added 3 commits December 16, 2020 13:44

Make option name more clear

ddfe48c

Remove unnecessary checks

7329fc5

Pass correct block slug in plan check

bdcdbd7

jeherve added [Status] In Progress [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Dec 17, 2020

stacimc mentioned this pull request Dec 17, 2020

Premium Content: Check for required plan on jetpack sites #18095

Closed

Fix linting

ec0e1ee

stacimc changed the title ~~WIP: Add option to enable frontend preview for paid blocks requiring upgrade~~ Add option to enable frontend preview for paid blocks requiring upgrade Dec 17, 2020

stacimc marked this pull request as ready for review December 17, 2020 18:03

stacimc added 3 commits December 18, 2020 13:40

Update upgrade nudge to match design from editor

32c9c44

Re-enable frontend nudges for all paid blocks

724b81c

Refactor editor and frontend nudges to use same component

e3cfc11

Refactors the frontend upgrade nudge to a reusable SSR-rendable nudge that is used by the UpgradePlanBanner (the nudge used in the editor).

stacimc changed the title ~~Add option to enable frontend preview for paid blocks requiring upgrade~~ Enable frontend preview for paid blocks requiring upgrade Dec 18, 2020

Linting

52c185b

stacimc force-pushed the add/premium-content-block branch from 8c72c21 to 3ce3249 Compare January 5, 2021 23:51

stacimc changed the title ~~Enable frontend preview for paid blocks requiring upgrade~~ [WIP] Enable frontend preview for paid blocks requiring upgrade Jan 6, 2021

stacimc closed this Jan 8, 2021

kraftbj removed the [Status] In Progress label Oct 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Enable frontend preview for paid blocks requiring upgrade #18102

[WIP] Enable frontend preview for paid blocks requiring upgrade #18102

stacimc commented Dec 16, 2020 •

edited

Loading

jetpackbot commented Dec 16, 2020 •

edited

Loading

stacimc Dec 16, 2020 •

edited

Loading

apeatling Dec 16, 2020

stacimc Dec 16, 2020

apeatling Dec 16, 2020

apeatling Dec 16, 2020

apeatling Dec 16, 2020

apeatling Dec 16, 2020

apeatling Dec 16, 2020

apeatling Dec 16, 2020

stacimc commented Dec 16, 2020

jeherve commented Dec 17, 2020

stacimc commented Jan 8, 2021

[WIP] Enable frontend preview for paid blocks requiring upgrade #18102

[WIP] Enable frontend preview for paid blocks requiring upgrade #18102

Conversation

stacimc commented Dec 16, 2020 • edited Loading

Changes proposed in this Pull Request:

Jetpack product discussion

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

Testing instructions:

Proposed changelog entry for your changes:

jetpackbot commented Dec 16, 2020 • edited Loading

stacimc Dec 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stacimc commented Dec 16, 2020

jeherve commented Dec 17, 2020

stacimc commented Jan 8, 2021

stacimc commented Dec 16, 2020 •

edited

Loading

jetpackbot commented Dec 16, 2020 •

edited

Loading

stacimc Dec 16, 2020 •

edited

Loading