Automattic / Automattic/jetpack

Enhancement: Payments intro block should indicate an upgrade is required

Open
#23,089 0 comments 0 reactions 0 assignees View on GitHub
[Block] Payments [Plugin] Jetpack Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### What

The payments intro block should indicate paid upgrades for itself and introduced blocks following the usual UI patterns

![image](https://user-images.githubusercontent.com/93301/155530712-a7c984b5-5a20-4fec-bb58-28f4c8a7755c.png)

### How

If the user needs to upgrade plan to use the blocks introduced by the payments intro block, that block itself ought to indicate that is necessary. When choosing a block from the introducer, any blocks that require a paid upgrade should also be indicated as such.

Note that the blocks that are introduced may and do require different levels of plans, for example on wpcom Payments Button requires a Personal plan and Donations requires the Premium plan.

These upgrade-required indicators are usually implemented by adding `'plan_check' => true` to `Blocks::jetpack_register_block()`, and add the block to the appropriate plan in `class.jetpack-plan.php`.

Within the payments intro block itself, each individual block possible ought to have the upgrade indicator. Existing blocks get this applied in js via the [paid-blocks filters](https://github.com/Automattic/jetpack//blob/a99e0ccac5aeb9092b5c01d75af6846386182738/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/index.js), specifically by hooking `blocks.registerBlockType` with `jetpackPaidBlock`.

This was first discussed at https://github.com/Automattic/jetpack/pull/22491#pullrequestreview-890807352

Contributor guide

Open the contributing guide

Research direction

Start with Blocks::jetpack_register_block(), class.jetpack-plan.php, and extensions/extended-blocks/paid-blocks/index.js. Read the existing jetpackPaidBlock handling for blocks.registerBlockType and compare the payments intro block with the plan mappings. Done means the intro block and each introduced block show the appropriate upgrade indicator for their required plan.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, wordpress
Domain
backend, frontend, payments
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.