From cb2b20565366934216feb0f91684f3cbf59a1a41 Mon Sep 17 00:00:00 2001
From: R A Van Epps <rebekah.vanepps@webdevstudios.com>
Date: Fri, 4 Sep 2020 16:05:44 -0600
Subject: [PATCH] Replace background color control with new component

---
 .../carousel-slide/components/Settings.js     | 45 +++----------------
 1 file changed, 7 insertions(+), 38 deletions(-)

diff --git a/src/blocks/carousel-slide/components/Settings.js b/src/blocks/carousel-slide/components/Settings.js
index 93ea440d..fa8ba403 100644
--- a/src/blocks/carousel-slide/components/Settings.js
+++ b/src/blocks/carousel-slide/components/Settings.js
@@ -1,19 +1,17 @@
 import {
-	ColorPalette,
 	InspectorControls,
 	MediaUpload,
 	MediaUploadCheck,
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	Button,
-	ColorIndicator,
 	PanelBody,
 	ResponsiveWrapper,
 	SelectControl,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
+import ColorPaletteControl from '../../../utils/components/ColorPaletteControl';
 
 /**
  * The Settings component displays settings for the Slide block via Inspector Controls.
@@ -73,40 +71,11 @@ export default function Settings( props ) {
 					}
 				></SelectControl>
 				{ 'color' === backgroundType && (
-					<BaseControl>
-						<fieldset>
-							<legend>
-								<div className="block-editor-color-gradient-control__color-indicator">
-									<BaseControl.VisualLabel>
-										{
-											<>
-												{ __(
-													'Background Color',
-													'wdsblocks'
-												) }
-												{ !! backgroundColor && (
-													<ColorIndicator
-														colorValue={
-															backgroundColor
-														}
-														aria-label={ sprintf(
-															/* translators: current color value name */
-															__( '(Color: %s)' ),
-															backgroundColor
-														) }
-													/>
-												) }
-											</>
-										}
-									</BaseControl.VisualLabel>
-								</div>
-							</legend>
-							<ColorPalette
-								value={ backgroundColor }
-								onChange={ setBackgroundColor }
-							/>
-						</fieldset>
-					</BaseControl>
+					<ColorPaletteControl
+						color={ backgroundColor }
+						setColor={ setBackgroundColor }
+						label={ __( 'Background Color', 'wdsblocks' ) }
+					/>
 				) }
 				{ 'image' === backgroundType && (
 					<>