Skip to content

Commit

Permalink
Implemented mechanism to use classes for configured colors instead of…
Browse files Browse the repository at this point in the history
… inline styles.
  • Loading branch information
jorgefilipecosta committed Apr 18, 2018
1 parent 6cc5db3 commit 66a8a26
Show file tree
Hide file tree
Showing 11 changed files with 365 additions and 49 deletions.
2 changes: 1 addition & 1 deletion blocks/color-palette/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 } );

Expand Down
2 changes: 1 addition & 1 deletion blocks/color-palette/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
2 changes: 2 additions & 0 deletions blocks/colors/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { getColorClass } from './utils';
export { default as withColors } from './with-colors';
87 changes: 87 additions & 0 deletions blocks/colors/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
59 changes: 59 additions & 0 deletions blocks/colors/utils.js
Original file line number Diff line number Diff line change
@@ -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 }`;
}
49 changes: 49 additions & 0 deletions blocks/colors/with-colors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* External dependencies
*/
import { get } from 'lodash';

/**
* WordPress dependencies
*/
import { getWrapperDisplayName } 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 function withColors( WrappedComponent ) {
const ComponentWithColorContext = 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 ),
} ),
};
} )( WrappedComponent );

const EnhancedComponent = ( props ) => {
return <ComponentWithColorContext { ...props } />;
};
EnhancedComponent.displayName = getWrapperDisplayName( ComponentWithColorContext, 'withColors' );

return EnhancedComponent;
}
54 changes: 43 additions & 11 deletions blocks/editor-settings/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions blocks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 Autocomplete } from './autocomplete';
Expand Down
Loading

0 comments on commit 66a8a26

Please sign in to comment.