diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 022d64285361e9..8dc01cfafab4dd 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -10,6 +10,12 @@ }, "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 index b0eb2b9adc14ec..e110e98949fa84 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -9,6 +9,8 @@ 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, @@ -59,12 +61,21 @@ function ColumnsEditContainer( { [ clientId ] ); + const ref = useRef(); const { BackgroundColor, InspectorControlsColorPanel, - } = __experimentalUseColors( [ - { name: 'backgroundColor', className: 'has-background' }, - ] ); + TextColor, + } = __experimentalUseColors( + [ + { name: 'textColor', property: 'color' }, + { name: 'backgroundColor', className: 'has-background' }, + ], + { + contrastCheckers: { backgroundColor: true, textColor: true }, + colorDetector: { targetRef: ref }, + } + ); const classes = classnames( className, { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, @@ -91,12 +102,14 @@ function ColumnsEditContainer( { { InspectorControlsColorPanel } -
- -
+ +
+ +
+
); diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js index 41d0f8d26e0e70..3d2249389910d2 100644 --- a/packages/block-library/src/columns/save.js +++ b/packages/block-library/src/columns/save.js @@ -13,6 +13,8 @@ export default function save( { attributes } ) { verticalAlignment, backgroundColor, customBackgroundColor, + textColor, + customTextColor, } = attributes; const backgroundClass = getColorClassName( @@ -20,14 +22,19 @@ export default function save( { attributes } ) { backgroundColor ); + const textClass = getColorClassName( 'color', textColor ); + 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 (