Implemented mechanism to use classes for configured colors instead of…

… inline styles.

blocks/color-mechanism/index.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { find, kebabCase } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const ALLOWED_COLOR_CONTEXTS = [
+	'background',
+	'text',
+];
+
+export const getColorFromAttribute = ( colors ) => ( colorAttribute ) => {
+	if ( ! colorAttribute || colorAttribute[ 0 ] !== '%' ) {
+		return colorAttribute;
+	}
+	const colorObj = find( colors, { name: colorAttribute.slice( 1 ) } );
+	if ( ! colorObj ) {
+		return null;
+	}
+	return colorObj.color;
+};
+export const getAttributeFromColor = ( colors ) => ( color ) => {
+	const colorObj = find( colors, { color } );
+	if ( colorObj ) {
+		return '%' + colorObj.name;
+	}
+	return color;
+};
+
+export function getClassFromAttribute( colorContext, colorAttribute ) {
+	if ( ! colorContext || find( ALLOWED_COLOR_CONTEXTS, colorContext ) ) {
+		if ( window ) {
+			window.console.error( 'An invalid color context was passed.' );
+		}
+		return null;
+	}
+
+	if ( ! colorAttribute || colorAttribute[ 0 ] !== '%' ) {
+		return null;
+	}
+
+	return `has-${ kebabCase( colorAttribute.slice( 1 ) ) }-${ colorContext }-color`;
+}
+

blocks/color-mechanism/style.scss

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

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, ( { name, color } ) => {
 				const style = { color: color };
 				const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } );
 
@@ -34,7 +34,7 @@ export function ColorPalette( { colors, disableCustomColors = false, value, onCh
 							className={ className }
 							style={ style }
 							onClick={ applyOrUnset( color ) }
-							aria-label={ sprintf( __( 'Color: %s' ), color ) }
+							aria-label={ sprintf( __( 'Color: %s' ), name || color ) }
 							aria-pressed={ value === color }
 						/>
 					</div>

blocks/hooks/colors.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { getWrapperDisplayName } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import { withContext } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getAttributeFromColor, getColorFromAttribute } from '../color-mechanism';
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning the custom class name, if block supports custom class name.
+ *
+ * @param {function|Component} BlockEdit Original component.
+ *
+ * @return {string} Wrapped component.
+ */
+export function withColorMechanism( BlockEdit ) {
+	const BlockEditWithColorContext = withContext( 'editor' )(
+		( settings, props ) => ( settings ? {
+			getAttributeFromColor: getAttributeFromColor( settings.colors ),
+			getColorFromAttribute: getColorFromAttribute( settings.colors ),
+			setColorAttributeByColor: ( attribute ) => ( color ) => {
+				const attributeValue = getAttributeFromColor( settings.colors )( color );
+				props.setAttributes( { [ attribute ]: attributeValue || color } );
+			},
+		} : {} )
+	)( BlockEdit );
+
+	const WrappedBlockEdit = ( props ) => {
+		return <BlockEditWithColorContext { ...props } />;
+	};
+	WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'colorMechanism' );
+
+	return WrappedBlockEdit;
+}
+
+addFilter( 'blocks.BlockEdit', 'core/color-mechanism', withColorMechanism );

blocks/hooks/index.js

@@ -3,6 +3,7 @@
  */
 import './align';
 import './anchor';
+import './colors';
 import './custom-class-name';
 import './deprecated';
 import './generated-class-name';

blocks/library/button/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -17,6 +22,7 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
 import InspectorControls from '../../inspector-controls';
+import { getClassFromAttribute } from '../../color-mechanism';
 
 const { getComputedStyle } = window;
 
@@ -61,6 +67,8 @@ class ButtonBlock extends Component {
 			setAttributes,
 			isSelected,
 			className,
+			getColorFromAttribute,
+			setColorAttributeByColor,
 		} = this.props;
 
 		const {
@@ -73,13 +81,18 @@ class ButtonBlock extends Component {
 			clear,
 		} = attributes;
 
+		const textColorClass = getClassFromAttribute( 'text', textColor );
+		const backgroundColorClass = getClassFromAttribute( 'background', color );
+		const textColorValue = getColorFromAttribute( textColor );
+		const backgroundColorValue = getColorFromAttribute( color );
+
 		return [
 			isSelected && (
 				<BlockControls key="controls">
 					<BlockAlignmentToolbar value={ align } onChange={ this.updateAlignment } />
 				</BlockControls>
 			),
-			<span key="button" className={ className } title={ title } ref={ this.bindRef }>
+			<span key="button" className={ classnames( className, textColorClass, backgroundColorClass ) } title={ title } ref={ this.bindRef }>
 				<RichText
 					tagName="span"
 					placeholder={ __( 'Add text…' ) }
@@ -88,8 +101,8 @@ class ButtonBlock extends Component {
 					formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
 					className="wp-block-button__link"
 					style={ {
-						backgroundColor: color,
-						color: textColor,
+						backgroundColor: ! backgroundColorClass ? color : undefined,
+						color: ! textColorClass ? textColorValue : undefined,
 					} }
 					isSelected={ isSelected }
 					keepPlaceholderOnFocus
@@ -101,23 +114,23 @@ class ButtonBlock extends Component {
 							checked={ !! clear }
 							onChange={ this.toggleClear }
 						/>
-						<PanelColor title={ __( 'Background Color' ) } colorValue={ color } >
+						<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColorValue } >
 							<ColorPalette
-								value={ color }
-								onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+								value={ backgroundColorValue }
+								onChange={ setColorAttributeByColor( 'color' ) }
 							/>
 						</PanelColor>
-						<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } >
+						<PanelColor title={ __( 'Text Color' ) } colorValue={ textColorValue } >
 							<ColorPalette
-								value={ textColor }
-								onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+								value={ textColorValue }
+								onChange={ setColorAttributeByColor( 'textColor' ) }
 							/>
 						</PanelColor>
 						{ this.nodeRef && <ContrastCheckerWithFallbackStyles
 							node={ this.nodeRef }
-							textColor={ textColor }
-							backgroundColor={ color }
-							isLargeText={ true }
+							textColor={ textColorValue }
+							backgroundColor={ backgroundColorValue }
+							isLargeText
 						/> }
 					</InspectorControls>
 				}
@@ -201,16 +214,18 @@ export const settings = {
 
 	save( { attributes } ) {
 		const { url, text, title, align, color, textColor } = attributes;
+		const backgroundClass = getClassFromAttribute( 'background', color );
+		const textClass = getClassFromAttribute( 'text', textColor );
 
 		const buttonStyle = {
-			backgroundColor: color,
-			color: textColor,
+			backgroundColor: ! backgroundClass ? color : undefined,
+			color: ! textClass ? textColor : undefined,
 		};
 
 		const linkClass = 'wp-block-button__link';
 
 		return (
-			<div className={ `align${ align }` }>
+			<div className={ classnames( `align${ align }`, backgroundClass, textClass ) }>
 				<a className={ linkClass } href={ url } title={ title } style={ buttonStyle }>
 					{ text }
 				</a>

blocks/library/paragraph/editor.scss

@@ -1,3 +1,3 @@
-.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;
 }