JavaScript for WordPress › Forums › Gutenberg Development › How to get a color class name › Reply To: How to get a color class name
July 10, 2018 at 6:40 pm
#51769
Participant
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>
);
},
});