Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Experiment: Allow SVG icons to be modified for premium blocks #16485

Closed
wants to merge 1 commit into from
Closed

Experiment: Allow SVG icons to be modified for premium blocks #16485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion extensions/blocks/podcast-player/icons/queueMusic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -18,5 +18,6 @@ export default (
</G>
</G>
</G>
{ svgExtra }
</SVG>
);
3 changes: 2 additions & 1 deletion extensions/blocks/simple-payments/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),

Expand Down
26 changes: 26 additions & 0 deletions extensions/shared/register-jetpack-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
*
Expand All @@ -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 ) ),
Expand Down