Experiment: Allow SVG icons to be modified for premium blocks

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.

extensions/blocks/podcast-player/icons/queueMusic.js

@@ -3,7 +3,7 @@
  */
 import { G, Path, Rect, SVG } from '@wordpress/components';
 
-export default (
+export default ( { svgExtra } ) => (
 	<SVG height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
 		<G>
 			<Rect fill="none" height="24" width="24" />
@@ -18,5 +18,6 @@ export default (
 				</G>
 			</G>
 		</G>
+		{ svgExtra }
 	</SVG>
 );

extensions/blocks/simple-payments/index.js

@@ -48,10 +48,11 @@ export const settings = {
 		</Fragment>
 	),
 
-	icon: (
+	icon: ( { svgExtra } ) => (
 		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 			<Path fill="none" d="M0 0h24v24H0V0z" />
 			<Path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" />
+			{ svgExtra }
 		</SVG>
 	),
 

extensions/shared/register-jetpack-block.js

@@ -4,6 +4,8 @@
 import { __, _x } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
 import { registerBlockType } from '@wordpress/blocks';
+import { isFunction } from 'lodash';
+import { Circle } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -69,6 +71,23 @@ function buildBlockTitle( blockTitle, blockTags = [] ) {
 	return blockTitle;
 }
 
+/**
+ * Modifies block settings for blocks that require a premium plan.
+ * Currently, adds a star to the icon if the icon supports it.
+ * Icons should be a callback of form: ({svgExtra}) => (<SVG> <G> .. </G> {svgExtra} </SVG>)
+ *
+ * @param {object} settings - The block's settings.
+ * @returns {object} Possibly modified settings.
+ */
+function modifySettingsForPremium( settings ) {
+	const starIcon = <Circle fill="red" cx="20" cy="3" r="4" />; // Possibly extract
+
+	if ( settings.icon && isFunction( settings.icon ) ) {
+		settings.icon = settings.icon( { svgExtra: starIcon } );
+	}
+	return settings;
+}
+
 /**
  * Registers a gutenberg block if the availability requirements are met.
  *
@@ -92,6 +111,13 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] )
 		return false;
 	}
 
+	// Modify settings if block requires plan
+	// XXX Debug, all blocks are showing requiredPlan=false for me
+	// eslint-disable-next-line no-constant-condition
+	if ( true || requiredPlan ) {
+		settings = modifySettingsForPremium( settings );
+	}
+
 	const result = registerBlockType( `jetpack/${ name }`, {
 		...settings,
 		title: buildBlockTitle( settings.title, buildBlockTags( name, requiredPlan ) ),