From 9b99d2ee0e3a06c96de6662e144afb3482b191b3 Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 26 Feb 2018 22:43:33 +0000 Subject: [PATCH] Implemented mechanism to use classes for configured colors instead of inline styles. --- blocks/color-palette/index.js | 2 +- blocks/color-palette/test/index.js | 2 +- blocks/colors/index.js | 2 + blocks/colors/style.scss | 87 ++++++++++++++++++++++++++++ blocks/colors/utils.js | 39 +++++++++++++ blocks/colors/with-colors.js | 49 ++++++++++++++++ blocks/index.js | 1 + blocks/library/paragraph/editor.scss | 2 +- blocks/library/paragraph/index.js | 65 +++++++++++++++------ editor/components/provider/index.js | 54 +++++++++++++---- 10 files changed, 270 insertions(+), 33 deletions(-) create mode 100644 blocks/colors/index.js create mode 100644 blocks/colors/style.scss create mode 100644 blocks/colors/utils.js create mode 100644 blocks/colors/with-colors.js diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js index cd540ada1b4c64..332dcc52b6ddfe 100644 --- a/blocks/color-palette/index.js +++ b/blocks/color-palette/index.js @@ -23,7 +23,7 @@ export function ColorPalette( { colors, disableCustomColors = false, value, onCh return (
- { map( colors, ( color ) => { + { map( colors, ( { color } ) => { const style = { color: color }; const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } ); diff --git a/blocks/color-palette/test/index.js b/blocks/color-palette/test/index.js index 96ddc339cdf94a..f8bc82d7ce8e7e 100644 --- a/blocks/color-palette/test/index.js +++ b/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(); diff --git a/blocks/colors/index.js b/blocks/colors/index.js new file mode 100644 index 00000000000000..29b52a42d88e56 --- /dev/null +++ b/blocks/colors/index.js @@ -0,0 +1,2 @@ +export { getColorClass } from './utils'; +export { default as withColors } from './with-colors'; diff --git a/blocks/colors/style.scss b/blocks/colors/style.scss new file mode 100644 index 00000000000000..4534c64bb19550 --- /dev/null +++ b/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-text-color { + color: #f78da7; +} + +.has-vivid-red-text-color { + color: #cf2e2e; +} + +.has-luminous-vivid-orange-text-color { + color: #ff6900; +} + +.has-luminous-vivid-amber-text-color { + color: #fcb900; +} + +.has-light-green-cyan-text-color { + color: #7bdcb5; +} + +.has-vivid-green-cyan-text-color { + color: #00d084; +} + +.has-pale-cyan-blue-text-color { + color: #8ed1fc; +} + +.has-vivid-cyan-blue-text-color { + color: #0693e3; +} + +.has-very-light-gray-text-color { + color: #eeeeee; +} + +.has-cyan-bluish-gray-text-color { + color: #abb8c3; +} + +.has-very-dark-gray-text-color { + color: #313131; +} diff --git a/blocks/colors/utils.js b/blocks/colors/utils.js new file mode 100644 index 00000000000000..cb64ad4941bc46 --- /dev/null +++ b/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`; +} diff --git a/blocks/colors/with-colors.js b/blocks/colors/with-colors.js new file mode 100644 index 00000000000000..a91d0f7d4d4c88 --- /dev/null +++ b/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: ( { 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 ; + }; + EnhancedComponent.displayName = getWrapperDisplayName( ComponentWithColorContext, 'colorMechanism' ); + + return EnhancedComponent; +} diff --git a/blocks/index.js b/blocks/index.js index c157fc834c928f..c24a3e3bc37c08 100644 --- a/blocks/index.js +++ b/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'; diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss index e5fe10296b7f15..2149aadb63e835 100644 --- a/blocks/library/paragraph/editor.scss +++ b/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; } diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js index 381584c17a91f9..e3570c60bba98a 100644 --- a/blocks/library/paragraph/index.js +++ b/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,6 +130,7 @@ class ParagraphBlock extends Component { mergeBlocks, onReplace, className, + initializeColor, } = this.props; const { @@ -136,13 +138,22 @@ class ParagraphBlock extends Component { content, dropCap, placeholder, - backgroundColor, - textColor, width, } = attributes; const fontSize = this.getFontSize(); + const textColor = initializeColor( { + colorContext: 'text', + colorAttribute: 'textColor', + customColorAttribute: 'customTextColor', + } ); + const backgroundColor = initializeColor( { + colorContext: 'background', + colorAttribute: 'backgroundColor', + customColorAttribute: 'customBackgroundColor', + } ); + return [ isSelected && ( @@ -198,22 +209,22 @@ class ParagraphBlock extends Component { onChange={ this.toggleDropCap } /> - + setAttributes( { backgroundColor: colorValue } ) } + value={ backgroundColor.value } + onChange={ backgroundColor.set } /> - + setAttributes( { textColor: colorValue } ) } + value={ textColor.value } + onChange={ textColor.set } /> { this.nodeRef && = 18 } /> } @@ -233,12 +244,14 @@ class ParagraphBlock extends Component {