Implemented mechanism to use classes for configured colors instead of…

… inline styles.

blocks/color-palette/index.js

@@ -23,7 +23,7 @@ export function ColorPalette( { colors, disableCustomColors = false, value, onCh
 
 	return (
 		<div className="blocks-color-palette">
-			{ map( colors, ( color ) => {
+			{ map( colors, ( { color } ) => {
 				const style = { color: color };
 				const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } );
 

blocks/color-palette/test/index.js

@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 import { ColorPalette } from '../';
 
 describe( 'ColorPalette', () => {
-	const colors = [ 'red', 'white', 'blue' ];
+	const colors = [ { name: 'red', color: 'red' }, { name: 'white', color: 'white' }, { name: 'blue', color: 'blue' } ];
 	const currentColor = 'red';
 	const onChange = jest.fn();
 

blocks/colors/index.js

@@ -0,0 +1,2 @@
+export { getColorClass } from './utils';
+export { default as withColors } from './with-colors';

blocks/colors/style.scss

@@ -0,0 +1,87 @@
+p.has-pale-pink-background-color {
+	background-color: #f78da7;
+}
+
+p.has-vivid-red-background-color {
+	background-color: #cf2e2e;
+}
+
+p.has-luminous-vivid-orange-background-color {
+	background-color: #ff6900;
+}
+
+p.has-luminous-vivid-amber-background-color {
+	background-color: #fcb900;
+}
+
+p.has-light-green-cyan-background-color {
+	background-color: #7bdcb5;
+}
+
+p.has-vivid-green-cyan-background-color {
+	background-color: #00d084;
+}
+
+p.has-pale-cyan-blue-background-color {
+	background-color: #8ed1fc;
+}
+
+p.has-vivid-cyan-blue-background-color {
+	background-color: #0693e3;
+}
+
+p.has-very-light-gray-background-color {
+	background-color: #eeeeee;
+}
+
+p.has-cyan-bluish-gray-background-color {
+	background-color: #abb8c3;
+}
+
+p.has-very-dark-gray-background-color {
+	background-color: #313131;
+}
+
+p.has-pale-pink-text-color {
+	color: #f78da7;
+}
+
+p.has-vivid-red-text-color {
+	color: #cf2e2e;
+}
+
+p.has-luminous-vivid-orange-text-color {
+	color: #ff6900;
+}
+
+p.has-luminous-vivid-amber-text-color {
+	color: #fcb900;
+}
+
+p.has-light-green-cyan-text-color {
+	color: #7bdcb5;
+}
+
+p.has-vivid-green-cyan-text-color {
+	color: #00d084;
+}
+
+p.has-pale-cyan-blue-text-color {
+	color: #8ed1fc;
+}
+
+p.has-vivid-cyan-blue-text-color {
+	color: #0693e3;
+}
+
+p.has-very-light-gray-text-color {
+	color: #eeeeee;
+}
+
+p.has-cyan-bluish-gray-text-color {
+	color: #abb8c3;
+}
+
+p.has-very-dark-gray-text-color {
+	color: #313131;
+}

blocks/colors/utils.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { find, kebabCase } from 'lodash';
+
+export const getColorValue = ( colors, namedColor, customColor ) => {
+	if ( namedColor ) {
+		const colorObj = find( colors, { name: namedColor } );
+		return colorObj && colorObj.color;
+	}
+	if ( customColor ) {
+		return customColor;
+	}
+};
+
+export const setColorValue = ( colors, colorAttributeName, customColorAttributeName, setAttributes ) =>
+	( colorValue ) => {
+		const colorObj = find( colors, { color: colorValue } );
+		setAttributes( {
+			[ colorAttributeName ]: colorObj ? colorObj.name : undefined,
+			[ customColorAttributeName ]: colorObj ? undefined : colorValue,
+		} );
+	};
+
+/**
+ * Returns a class based on the context a color is being used and its name.
+ *
+ * @param {string} colorContextName Context/place where color is being used e.g: background, text etc...
+ * @param {string} colorName        Name of the color.
+ *
+ * @return {string} String with the class corresponding to the color in the provided context.
+ */
+export function getColorClass( colorContextName, colorName ) {
+	if ( ! colorContextName || ! colorName ) {
+		return;
+	}
+
+	return `has-${ kebabCase( colorName ) }-${ colorContextName }-color`;
+}

blocks/colors/with-colors.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { getWrapperDisplayName } from '@wordpress/element';
+import { withContext } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getColorValue, getColorClass, setColorValue } from './utils';
+import './style.scss';
+
+/**
+ * Higher-order component, which handles color logic for class generation
+ * color value, retrieval and color attribute setting.
+ *
+ * @param {WPElement} WrappedComponent The wrapped component.
+ *
+ * @return {Component} Component with a new colors prop.
+ */
+export default function withColors( WrappedComponent ) {
+	const ComponentWithColorContext = withContext( 'editor' )(
+		( settings, props ) => {
+			const colors = get( settings, [ 'colors' ], [] );
+			return {
+				initializeColor: ( colorContextName, colorAttributeName, customColorAttributeName ) => ( {
+					value: getColorValue(
+						colors,
+						props.attributes[ colorAttributeName ],
+						props.attributes[ customColorAttributeName ]
+					),
+					class: getColorClass( colorContextName, props.attributes[ colorAttributeName ] ),
+					set: setColorValue( colors, colorAttributeName, customColorAttributeName, props.setAttributes ),
+				} ),
+			};
+		} )( WrappedComponent );
+
+	const EnhancedComponent = ( props ) => {
+		return <ComponentWithColorContext { ...props } />;
+	};
+	EnhancedComponent.displayName = getWrapperDisplayName( ComponentWithColorContext, 'colorMechanism' );
+
+	return EnhancedComponent;
+}

blocks/index.js

@@ -13,6 +13,7 @@ import './hooks';
 // Blocks are inferred from the HTML source of a post through a parsing mechanism
 // and then stored as objects in state, from which it is then rendered for editing.
 export * from './api';
+export * from './colors';
 export { registerCoreBlocks } from './library';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';

blocks/library/paragraph/editor.scss

@@ -1,4 +1,4 @@
-.editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph {
+.editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph:not( .has-background ) {
 	background: white;
 }
 

blocks/library/paragraph/index.js

@@ -34,6 +34,7 @@ import RichText from '../../rich-text';
 import InspectorControls from '../../inspector-controls';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import { getColorClass, withColors } from '../../colors';
 
 const { getComputedStyle } = window;
 
@@ -129,20 +130,22 @@ class ParagraphBlock extends Component {
 			mergeBlocks,
 			onReplace,
 			className,
+			initializeColor,
 		} = this.props;
 
 		const {
 			align,
 			content,
 			dropCap,
 			placeholder,
-			backgroundColor,
-			textColor,
 			width,
 		} = attributes;
 
 		const fontSize = this.getFontSize();
 
+		const textColor = initializeColor( 'text', 'textColor', 'customTextColor' );
+		const backgroundColor = initializeColor( 'background', 'backgroundColor', 'customBackgroundColor' );
+
 		return [
 			isSelected && (
 				<BlockControls key="controls">
@@ -198,22 +201,22 @@ class ParagraphBlock extends Component {
 							onChange={ this.toggleDropCap }
 						/>
 					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
+					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor.value } initialOpen={ false }>
 						<ColorPalette
-							value={ backgroundColor }
-							onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
+							value={ backgroundColor.value }
+							onChange={ backgroundColor.set }
 						/>
 					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
+					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor.value } initialOpen={ false }>
 						<ColorPalette
-							value={ textColor }
-							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+							value={ textColor.value }
+							onChange={ textColor.set }
 						/>
 					</PanelColor>
 					{ this.nodeRef && <ContrastCheckerWithFallbackStyles
 						node={ this.nodeRef }
-						textColor={ textColor }
-						backgroundColor={ backgroundColor }
+						textColor={ textColor.value }
+						backgroundColor={ backgroundColor.value }
 						isLargeText={ fontSize >= 18 }
 					/> }
 					<PanelBody title={ __( 'Block Alignment' ) }>
@@ -233,12 +236,14 @@ class ParagraphBlock extends Component {
 						<RichText
 							tagName="p"
 							className={ classnames( 'wp-block-paragraph', className, {
-								'has-background': backgroundColor,
+								'has-background': backgroundColor.value,
 								'has-drop-cap': dropCap,
+								[ backgroundColor.class ]: backgroundColor.class,
+								[ textColor.class ]: textColor.class,
 							} ) }
 							style={ {
-								backgroundColor: backgroundColor,
-								color: textColor,
+								backgroundColor: ! backgroundColor.class ? backgroundColor.value : undefined,
+								color: ! textColor.class ? textColor.value : undefined,
 								fontSize: fontSize ? fontSize + 'px' : undefined,
 								textAlign: align,
 							} }
@@ -302,9 +307,15 @@ const schema = {
 	textColor: {
 		type: 'string',
 	},
+	customTextColor: {
+		type: 'string',
+	},
 	backgroundColor: {
 		type: 'string',
 	},
+	customBackgroundColor: {
+		type: 'string',
+	},
 	fontSize: {
 		type: 'string',
 	},
@@ -415,7 +426,7 @@ export const settings = {
 		}
 	},
 
-	edit: ParagraphBlock,
+	edit: withColors( ParagraphBlock ),
 
 	save( { attributes } ) {
 		const {
@@ -425,20 +436,27 @@ export const settings = {
 			dropCap,
 			backgroundColor,
 			textColor,
+			customBackgroundColor,
+			customTextColor,
 			fontSize,
 			customFontSize,
 		} = attributes;
 
+		const textClass = getColorClass( 'text', textColor );
+		const backgroundClass = getColorClass( 'background', backgroundColor );
+
 		const className = classnames( {
 			[ `align${ width }` ]: width,
-			'has-background': backgroundColor,
+			'has-background': backgroundColor || customBackgroundColor,
 			'has-drop-cap': dropCap,
 			[ `is-${ fontSize }-text` ]: fontSize && FONT_SIZES[ fontSize ],
+			[ textClass ]: textClass,
+			[ backgroundClass ]: backgroundClass,
 		} );
 
 		const styles = {
-			backgroundColor: backgroundColor,
-			color: textColor,
+			backgroundColor: ! backgroundColor ? customBackgroundColor : undefined,
+			color: ! textColor ? customTextColor : undefined,
 			fontSize: ! fontSize && customFontSize ? customFontSize : undefined,
 			textAlign: align,
 		};