What replaces wpColorPicker in Gutenberg?

I ended up implementing my own ColorControl. I’m not satisfied with this solution and I don’t advice you to follow this route blindly. However, if you want to get the job done and don’t want to spend two hours on something that might not exist as I did, here you go.

Install two extra packages:

npm install styled-components colord

The code:

import React from 'react'

const {
  BaseControl,
  Dropdown,
  ColorPicker,
  Button
} = wp.components;

import styled from'styled-components';
import { colord } from 'colord';

const DropWrapper = styled.div`
  margin-top: 8px;
`;

const ColorButton = styled(Button)`
  background-color: ${props => props.value};
  color: ${props => colord(props.value).isLight() ? '#1e1e1e' : '#fff'};
  min-width: 150px;
`;

const ColorControl = (props) => (
  <BaseControl
    label={props.label}
  >
    <DropWrapper>
      <Dropdown
        renderContent={() => (
          <ColorPicker
            color={props.value}
            onChangeComplete={color => props.onChange(color.hex)}
          />
        )}
        renderToggle={ ( { isOpen, onToggle } ) => (
          <ColorButton
            aria-expanded={ isOpen }
            aria-haspopup="true"
            onClick={ onToggle }
            aria-label={ `${props.label} color picker` }
            value={ props.value }
          >
            { props.value }
          </ColorButton>
        ) }
      />
    </DropWrapper>
  </BaseControl>
);

export default ColorControl;

The field:

When you click it: