Experiment: Allow SVG icons to be modified for premium blocks #16485
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to issue #44048.
This approach is to change simple JSX icons into stateless functional
components rendering an extra
svgExtra
prop. 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
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.
In this experiment, "Podcast Player" and "Pay with Paypal" appear with red circles.