Implemented color class mechanism in button. (#6422)

WordPress · Apr 27, 2018 · 41594cd · 41594cd
1 parent 81af13e
commit 41594cd
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 32 deletions.
diff --git a/core-blocks/button/index.js b/core-blocks/button/index.js
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit, pick } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -19,6 +25,8 @@ import {
 	ColorPalette,
 	ContrastChecker,
 	InspectorControls,
+	getColorClass,
+	withColors,
 } from '@wordpress/blocks';
 
 /**
@@ -67,6 +75,7 @@ class ButtonBlock extends Component {
 	render() {
 		const {
 			attributes,
+			initializeColor,
 			setAttributes,
 			isSelected,
 			className,
@@ -77,11 +86,20 @@ class ButtonBlock extends Component {
 			url,
 			title,
 			align,
-			color,
-			textColor,
 			clear,
 		} = attributes;
 
+		const textColor = initializeColor( {
+			colorContext: 'color',
+			colorAttribute: 'textColor',
+			customColorAttribute: 'customTextColor',
+		} );
+		const backgroundColor = initializeColor( {
+			colorContext: 'background-color',
+			colorAttribute: 'backgroundColor',
+			customColorAttribute: 'customBackgroundColor',
+		} );
+
 		return (
 			<Fragment>
 				<BlockControls>
@@ -94,10 +112,17 @@ class ButtonBlock extends Component {
 						value={ text }
 						onChange={ ( value ) => setAttributes( { text: value } ) }
 						formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
-						className="wp-block-button__link"
+						className={ classnames(
+							'wp-block-button__link', {
+								'has-background': backgroundColor.value,
+								[ backgroundColor.class ]: backgroundColor.class,
+								'has-text-color': textColor.value,
+								[ textColor.class ]: textColor.class,
+							}
+						) }
 						style={ {
-							backgroundColor: color,
-							color: textColor,
+							backgroundColor: backgroundColor.class ? undefined : backgroundColor.value,
+							color: textColor.class ? undefined : textColor.value,
 						} }
 						keepPlaceholderOnFocus
 					/>
@@ -108,22 +133,22 @@ class ButtonBlock extends Component {
 								checked={ !! clear }
 								onChange={ this.toggleClear }
 							/>
-							<PanelColor title={ __( 'Background Color' ) } colorValue={ color } >
+							<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor.value } >
 								<ColorPalette
-									value={ color }
-									onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+									value={ backgroundColor.value }
+									onChange={ backgroundColor.set }
 								/>
 							</PanelColor>
-							<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } >
+							<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor.value } >
 								<ColorPalette
-									value={ textColor }
-									onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+									value={ textColor.value }
+									onChange={ textColor.set }
 								/>
 							</PanelColor>
 							{ this.nodeRef && <ContrastCheckerWithFallbackStyles
 								node={ this.nodeRef }
-								textColor={ textColor }
-								backgroundColor={ color }
+								textColor={ textColor.value }
+								backgroundColor={ backgroundColor.value }
 								isLargeText={ true }
 							/> }
 						</PanelBody>
@@ -168,16 +193,30 @@ const blockAttributes = {
 		type: 'string',
 		default: 'none',
 	},
-	color: {
+	backgroundColor: {
 		type: 'string',
 	},
 	textColor: {
 		type: 'string',
 	},
+	customBackgroundColor: {
+		type: 'string',
+	},
+	customTextColor: {
+		type: 'string',
+	},
 };
 
 export const name = 'core/button';
 
+const colorsMigration = ( attributes ) => {
+	return omit( {
+		...attributes,
+		customTextColor: attributes.textColor && '#' === attributes.textColor[ 0 ] ? attributes.textColor : undefined,
+		customBackgroundColor: attributes.color && '#' === attributes.color[ 0 ] ? attributes.color : undefined,
+	}, [ 'color', 'textColor' ] );
+};
+
 export const settings = {
 	title: __( 'Button' ),
 
@@ -204,23 +243,40 @@ export const settings = {
 		return props;
 	},
 
-	edit: ButtonBlock,
+	edit: withColors( ButtonBlock ),
 
 	save( { attributes } ) {
-		const { url, text, title, align, color, textColor } = attributes;
+		const {
+			url,
+			text,
+			title,
+			align,
+			backgroundColor,
+			textColor,
+			customBackgroundColor,
+			customTextColor,
+		} = attributes;
+
+		const textClass = getColorClass( 'color', textColor );
+		const backgroundClass = getColorClass( 'background-color', backgroundColor );
+
+		const buttonClasses = classnames( 'wp-block-button__link', {
+			'has-text-color': textColor || customTextColor,
+			[ textClass ]: textClass,
+			'has-background': backgroundColor || customBackgroundColor,
+			[ backgroundClass ]: backgroundClass,
+		} );
 
 		const buttonStyle = {
-			backgroundColor: color,
-			color: textColor,
+			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+			color: textClass ? undefined : customTextColor,
 		};
 
-		const linkClass = 'wp-block-button__link';
-
 		return (
 			<div className={ `align${ align }` }>
 				<RichText.Content
 					tagName="a"
-					className={ linkClass }
+					className={ buttonClasses }
 					href={ url }
 					title={ title }
 					style={ buttonStyle }
@@ -231,7 +287,51 @@ export const settings = {
 	},
 
 	deprecated: [ {
-		attributes: blockAttributes,
+		attributes: {
+			...pick( blockAttributes, [ 'url', 'title', 'text', 'align' ] ),
+			color: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+		},
+
+		save( { attributes } ) {
+			const { url, text, title, align, color, textColor } = attributes;
+
+			const buttonStyle = {
+				backgroundColor: color,
+				color: textColor,
+			};
+
+			const linkClass = 'wp-block-button__link';
+
+			return (
+				<div className={ `align${ align }` }>
+					<RichText.Content
+						tagName="a"
+						className={ linkClass }
+						href={ url }
+						title={ title }
+						style={ buttonStyle }
+						value={ text }
+					/>
+				</div>
+			);
+		},
+		migrate: colorsMigration,
+	},
+	{
+		attributes: {
+			...pick( blockAttributes, [ 'url', 'title', 'text', 'align' ] ),
+			color: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+		},
 
 		save( { attributes } ) {
 			const { url, text, title, align, color, textColor } = attributes;
@@ -248,5 +348,7 @@ export const settings = {
 				</div>
 			);
 		},
-	} ],
+		migrate: colorsMigration,
+	},
+	],
 };
diff --git a/core-blocks/button/style.scss b/core-blocks/button/style.scss
@@ -5,11 +5,9 @@ $blocks-button__line-height: $big-font-size + 6px;
 	margin-bottom: 1.5em;
 
 	& .wp-block-button__link {
-		background-color: $dark-gray-700;
 		border: none;
 		border-radius: $blocks-button__height / 2;
 		box-shadow: none;
-		color: $white;
 		cursor: pointer;
 		display: inline-block;
 		font-size: $big-font-size;
@@ -20,13 +18,6 @@ $blocks-button__line-height: $big-font-size + 6px;
 		text-decoration: none;
 		white-space: normal;
 		word-break: break-all;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: $dark-gray-700;
-			color: $white;
-		}
 	}
 
 	&.aligncenter {
@@ -37,3 +28,21 @@ $blocks-button__line-height: $big-font-size + 6px;
 		text-align: right;
 	}
 }
+
+.wp-block-button__link:not(.has-background) {
+	background-color: $dark-gray-700;
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: $dark-gray-700;
+	}
+}
+
+.wp-block-button__link:not(.has-text-color) {
+	color: $white;
+	&:hover,
+	&:focus,
+	&:active {
+		color: $white;
+	}
+}