Update the columns block to use the new colors hook

WordPress · Mar 24, 2020 · 5a2e929 · 5a2e929
1 parent 192bcf4
commit 5a2e929
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 81 deletions.
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
@@ -4,18 +4,6 @@
 	"attributes": {
 		"verticalAlignment": {
 			"type": "string"
-		},
-		"backgroundColor": {
-			"type": "string"
-		},
-		"customBackgroundColor": {
-			"type": "string"
-		},
-		"customTextColor" : {
-			"type": "string"
-		},
-		"textColor": {
-			"type": "string"
 		}
 	}
 }
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
@@ -9,15 +9,13 @@ import { dropRight, get, map, times } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody, RangeControl } from '@wordpress/components';
-import { useRef } from '@wordpress/element';
 
 import {
 	InspectorControls,
 	InnerBlocks,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,
-	__experimentalUseColors,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -61,22 +59,6 @@ function ColumnsEditContainer( {
 		[ clientId ]
 	);
 
-	const ref = useRef();
-	const {
-		BackgroundColor,
-		InspectorControlsColorPanel,
-		TextColor,
-	} = __experimentalUseColors(
-		[
-			{ name: 'textColor', property: 'color' },
-			{ name: 'backgroundColor', className: 'has-background' },
-		],
-		{
-			contrastCheckers: [ { backgroundColor: true, textColor: true } ],
-			colorDetector: { targetRef: ref },
-		}
-	);
-
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
@@ -100,32 +82,14 @@ function ColumnsEditContainer( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			{ InspectorControlsColorPanel }
-			<BackgroundColor>
-				{ ( backgroundProps ) => (
-					<TextColor>
-						{ ( textColorProps ) => (
-							<InnerBlocks
-								allowedBlocks={ ALLOWED_BLOCKS }
-								__experimentalMoverDirection="horizontal"
-								ref={ ref }
-								__experimentalTagName={ Block.div }
-								__experimentalPassedProps={ {
-									className: classnames(
-										classes,
-										backgroundProps.className,
-										textColorProps.className
-									),
-									style: {
-										...backgroundProps.style,
-										...textColorProps.style,
-									},
-								} }
-							/>
-						) }
-					</TextColor>
-				) }
-			</BackgroundColor>
+			<InnerBlocks
+				allowedBlocks={ ALLOWED_BLOCKS }
+				__experimentalMoverDirection="horizontal"
+				__experimentalTagName={ Block.div }
+				__experimentalPassedProps={ {
+					className: classes,
+				} }
+			/>
 		</>
 	);
 }

diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
@@ -27,6 +27,7 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 		lightBlockWrapper: true,
+		__experimentalColor: true,
 	},
 	variations,
 	example: {

diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
@@ -6,39 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const {
-		verticalAlignment,
-		backgroundColor,
-		customBackgroundColor,
-		textColor,
-		customTextColor,
-	} = attributes;
-
-	const backgroundClass = getColorClassName(
-		'background-color',
-		backgroundColor
-	);
-
-	const textClass = getColorClassName( 'color', textColor );
+	const { verticalAlignment } = attributes;
 
 	const className = classnames( {
-		'has-background': backgroundColor || customBackgroundColor,
-		'has-text-color': textColor || customTextColor,
-		[ backgroundClass ]: backgroundClass,
-		[ textClass ]: textClass,
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
-	const style = {
-		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-		color: textClass ? undefined : customTextColor,
-	};
-
 	return (
-		<div className={ className ? className : undefined } style={ style }>
+		<div className={ className ? className : undefined }>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,8 @@
 .wp-block-columns {
 	display: flex;
 	margin-bottom: $default-block-margin;
+	background-color: var(--wp--color--background);
+	color: var(--wp--color--text);
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;