Improve color contrast handling

package.json

@@ -17,8 +17,9 @@
 		"Gutenberg"
 	],
 	"dependencies": {
+		"@glidejs/glide": "^3.4.1",
 		"classnames": "^2.2.6",
-		"@glidejs/glide": "^3.4.1"
+		"fast-average-color": "^6.0.2"
 	},
 	"devDependencies": {
 		"@webdevstudios/css-coding-standards": "^1.0.1",

src/blocks/carousel-slide/components/Settings.js

@@ -3,10 +3,11 @@ import {
 	InspectorControls,
 	PanelColorSettings,
 } from '@wordpress/block-editor';
-import { Platform } from '@wordpress/element';
+import { Platform, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import BackgroundSettingsPanel from '../../../utils/components/background-settings-panel';
 import OverlayPanel from '../../../utils/components/overlay-panel';
+import useMediaAverageColor from '../../../utils/hooks/use-media-average-color';
 
 /**
  * The Settings component displays settings for the Slide block via Inspector Controls.
@@ -32,9 +33,31 @@ export default function Settings( props ) {
 		setAttributes,
 	} = props;
 
+	// `ref` to background media element.
+	const mediaElementRef = useRef();
+
+	// Average color of background media element.
+	const { color: mediaColor } = useMediaAverageColor(
+		mediaElementRef?.current
+	);
+
+	// Whether media element is currently set as background.
 	const hasMediaBackground =
 		'image' === backgroundType || 'video' === backgroundType;
 
+	// Determine background color to contrast with `fontColor`.
+	let backgroundContrastColor = backgroundColor;
+
+	if ( hasMediaBackground && overlayOpacity && overlayOpacity > 50 ) {
+		// Use overlay color as background contrast if above 50% opacity.
+		backgroundContrastColor = overlayColor;
+	} else if ( hasMediaBackground ) {
+		// Use media average color if overlay is not set or opacity is <= 50%.
+		backgroundContrastColor = mediaColor?.hex
+			? mediaColor.hex
+			: backgroundContrastColor;
+	}
+
 	return (
 		<InspectorControls>
 			<PanelColorSettings
@@ -47,9 +70,9 @@ export default function Settings( props ) {
 					},
 				] }
 			>
-				{ 'web' === Platform.OS && 'color' === backgroundType && (
+				{ 'web' === Platform.OS && (
 					<ContrastChecker
-						backgroundColor={ backgroundColor }
+						backgroundColor={ backgroundContrastColor }
 						textColor={ fontColor }
 					/>
 				) }
@@ -73,6 +96,7 @@ export default function Settings( props ) {
 						backgroundVideo: value,
 					} )
 				}
+				ref={ mediaElementRef }
 			/>
 			{ hasMediaBackground && (
 				<OverlayPanel

src/blocks/carousel-slide/edit.js

@@ -21,6 +21,7 @@ function Edit( props ) {
 		attributes,
 		className,
 		setAttributes,
+		isSelected,
 		fontColor,
 		setFontColor,
 		backgroundColor,
@@ -50,14 +51,16 @@ function Edit( props ) {
 
 	return (
 		<>
-			<Settings
-				{ ...backgroundProps }
-				fontColor={ fontColor.color }
-				setFontColor={ setFontColor }
-				setBackgroundColor={ setBackgroundColor }
-				setOverlayColor={ setOverlayColor }
-				setAttributes={ setAttributes }
-			/>
+			{ isSelected && (
+				<Settings
+					{ ...backgroundProps }
+					fontColor={ fontColor.color }
+					setFontColor={ setFontColor }
+					setBackgroundColor={ setBackgroundColor }
+					setOverlayColor={ setOverlayColor }
+					setAttributes={ setAttributes }
+				/>
+			) }
 			<Slide { ...slideProps }>
 				<InnerBlocks
 					{ ...INNER_BLOCKS_PROPS }

src/utils/components/background-settings-panel/index.js

@@ -1,4 +1,5 @@
 import { PanelBody, SelectControl } from '@wordpress/components';
+import { forwardRef, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import ColorPaletteControl from '../color-palette-control';
 import MediaControl from '../media-control';
@@ -10,9 +11,10 @@ import MediaControl from '../media-control';
  * @since  2.1.0
  *
  * @param  {Object} [props] Properties passed to the component.
+ * @param  {Object} [ref]   `ref` to inner media background component.
  * @return {Element}        Element to render.
  */
-export default function BackgroundSettingsPanel( props ) {
+function BackgroundSettingsPanel( props, ref ) {
 	const {
 		backgroundType,
 		setBackgroundType,
@@ -29,6 +31,8 @@ export default function BackgroundSettingsPanel( props ) {
 		setBackgroundVideo,
 	} = props;
 
+	const fallbackRef = useRef();
+
 	// Define background type options.
 	const options = [ { label: __( 'None', 'wdsblocks' ), value: 'none' } ];
 
@@ -76,6 +80,7 @@ export default function BackgroundSettingsPanel( props ) {
 					label={ __( 'Background image', 'wdsblocks' ) }
 					addLabel={ __( 'Add image', 'wdsblocks' ) }
 					removeLabel={ __( 'Remove image', 'wdsblocks' ) }
+					ref={ ref || fallbackRef }
 				/>
 			) }
 
@@ -87,8 +92,11 @@ export default function BackgroundSettingsPanel( props ) {
 					label={ __( 'Background video', 'wdsblocks' ) }
 					addLabel={ __( 'Add video', 'wdsblocks' ) }
 					removeLabel={ __( 'Remove video', 'wdsblocks' ) }
+					ref={ ref || fallbackRef }
 				/>
 			) }
 		</PanelBody>
 	);
 }
+
+export default forwardRef( BackgroundSettingsPanel );

src/utils/components/media-control/index.js

@@ -1,5 +1,6 @@
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import { Button, ResponsiveWrapper } from '@wordpress/components';
+import { forwardRef, useRef } from '@wordpress/element';
 
 /**
  * Display media preview according to type.
@@ -8,9 +9,10 @@ import { Button, ResponsiveWrapper } from '@wordpress/components';
  * @since  2.1.0
  *
  * @param  {Object} [props] Properties passed to the component.
+ * @param  {Object} [ref]   `ref` to media component.
  * @return {Element} Media preview.
  */
-function Preview( props ) {
+const Preview = forwardRef( ( props, ref ) => {
 	const { type, media, label } = props;
 	const className = 'components-responsive-wrapper__content';
 
@@ -23,17 +25,23 @@ function Preview( props ) {
 					muted
 					loop
 					aria-hidden="true"
+					ref={ ref }
 				>
 					<source src={ media?.url } type={ media?.mime } />
 				</video>
 			);
 
 		default:
 			return (
-				<img className={ className } src={ media?.url } alt={ label } />
+				<img
+					className={ className }
+					src={ media?.url }
+					alt={ label }
+					ref={ ref }
+				/>
 			);
 	}
-}
+} );
 
 /**
  * The MediaControl component displays a control to select a media item and display a preview.
@@ -42,9 +50,10 @@ function Preview( props ) {
  * @since  2.1.0
  *
  * @param  {Object} [props] Properties passed to the component.
+ * @param  {Object} [ref]   `ref` to media component.
  * @return {Element}        Element to render.
  */
