withColorsを使ったサンプル

OneColumnBlock.js

import classnames from 'classnames';

const {
  registerBlockType,
} = wp.blocks;
const {
  InspectorControls,
  RichText,
  withColors,
  getColorClassName,
  PanelColorSettings
} = wp.editor;
const {
  PanelBody,
  withFallbackStyles,
  PanelColor,
  ColorPalette,
} = wp.components;

const {
  Component,
} = wp.element;

const {
  compose
} = wp.compose;

const {getComputedStyle} = window;

const FallbackStyles = withFallbackStyles((node, ownProps) => {
  const {textColor, backgroundColor} = ownProps.attributes;
  const editableNode = node.querySelector('[contenteditable="true"]');
  //verify if editableNode is available, before using getComputedStyle.
  const computedStyles = editableNode ? getComputedStyle(editableNode) : null;
  return {
    fallbackBackgroundColor: backgroundColor || !computedStyles ? undefined : computedStyles.backgroundColor,
    fallbackTextColor: textColor || !computedStyles ? undefined : computedStyles.color,
  };
});

class OneColumnBlock extends Component {
  constructor() {
    super(...arguments);
  }

  render() {
    const {
      attributes,
      setAttributes,
      mergeBlocks,
      onReplace,
      className,
      backgroundColor,
      textColor,
      setBackgroundColor,
      setTextColor,
      fallbackBackgroundColor,
      fallbackTextColor,
      fallbackFontSize,
    } = this.props;

    console.log(backgroundColor);
    console.log(textColor);

    const {
      align,
      content,
      dropCap,
      placeholder,
    } = attributes;

    const textColors = [
      {
        name: 'Tundora',
        slug: 'tundora',
        color: '#454545'
      },
    ];

    const backgroundColors = [
      {
        name: 'Puerto Rico',
        slug: 'puerto-rico',
        color: '#53c4ab'
      },
      {
        name: 'Butterfly Bush',
        slug: 'butterfly-bush',
        color: '#5151a0'
      },
      {
        name: 'White',
        slug: 'white',
        color: '#ffffff'
      }
    ];
    return (
      <div
        className={classnames(className, {
          'has-background': backgroundColor.color,
          [backgroundColor.class]: backgroundColor.class,
          [textColor.class]: textColor.class,
        })}

        style={{
          backgroundColor: backgroundColor.color,
          color: textColor.color,
        }}
      >

        <RichText
          value={ content }
        />
        <InspectorControls>
          <PanelColorSettings
            title="'Farbschema"
            colorSettings={[
              {
                colors: textColors,
                label: 'Textfarbe',
                onChange: setTextColor,
                value: textColor.color,
                disableCustomColors: true,
              },
              {
                colors: backgroundColors,
                label: 'Hintergrundfarbe',
                onChange: setBackgroundColor,
                value: backgroundColor.color,
                disableCustomColors: true,
              }
            ]}
          />
        </InspectorControls>
      </div>
    );
  }
}

export default registerBlockType('slug/one-column', {
  title: 'Eine Spalte',
  icon: 'admin-post',
  category: 'layout',
  attributes: {
    content: {
      type: 'string',
    },
    backgroundColor: {
      type: 'string',
    },
    textColor: {
      type: 'string',
    },
  },
  edit: compose([
    withColors('backgroundColor', {textColor: 'color'}),
    FallbackStyles,
  ])(OneColumnBlock),
  save: props => {
    const {
      content,
      backgroundColor,
      textColor,
      customBackgroundColor,
      customTextColor,
    } = props.attributes;

    const textClass = getColorClassName( 'color', textColor );
    const backgroundClass = getColorClassName( 'background-color', backgroundColor );

    const className = classnames( {
      'has-background': backgroundColor || customBackgroundColor,
      [ textClass ]: textClass,
      [ backgroundClass ]: backgroundClass,
    } );
    return (
      <div className={className}>
        <RichText.Content
          value={ content }
        />
      </div>
    );
  },
});

これだと、カラーパレットの色を選択したとき、クラスなどがオブジェクトに反映されなかった。
修正版はこちら。
https://gist.github.com/yhira/048af61215f2c0d2df66238fad724ff8
原因は、カスタムカラーを設定したため。
詳しくはこちら。
https://wp-cocoon.com/community/cocoon-blocks-all/%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%91%e3%83%ac%e3%83%83%e3%83%88%e3%81%a7%e3%81%ae%e8%a8%ad%e5%ae%9a%e5%80%a4%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9%e3%81%ab%e3%82%88%e3%82%8b%e4%b8%8d%e5%85%b7%e5%90%88/#post-23351