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

To help you get started, we’ve selected a few @wordpress/block-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / wordpress__block-editor / wordpress__block-editor-tests.tsx View on Github external
//
// contrast-checker
//
;
;
;

//
// 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
//
;
;
;
;

//
github DefinitelyTyped / DefinitelyTyped / types / wordpress__block-editor / wordpress__block-editor-tests.tsx View on Github external
// $ExpectType ComponentType
be.withColors('backgroundColor', { textColor: 'color' })(() =&gt; <h1>Hello World</h1>);

//
// contrast-checker
//
;
;
;

//
// font-sizes
//

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

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

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

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

//
// inner-blocks
//
;
;
;
github ampproject / amp-wp / assets / src / blocks / amp-story-text / index.js View on Github external
const textClass = getColorClassName( 'color', textColor );
		const backgroundClass = getColorClassName( 'background-color', backgroundColor );

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

		// Calculate fontsize using vw to make it responsive.
		const { fontSizes } = select( 'core/block-editor' ).getSettings();
		// Get the font size in px based on the slug with fallback to customFontSize.
		const userFontSize = fontSize ? getFontSize( fontSizes, fontSize, customFontSize ).size : customFontSize;
		const fontSizeResponsive = ( ( userFontSize / STORY_PAGE_INNER_WIDTH ) * 100 ).toFixed( 2 ) + 'vw';

		const styles = {
			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
			color: textClass ? undefined : customTextColor,
			fontSize: ampFitText ? autoFontSize : fontSizeResponsive,
			width: `${ getPercentageFromPixels( 'x', width ) }%`,
			height: `${ getPercentageFromPixels( 'y', height ) }%`,
			textAlign: align,
		};

		const ContentTag = tagName;

		if ( ! ampFitText ) {
			return (