From cec9121ffb40cb933e4be8f9da7c987acfa0548e Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 7 Jul 2020 12:19:52 -0400
Subject: [PATCH] Fix extract function to run only for Editor (not preview)

---
 packages/block-library/src/cover/edit.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 73e602310aac9..1dfba837679e2 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -310,6 +310,7 @@ function CoverEdit( {
 	 */
 	const { customColors } = useCoverColorExtract( {
 		color: backgroundColorValue,
+		isSelected,
 		onChange: setOverlayColor,
 		src: url,
 	} );
@@ -558,8 +559,14 @@ function CoverEdit( {
 	);
 }
 
-function useCoverColorExtract( { backgroundColor, onChange = noop, src } ) {
+function useCoverColorExtract( {
+	backgroundColor,
+	onChange = noop,
+	isSelected = false,
+	src,
+} ) {
 	const [ customExtractedColor, setCustomExtractedColor ] = useState( null );
+	const [ didSelect, setDidSelect ] = useState( false );
 
 	const updateCustomOverlayColor = ( value ) => {
 		onChange( value );
@@ -573,10 +580,15 @@ function useCoverColorExtract( { backgroundColor, onChange = noop, src } ) {
 	} );
 
 	useEffect( () => {
-		extractColor().then( ( [ value ] ) => {
-			setCustomExtractedColor( value );
-		} );
-	}, [] );
+		// Extracts color to add to color palette.
+		// Run when the block is first selected.
+		if ( ! didSelect && isSelected ) {
+			extractColor().then( ( [ value ] ) => {
+				setCustomExtractedColor( value );
+			} );
+			setDidSelect( true );
+		}
+	}, [ isSelected, didSelect ] );
 
 	let customColors = [];
 	if ( customExtractedColor ) {