Merge pull request #97 from WebDevStudios/enhancement/94-extend-carou…

…sel-block

WDS Blocks 2.1: Improve Carousel Block

src/blocks/carousel-slide/README.md

@@ -25,6 +25,15 @@ A block that contains one or more child blocks and displays a carousel slide.
 ### `backgroundVideo: object` ###
 *Default: `undefined`.* Tracks object of video attributes for `background-video`.
 
+### `overlayColor: string` ###
+*Default: `undefined`.* Tracks color name for `background-color` as an overlay.
+
+### `customOverlayColor: string` ###
+*Default: `undefined`.* Tracks custom color code for `background-color` as an overlay.
+
+### `overlayOpacity: number` ###
+*Default: `undefined`.* Tracks value for `opacity` of overlay.
+
 ## Usage ##
 *Category: WDS Blocks*
 

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

@@ -6,6 +6,7 @@ import {
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import BackgroundSettingsPanel from '../../../utils/components/background-settings-panel';
+import OverlayPanel from '../../../utils/components/overlay-panel';
 
 /**
  * The Settings component displays settings for the Slide block via Inspector Controls.
@@ -25,9 +26,15 @@ export default function Settings( props ) {
 		setBackgroundColor,
 		backgroundImage,
 		backgroundVideo,
+		overlayColor,
+		setOverlayColor,
+		overlayOpacity,
 		setAttributes,
 	} = props;
 
+	const hasMediaBackground =
+		'image' === backgroundType || 'video' === backgroundType;
+
 	return (
 		<InspectorControls>
 			<PanelColorSettings
@@ -67,6 +74,16 @@ export default function Settings( props ) {
 					} )
 				}
 			/>
+			{ hasMediaBackground && (
+				<OverlayPanel
+					overlayColor={ overlayColor }
+					setOverlayColor={ setOverlayColor }
+					overlayOpacity={ overlayOpacity }
+					setOverlayOpacity={ ( value ) =>
+						setAttributes( { overlayOpacity: value } )
+					}
+				/>
+			) }
 		</InspectorControls>
 	);
 }

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

@@ -4,6 +4,7 @@ import withBackgroundColor from '../../../utils/components/withBackgroundColor';
 import withBackgroundImage from '../../../utils/components/withBackgroundImage';
 import withBackgroundVideo from '../../../utils/components/withBackgroundVideo';
 import withFontColor from '../../../utils/components/withFontColor';
+import withOverlayColor from '../../../utils/components/with-overlay-color';
 
 /**
  * The Slide component displays an individual carousel slide.
@@ -25,6 +26,9 @@ export default function Slide( props ) {
 		customBackgroundColor,
 		backgroundImage,
 		backgroundVideo,
+		overlayColor,
+		customOverlayColor,
+		overlayOpacity,
 		children,
 	} = props;
 
@@ -77,6 +81,14 @@ export default function Slide( props ) {
 			wrapProps.backgroundVideo = backgroundVideo;
 	}
 
+	// Add overlay for image or video background.
+	if ( 'image' === backgroundType || 'video' === backgroundType ) {
+		composeHOCs.push( withOverlayColor );
+		wrapProps.overlayColor = overlayColor;
+		wrapProps.customOverlayColor = customOverlayColor;
+		wrapProps.overlayOpacity = overlayOpacity;
+	}
+
 	const SlideComponent = compose( composeHOCs )( 'div' );
 
 	// Display default slide.

src/blocks/carousel-slide/edit.js

@@ -25,12 +25,15 @@ function Edit( props ) {
 		setFontColor,
 		backgroundColor,
 		setBackgroundColor,
+		overlayColor,
+		setOverlayColor,
 	} = props;
 
 	// Define props relating to block background settings.
 	const backgroundProps = {
 		...attributes,
 		backgroundColor: backgroundColor.color,
+		overlayColor: overlayColor.color,
 	};
 
 	// Define props relating to slide settings.
@@ -41,6 +44,8 @@ function Edit( props ) {
 		customFontColor: fontColor.color,
 		backgroundColor: backgroundColor?.slug,
 		customBackgroundColor: backgroundColor.color,
+		overlayColor: overlayColor?.slug,
+		customOverlayColor: overlayColor.color,
 	};
 
 	return (
@@ -50,6 +55,7 @@ function Edit( props ) {
 				fontColor={ fontColor.color }
 				setFontColor={ setFontColor }
 				setBackgroundColor={ setBackgroundColor }
+				setOverlayColor={ setOverlayColor }
 				setAttributes={ setAttributes }
 			/>
 			<Slide { ...slideProps }>
@@ -66,5 +72,9 @@ function Edit( props ) {
 }
 
 export default compose( [
-	withColors( { fontColor: 'color', backgroundColor: 'background-color' } ),
+	withColors( {
+		fontColor: 'color',
+		backgroundColor: 'background-color',
+		overlayColor: 'background-color',
+	} ),
 ] )( Edit );

src/blocks/carousel-slide/frontend/style.scss

@@ -6,5 +6,6 @@
 
 	*:not(video) {
 		position: relative;
+		z-index: 1;
 	}
 }

src/blocks/carousel-slide/index.js

@@ -50,6 +50,18 @@ registerBlockType( `${ PREFIX }/carousel-slide`, {
 			type: 'object',
 			default: undefined,
 		},
+		overlayColor: {
+			type: 'string',
+			default: undefined,
+		},
+		customOverlayColor: {
+			type: 'string',
+			default: undefined,
+		},
+		overlayOpacity: {
+			type: 'number',
+			default: 40,
+		},
 	},
 	usesContext: [ `${ PREFIX }/carousel/showPreview` ],
 	supports: {

src/utils/components/overlay-panel/README.md

@@ -0,0 +1,54 @@
+# `OverlayPanel` #
+
+Render a `PanelBody` component containing inputs to control background overlay.
+
+## Properties ##
+
+### `overlayColor: String` ###
+*Required.* The hex code representing the overlay color, if selected.
+
+### `setOverlayColor( value: String ): Function` ###
+*Required.* Called when `overlayColor` is changed, where `value` is the new hex color code.
+
+### `overlayOpacity: Number` ###
+*Required.* The number between 0 and 100 representing the overlay opacity.
+
+### `setOverlayOpacity( value: Number ): Function` ###
+*Required.* Called when `overlayOpacity` is changed, where `value` is the new opacity.
+
+## Usage ##
+
+*Note: `overlayColor`/`setOverlayColor` assumes usage of `withColors` higher-order component.*
+
+```jsx
+import { InspectorControls, withColors } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+
+function Edit( props ) {
+	const {
+		attributes: {
+			overlayOpacity,
+		},
+		overlayColor,
+		setOverlayColor,
+		setAttributes,
+	} = props;
+
+	return (
+		<InspectorControls>
+			<OverlayPanel
+				overlayColor={ overlayColor }
+				setOverlayColor={ setOverlayColor }
+				overlayOpacity={ overlayOpacity }
+				setOverlayOpacity={ ( value ) =>
+					setAttributes( { overlayOpacity: value } )
+				}
+			/>
+		</InspectorControls>
+	);
+}
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Edit );
+```

src/utils/components/overlay-panel/index.js

@@ -0,0 +1,41 @@
+import { PanelBody, RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import ColorPaletteControl from '../color-palette-control';
+
+/**
+ * The OverlayPanel component displays a panel of controls for background overlay.
+ *
+ * @author WebDevStudios
+ * @since  2.1.0
+ *
+ * @param  {Object} [props] Properties passed to the component.
+ * @return {Element}        Element to render.
+ */
+export default function OverlayPanel( props ) {
+	const {
+		overlayColor,
+		setOverlayColor,
+		overlayOpacity,
+		setOverlayOpacity,
+	} = props;
+
+	return (
+		<PanelBody
+			title={ __( 'Overlay settings', 'wdsblocks' ) }
+			className="block-editor-panel-color-gradient-settings"
+		>
+			<ColorPaletteControl
+				color={ overlayColor }
+				setColor={ setOverlayColor }
+				label={ __( 'Color', 'wdsblocks' ) }
+			/>
+			<RangeControl
+				label={ __( 'Opacity', 'wdsblocks' ) }
+				value={ overlayOpacity }
+				onChange={ ( value ) => setOverlayOpacity( value ) }
+				min={ 0 }
+				max={ 100 }
+			/>
+		</PanelBody>
+	);
+}

src/utils/components/with-overlay-color/README.md

@@ -0,0 +1,25 @@
+# `withOverlayColor` #
+
+`withOverlayColor` is a higher-order component used to apply styling specific to background overlays.
+
+`withOverlay` calls another HOC, `withBackgroundColor`, to apply some background styling. Both HOCs add custom classes and styles to the wrapped component; `withOverlayColor` additionally adds a child component for the overlay itself, provided the overlay and opacity properties are passed.
+
+## Usage ##
+
+```jsx
+export default function Edit( props ) {
+	const {
+		attributes: { overlayColor, customOverlayColor, overlayOpacity },
+	} = props;
+
+	const BlockComponent = withOverlayColor( 'div' );
+
+	return (
+		<BlockComponent
+			overlayColor={ overlayColor }
+			customOverlayColor={ customOverlayColor }
+			overlayOpacity={ overlayOpacity }
+		/>
+	);
+}
+```

src/utils/components/with-overlay-color/index.js

@@ -0,0 +1,69 @@
+import withBackgroundColor from '../withBackgroundColor';
+
+/**
+ * A HOC for displaying a component with a background overlay color.
+ *
+ * @author WebDevStudios
+ * @since  2.1.0
+ *
+ * @param  {WPElement} WrappedComponent The wrapped component to display.
+ * @return {Function}                   A function that accepts a single param, `props`, to display the wrapped component.
+ */
+export default function withOverlayColor( WrappedComponent ) {
+	/**
+	 * @author WebDevStudios
+	 * @since  2.0.0
+	 *
+	 * @param  {Object} [props] Properties passed to the component.
+	 * @return {Element}        Element to render.
+	 */
+	return function ( props ) {
+		const {
+			overlayColor,
+			customOverlayColor,
+			overlayOpacity,
+			className,
+			style,
+			children,
+			...passthruProps
+		} = props;
+
+		const classes = [ className ],
+			styles = { ...style };
+
+		const hasOverlay = overlayColor || customOverlayColor;
+
+		// Add overlay class.
+		classes.push( hasOverlay ? 'has-background-overlay' : null );
+
+		// Use withBackgroundColor component to handle shared styling/classes.
+		const OverlayComponent = withBackgroundColor( WrappedComponent );
+
+		return (
+			<OverlayComponent
+				className={ classes.filter( Boolean ).join( ' ' ) }
+				style={ styles }
+				{ ...passthruProps }
+				backgroundColor={ overlayColor }
+				customBackgroundColor={ customOverlayColor }
+			>
+				{ hasOverlay && !! overlayOpacity && (
+					<div
+						className="background-overlay"
+						style={ {
+							opacity: overlayOpacity / 100,
+							backgroundColor: 'inherit',
+							height: '100%',
+							left: 0,
+							position: 'absolute',
+							top: 0,
+							width: '100%',
+							zIndex: 1,
+						} }
+					></div>
+				) }
+				{ children }
+			</OverlayComponent>
+		);
+	};
+}