How to use the @wordpress/block-editor.getFontSizeClass function in @wordpress/block-editor

;
;
;

//
// font-sizes
//

// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, 'small', 15);

// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, undefined, 15);

// $ExpectType string
be.getFontSizeClass('foo');

// $ExpectType ComponentType
be.withFontSizes('fontSize')(() =&gt; <h1>Hello World</h1>);

//
// inner-blocks
//
;
;
;
;

//
// inserter
//
;

const classes = classnames(
		className, {
			'has-lightbox': lightbox,
		}
	);

	// Body color class and styles.
	const innerClasses = classnames(
		...GalleryClasses( attributes ), {
			'has-fullwidth-images': fullwidth,
			'has-margin': gutter > 0,
		}
	);

	const fontSizeClass = getFontSizeClass( fontSize );

	const figureClasses = classnames(
		'coblocks-gallery--figure', {
			[ `has-margin-bottom-${ gutter }` ]: gutter > 0,
			[ `has-margin-bottom-mobile-${ gutterMobile }` ]: gutterMobile > 0,
			[ fontSizeClass ]: fontSizeClass,
		} );

	const captionClasses = classnames(
		'coblocks-gallery--caption', {
			[ fontSizeClass ]: fontSizeClass,
		} );

	const captionStyles = {
		fontSize: fontSizeClass ? undefined : customFontSize,
	};

textColor,
		customTextColor,
		fontSize,
		customFontSize,
		borderRadius,
		borderWeight,
		borderColor,
		customBorderColor,
		padding,
		spacing,
	} = attributes;

	const isGradientAvailable = !! getGradientClass;

	const textColorClass = getColorClassName( 'color', textColor );
	const fontSizeClass = getFontSizeClass( fontSize );
	const borderClass = getColorClassName( 'border-color', borderColor );
	const buttonBackgroundClass = getColorClassName( 'background-color', buttonBackgroundColor );
	const buttonGradientClass = isGradientAvailable ? getGradientClass( buttonGradient ) : undefined;

	const emailFieldBackgroundClass = getColorClassName(
		'background-color',
		emailFieldBackgroundColor
	);
	const emailFieldGradientClass = isGradientAvailable
		? getGradientClass( emailFieldGradient )
		: undefined;

	const sharedClasses = classnames(
		borderRadius === 0 ? 'no-border-radius' : undefined,
		fontSizeClass,
		borderClass

content,
		customFontSize,
		fontSize,
		textColor,
		textAlign,
		url,
		via,
	} = attributes;

	const viaUrl = via ? `&via=${ via }` : '';

	const tweetUrl = `http://twitter.com/share?&text=${ encodeURIComponent( content ) }&url=${ url }${ viaUrl }`;

	const textColorClass = getColorClassName( 'color', textColor );

	const fontSizeClass = getFontSizeClass( fontSize );

	const textClasses = classnames( 'wp-block-coblocks-click-to-tweet__text', {
		'has-text-color': textColor || customTextColor,
		[ fontSizeClass ]: fontSizeClass,
		[ textColorClass ]: textColorClass,
	} );

	const blockquoteClasses = classnames( { [ `has-text-align-${ textAlign }` ]: textAlign } );

	const textStyles = {
		fontSize: fontSizeClass ? undefined : customFontSize,
		color: textColorClass ? undefined : customTextColor,
	};

	const buttonColorClass = getColorClassName( 'background-color', buttonColor );

const {
				align,
				content,
				dropCap,
				backgroundColor,
				textColor,
				customBackgroundColor,
				customTextColor,
				fontSize,
				customFontSize,
				direction,
			} = attributes;

			const textClass = getColorClassName( 'color', textColor );
			const backgroundClass = getColorClassName( 'background-color', backgroundColor );
			const fontSizeClass = getFontSizeClass( fontSize );

			const className = classnames( {
				'has-text-color': textColor || customTextColor,
				'has-background': backgroundColor || customBackgroundColor,
				'has-drop-cap': dropCap,
				[ fontSizeClass ]: fontSizeClass,
				[ textClass ]: textClass,
				[ backgroundClass ]: backgroundClass,
			} );

			const styles = {
				backgroundColor: backgroundClass ? undefined : customBackgroundColor,
				color: textClass ? undefined : customTextColor,
				fontSize: fontSizeClass ? undefined : customFontSize,
				textAlign: align,
			};

