Experiment: Allow SVG icons to be modified for premium blocks #16485
Conversation
Related to issue #44048. This approach is to change simple JSX icons into stateless functional components rendering an extra `svgExtra` prop. This allows extra SVG drawing commands to be injected into each icon. In this experimental commit, I've only modified 2 icons to take the new `svgExtra` prop, but we would want to modify all jetpack icons. The main code in register-jetpack-block.js, when registering each block, checks to see if it's a paid block using requiresPaidPlan(). If it's a paid block, then we "render" the icon by calling the callback, and providing a premium star as the `svgExtra` prop. NOTE: In my testing, requiresPaidPlan was always returning false, so I shortcircuited the test to always return true in this experimental commit. This is a way to add the star to any icon we please, while only using one SVG element; but we have to make each icon a bit more extensible first.
|
Caution: This PR has changes that must be merged to WordPress.com |
This is an automated check which relies on E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16485 |
Related to issue #44048.
This approach is to change simple JSX icons into stateless functional
components rendering an extra
svgExtraprop. This allows extra SVGdrawing commands to be injected into each icon.
In this experimental commit, I've only modified 2 icons to take the new
svgExtraprop, but we would want to modify all jetpack icons.The main code in register-jetpack-block.js, when registering each block,
checks to see if it's a paid block using requiresPaidPlan(). If it's a
paid block, then we "render" the icon by calling the callback, and
providing a premium star as the
svgExtraprop.NOTE: In my testing, requiresPaidPlan was always returning false, so I
shortcircuited the test to always return true in this experimental
commit.
This is a way to add the star to any icon we please, while only using
one SVG element; but we have to make each icon a bit more extensible
first.
In this experiment, "Podcast Player" and "Pay with Paypal" appear with red circles.