-export default function MediaControl( props ) {
+function MediaControl( props, ref ) {
 	const {
 		media,
 		setMedia,
@@ -55,6 +64,8 @@ export default function MediaControl( props ) {
 		removeLabel,
 	} = props;
 
+	const fallbackRef = useRef();
+
 	return (
 		<>
 			<div className="components-base-control">
@@ -86,6 +97,7 @@ export default function MediaControl( props ) {
 											media={ media }
 											label={ label }
 											type={ type }
+											ref={ ref || fallbackRef }
 										/>
 									</ResponsiveWrapper>
 								) }
@@ -108,3 +120,5 @@ export default function MediaControl( props ) {
 		</>
 	);
 }
+
+export default forwardRef( MediaControl );

src/utils/hooks/use-media-average-color/index.js

@@ -0,0 +1,43 @@
+import FastAverageColor from 'fast-average-color';
+import { useEffect, useState } from 'react';
+
+/**
+ * Retrieve current or new instance of `FastAverageColor`.
+ *
+ * @author WebDevStudios
+ * @since  2.1.0
+ *
+ * @return {Object} Instance of `FastAverageColor`.
+ */
+function retrieveFastAverageColor() {
+	if ( ! retrieveFastAverageColor.fastAverageColor ) {
+		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+	}
+
+	return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * The useMediaAverageColor hook handles state for determining the average color of a given media element by URL.
+ *
+ * @author WebDevStudios
+ * @since  2.1.0
+ *
+ * @param  {?Element} mediaElement Media element to process.
+ * @return {Object}                Object consisting of state variable.
+ */
+export default function useMediaAverageColor( mediaElement ) {
+	const [ color, setColor ] = useState( null );
+
+	useEffect( () => {
+		if ( ! mediaElement ) {
+			setColor( null );
+			return;
+		}
+
+		// Attempt to retrieve average color.
+		setColor( retrieveFastAverageColor().getColor( mediaElement ) );
+	}, [ mediaElement ] );
+
+	return { color };
+}