const innerClasses = classnames(
			...GalleryClasses( attributes ),
			...BackgroundClasses( attributes ), {
				'has-fullwidth-images': fullwidth,
				'has-margin': gutter > 0,
			}
		);

		const innerStyles = {
			...GalleryStyles( attributes ),
			...BackgroundStyles( attributes ),
			color: textClass ? undefined : customCaptionColor,
		};

		const fontSizeClass = getFontSizeClass( fontSize );

		const figureClasses = classnames(
			'coblocks-gallery--figure', {
				[ `has-margin-bottom-${ gutter }` ]: gutter > 0,
				[ `has-margin-bottom-mobile-${ gutterMobile }` ]: gutterMobile > 0,
				[ fontSizeClass ]: fontSizeClass,
			} );

		const captionClasses = classnames(
			'coblocks-gallery--caption', {
				[ fontSizeClass ]: fontSizeClass,
			} );

		const captionStyles = {
			fontSize: fontSizeClass ? undefined : customFontSize,
		};

const {
		backgroundColor,
		content,
		customBackgroundColor,
		customFontSize,
		customTextColor,
		fontSize,
		align,
		textColor,
	} = attributes;

	const textClass = getColorClassName( 'color', textColor );

	const backgroundClass = getColorClassName( 'background-color', backgroundColor );

	const fontSizeClass = getFontSizeClass( fontSize );

	const classes = classnames( 'wp-block-coblocks-highlight__content', {
		'has-text-color': textColor || customTextColor,
		[ textClass ]: textClass,
		'has-background': backgroundColor || customBackgroundColor,
		[ backgroundClass ]: backgroundClass,
		[ fontSizeClass ]: fontSizeClass,
	} );

	const styles = {
		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
		color: textClass ? undefined : customTextColor,
		fontSize: fontSizeClass ? undefined : customFontSize,
	};

	return RichText.isEmpty( content ) ? null : (

content,
				customFontSize,
				fontSize,
				textColor,
				textAlign,
				url,
				via,
			} = attributes;

			const viaUrl = via ? `&via=${ via }` : '';

			const tweetUrl = `http://twitter.com/share?&text=${ encodeURIComponent( content ) }&url=${ url }${ viaUrl }`;

			const textColorClass = getColorClassName( 'color', textColor );

			const fontSizeClass = getFontSizeClass( fontSize );

			const textClasses = classnames( 'wp-block-coblocks-click-to-tweet__text', {
				'has-text-color': textColor || customTextColor,
				[ fontSizeClass ]: fontSizeClass,
				[ textColorClass ]: textColorClass,
			} );

			const textStyles = {
				fontSize: fontSizeClass ? undefined : customFontSize,
				color: textColorClass ? undefined : customTextColor,
			};

			const buttonColorClass = getColorClassName( 'background-color', buttonColor );

			const buttonClasses = classnames( 'wp-block-coblocks-click-to-tweet__twitter-btn', {
				'has-button-color': buttonColor || customButtonColor,

const save = ( { className, attributes } ) => {
	const {
		backgroundColor,
		biography,
		customBackgroundColor,
		customTextColor,
		imgUrl,
		name,
		textColor,
		fontSize,
		customFontSize,
	} = attributes;

	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
	const textClass = getColorClassName( 'color', textColor );
	const fontSizeClass = getFontSizeClass( fontSize );

	const classes = classnames( className, {
		'has-text-color': textColor || customTextColor,
		'has-background': backgroundColor || customBackgroundColor,
		[ textClass ]: textClass,
		[ backgroundClass ]: backgroundClass,
		[ fontSizeClass ]: fontSizeClass,
	} );

	const styles = {
		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
		color: textClass ? undefined : customTextColor,
		fontSize: fontSizeClass ? undefined : customFontSize,
	};

	return isEmpty( attributes ) ? null : (

const {
		align,
		content,
		dropCap,
		backgroundColor,
		textColor,
		customBackgroundColor,
		customTextColor,
		fontSize,
		customFontSize,
		direction,
	} = attributes;

	const textClass = getColorClassName( 'color', textColor );
	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
	const fontSizeClass = getFontSizeClass( fontSize );

	const className = classnames( {
		'has-text-color': textColor || customTextColor,
		'has-background': backgroundColor || customBackgroundColor,
		'has-drop-cap': dropCap,
		[ `has-text-align-${ align }` ]: align,
		[ fontSizeClass ]: fontSizeClass,
		[ textClass ]: textClass,
		[ backgroundClass ]: backgroundClass,
	} );

	const styles = {
		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
		color: textClass ? undefined : customTextColor,
		fontSize: fontSizeClass ? undefined : customFontSize,
	};