Reply To: How to get a color class name

[mengland]

I have one final follow up and I wanted to share this because it was a lot of work to get here. I have a working example of a block that pulls in custom colors that have been defined in theme support. The original link I shared showed how to utilize your own custom color sets defined at the block level.

/**
* Based on a block by Florian Brinkmann
*/

import classnames from 'classnames';

const {
	registerBlockType,
} = wp.blocks;
const {
	InspectorControls,
	InnerBlocks,
	PanelColor,
	withColors,
	getColorClass
} = wp.editor;
const {
	PanelBody,
	withFallbackStyles,
	ColorPalette,
} = wp.components;

const {
	compose,
	Component,
} = wp.element;

const {getComputedStyle} = window;

const FallbackStyles = withFallbackStyles((node, ownProps) => {
	const {textColor, backgroundColor} = ownProps.attributes;
	const editableNode = node.querySelector('[contenteditable="true"]');
	//verify if editableNode is available, before using getComputedStyle.
	const computedStyles = editableNode ? getComputedStyle(editableNode) : null;
	return {
		fallbackBackgroundColor: backgroundColor || !computedStyles ? undefined : computedStyles.backgroundColor,
		fallbackTextColor: textColor || !computedStyles ? undefined : computedStyles.color,
	};
});

class OneColumnBlock extends Component {
	constructor() {
		super(...arguments);
	}

	render() {
		const {
			attributes,
			setAttributes,
			mergeBlocks,
			onReplace,
			className,
			backgroundColor,
			textColor,
			setBackgroundColor,
			setTextColor,
			fallbackBackgroundColor,
			fallbackTextColor,
			fallbackFontSize,
		} = this.props;

		const {
			align,
			content,
			dropCap,
			placeholder,
		} = attributes;

		return (
			<div
				className={classnames(className, {
					'has-background': backgroundColor.value,
					[backgroundColor.class]: backgroundColor.class,
					[textColor.class]: textColor.class,
				})}

				style={{
					backgroundColor: backgroundColor.value,
					color: textColor.value,
				}}
			>
				<InnerBlocks
        layouts={ [
          { name: 'inner-content', label: 'Story Container', icon: 'columns' },
        ] }

        template={
          [
            [ 'core/heading', { layout:'inner-content', placeholder:'Example Title...' } ],
            [ 'core/paragraph', { layout:'inner-content', placeholder:'Example Heading...' } ],
          ]
        }
        />
				<InspectorControls>
						<PanelColor
              {...{
                title: 'Background Color',
                colorName: backgroundColor.name,
                colorValue: backgroundColor.value,
                initialOpen: false,
                onChange: setBackgroundColor
              } }
            />

            <PanelColor
              {...{
                title: 'Text Color',
                colorName: textColor.name,
                colorValue: textColor.value,
                initialOpen: false,
                onChange: setTextColor
              } }
            />

				</InspectorControls>
			</div>
		);
	}
}

export default registerBlockType('slug/one-column', {
	title: 'ColorPanel Example Column',
	icon: 'admin-appearance',
	category: 'common',
	edit: compose( [
		withColors('backgroundColor', {textColor: 'color'}),
		FallbackStyles,
	] )(OneColumnBlock),
	save: props => {
		const {
			backgroundColor,
			textColor,
			customBackgroundColor,
			customTextColor,
		} = props.attributes;

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

		const className = classnames( {
			'has-background': backgroundColor || customBackgroundColor,
			[ textClass ]: textClass,
			[ backgroundClass ]: backgroundClass,
		} );
		return (
			<div className={className}>
				<InnerBlocks.Content/>
			</div>
		);
	},
});