Implemented mechanism to use classes for configured colors instead of…

… inline styles.

blocks/color-palette/index.js

@@ -24,7 +24,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 @@
+.has-pale-pink-background-color {
+	background-color: #f78da7;
+}
+
+.has-vivid-red-background-color {
+	background-color: #cf2e2e;
+}
+
+.has-luminous-vivid-orange-background-color {
+	background-color: #ff6900;
+}
+
+.has-luminous-vivid-amber-background-color {
+	background-color: #fcb900;
+}
+
+.has-light-green-cyan-background-color {
+	background-color: #7bdcb5;
+}
+
+.has-vivid-green-cyan-background-color {
+	background-color: #00d084;
+}
+
+.has-pale-cyan-blue-background-color {
+	background-color: #8ed1fc;
+}
+
+.has-vivid-cyan-blue-background-color {
+	background-color: #0693e3;
+}
+
+.has-very-light-gray-background-color {
+	background-color: #eeeeee;
+}
+
+.has-cyan-bluish-gray-background-color {
+	background-color: #abb8c3;
+}
+
+.has-very-dark-gray-background-color {
+	background-color: #313131;
+}
+
+.has-pale-pink-color {
+	color: #f78da7;
+}
+
+.has-vivid-red-color {
+	color: #cf2e2e;
+}
+
+.has-luminous-vivid-orange-color {
+	color: #ff6900;
+}
+
+.has-luminous-vivid-amber-color {
+	color: #fcb900;
+}
+
+.has-light-green-cyan-color {
+	color: #7bdcb5;
+}
+
+.has-vivid-green-cyan-color {
+	color: #00d084;
+}
+
+.has-pale-cyan-blue-color {
+	color: #8ed1fc;
+}
+
+.has-vivid-cyan-blue-color {
+	color: #0693e3;
+}
+
+.has-very-light-gray-color {
+	color: #eeeeee;
+}
+
+.has-cyan-bluish-gray-color {
+	color: #abb8c3;
+}
+
+.has-very-dark-gray-color {
+	color: #313131;
+}

blocks/colors/utils.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { find, kebabCase } from 'lodash';
+
+/**
+ * Returns the color value based on an array of named colors and the namedColor or the customColor value.
+ *
+ * @param {Array}   colors      Array of color objects containing the "name" and "color" value as properties.
+ * @param {?string} namedColor  A string containing the color name.
+ * @param {?string} customColor A string containing the customColor value.
+ *
+ * @return {?string} If namedColor is passed and the name is found in colors it returns the color for that name.
+ * 					 Otherwise, the customColor parameter is returned.
+ */
+export const getColorValue = ( colors, namedColor, customColor ) => {
+	if ( namedColor ) {
+		const colorObj = find( colors, { name: namedColor } );
+		return colorObj && colorObj.color;
+	}
+	if ( customColor ) {
+		return customColor;
+	}
+};
+
+/**
+ * Returns a function that receives the color value and sets it using the attribute for named colors or for custom colors.
+ *
+ * @param {Array}  colors                   Array of color objects containing the "name" and "color" value as properties.
+ * @param {string} colorAttributeName       Name of the attribute where named colors are stored.
+ * @param {string} customColorAttributeName Name of the attribute where custom colors are stored.
+ * @param {string} setAttributes            A function that receives an object with the attributes to set.
+ *
+ * @return {function} A function that receives the color value and sets the attributes necessary to correctly store it.
+ */
+export const setColorValue = ( colors, colorAttributeName, customColorAttributeName, setAttributes ) =>
+	( colorValue ) => {
+		const colorObj = find( colors, { color: colorValue } );
+		setAttributes( {
+			[ colorAttributeName ]: colorObj && colorObj.name ? colorObj.name : undefined,
+			[ customColorAttributeName ]: colorObj && colorObj.name ? 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 }`;
+}

blocks/colors/with-colors.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getColorValue, getColorClass, setColorValue } from './utils';
+import { withEditorSettings } from '../editor-settings';
+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 createHigherOrderComponent(
+	withEditorSettings(
+		( settings, props ) => {
+			const colors = get( settings, [ 'colors' ], [] );
+			return {
+				initializeColor: ( { colorContext, colorAttribute, customColorAttribute } ) => ( {
+					value: getColorValue(
+						colors,
+						props.attributes[ colorAttribute ],
+						props.attributes[ customColorAttribute ]
+					),
+					class: getColorClass( colorContext, props.attributes[ colorAttribute ] ),
+					set: setColorValue( colors, colorAttribute, customColorAttribute, props.setAttributes ),
+				} ),
+			};
+		} ),
+	'withColors'
+);

blocks/editor-settings/index.js

@@ -15,17 +15,49 @@ import { createContext, createHigherOrderComponent } from '@wordpress/element';
 const DEFAULT_SETTINGS = {
 	alignWide: false,
 	colors: [
-		'#f78da7',
-		'#cf2e2e',
-		'#ff6900',
-		'#fcb900',
-		'#7bdcb5',
-		'#00d084',
-		'#8ed1fc',
-		'#0693e3',
-		'#eee',
-		'#abb8c3',
-		'#313131',
+		{
+			name: 'pale pink',
+			color: '#f78da7',
+		},
+		{	name: 'vivid red',
+			color: '#cf2e2e',
+		},
+		{
+			name: 'luminous vivid orange',
+			color: '#ff6900',
+		},
+		{
+			name: 'luminous vivid amber',
+			color: '#fcb900',
+		},
+		{
+			name: 'light green cyan',
+			color: '#7bdcb5',
+		},
+		{
+			name: 'vivid green cyan',
+			color: '#00d084',
+		},
+		{
+			name: 'pale cyan blue',
+			color: '#8ed1fc',
+		},
+		{
+			name: 'vivid cyan blue',
+			color: '#0693e3',
+		},
+		{
+			name: 'very light gray',
+			color: '#eeeeee',
+		},
+		{
+			name: 'cyan bluish gray',
+			color: '#abb8c3',
+		},
+		{
+			name: 'very dark gray',
+			color: '#313131',
+		},
 	],
 
 	// This is current max width of the block inner area

blocks/index.js

@@ -14,6 +14,7 @@ import './hooks';
 // and then stored as objects in state, from which it is then rendered for editing.
 export * from './api';
 export * from './autocompleters';
+export * from './colors';
 
 export { default as editorMediaUpload } from './editor-media-upload';
 export { default as AlignmentToolbar } from './alignment-toolbar';