How to use the @wordpress/editor.getColorClass function in @wordpress/editor

To help you get started, we’ve selected a few @wordpress/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 front / gutenberg-js / src / js / blocks / post / index.js View on Github external
data,
    } = attributes;

    // Image
    const imageStyle = backgroundImageStyles(imageUrl);
    const imageClasses = classnames(
      'wp-block-cover-image',
      dimRatioToClass(dimRatio),
      {
        'has-background-dim': dimRatio !== 0,
        'has-parallax': hasParallax,
      },
    );

    // Title
    const textClass = getColorClass('color', textColor);
    const fontSizeClass = fontSize && `is-${fontSize}-text`;

    const textClasses = classnames({
      [ fontSizeClass ]: fontSizeClass,
      [ textClass ]: textClass,
    });

    const textStyle = {
      color: textClass ? undefined : customTextColor,
      fontSize: fontSizeClass ? undefined : customFontSize,
    };

    const post = (
      <div>
        { hasImage &amp;&amp;
        </div>
github front / gutenberg-js / src / js / blocks / section / index.js View on Github external
save ({ attributes, className }) {
    const {
      maxWidth,
      hasImage,
      backgroundColor,
      customBackgroundColor,
      url,
      hasParallax,
      dimRatio,
      data,
    } = attributes;

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

    const classes = classnames(
      className,
      hasImage ? dimRatioToClass(dimRatio) : '',
      {
        'has-max-width': maxWidth !== '',
        'has-background-dim': hasImage && dimRatio !== 0,
        'has-parallax': hasImage && hasParallax,
        'has-background': ! hasImage && (backgroundColor || customBackgroundColor),
        [ backgroundClass ]: ! hasImage && backgroundClass,
      }
    );

    const style = hasImage ? backgroundImageStyles(url) : {
      backgroundColor: backgroundClass ? undefined : customBackgroundColor,
    };
github WordPress / gutenberg / core-blocks / paragraph / index.js View on Github external
save( { attributes } ) {
				const {
					width,
					align,
					content,
					dropCap,
					backgroundColor,
					textColor,
					customBackgroundColor,
					customTextColor,
					fontSize,
					customFontSize,
				} = attributes;

				const textClass = getColorClass( 'color', textColor );
				const backgroundClass = getColorClass( 'background-color', backgroundColor );
				const fontSizeClass = fontSize && `is-${ fontSize }-text`;

				const className = classnames( {
					[ `align${ width }` ]: width,
					'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,
github WordPress / gutenberg / core-blocks / paragraph / index.js View on Github external
save( { attributes } ) {
				const {
					width,
					align,
					content,
					dropCap,
					backgroundColor,
					textColor,
					customBackgroundColor,
					customTextColor,
					fontSize,
					customFontSize,
				} = attributes;

				const textClass = getColorClass( 'color', textColor );
				const backgroundClass = getColorClass( 'background-color', backgroundColor );
				const fontSizeClass = fontSize && `is-${ fontSize }-text`;

				const className = classnames( {
					[ `align${ width }` ]: width,
					'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,