diff --git a/src/blocks/carousel-slide/README.md b/src/blocks/carousel-slide/README.md
index 7b26bb9e..00866609 100644
--- a/src/blocks/carousel-slide/README.md
+++ b/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*
diff --git a/src/blocks/carousel-slide/components/Settings.js b/src/blocks/carousel-slide/components/Settings.js
index c90e7cc8..637bf678 100644
--- a/src/blocks/carousel-slide/components/Settings.js
+++ b/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 (
+ { hasMediaBackground && (
+
+ setAttributes( { overlayOpacity: value } )
+ }
+ />
+ ) }
);
}
diff --git a/src/blocks/carousel-slide/components/Slide.js b/src/blocks/carousel-slide/components/Slide.js
index cc3b47d8..8223623e 100644
--- a/src/blocks/carousel-slide/components/Slide.js
+++ b/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.
diff --git a/src/blocks/carousel-slide/edit.js b/src/blocks/carousel-slide/edit.js
index 9e2a5065..0e02f17a 100644
--- a/src/blocks/carousel-slide/edit.js
+++ b/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 }
/>
@@ -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 );
diff --git a/src/blocks/carousel-slide/frontend/style.scss b/src/blocks/carousel-slide/frontend/style.scss
index bce4d650..740648af 100644
--- a/src/blocks/carousel-slide/frontend/style.scss
+++ b/src/blocks/carousel-slide/frontend/style.scss
@@ -6,5 +6,6 @@
*:not(video) {
position: relative;
+ z-index: 1;
}
}
diff --git a/src/blocks/carousel-slide/index.js b/src/blocks/carousel-slide/index.js
index 3f01189d..eb0ad188 100644
--- a/src/blocks/carousel-slide/index.js
+++ b/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: {
diff --git a/src/utils/components/overlay-panel/README.md b/src/utils/components/overlay-panel/README.md
new file mode 100644
index 00000000..62834968
--- /dev/null
+++ b/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 (
+
+
+ setAttributes( { overlayOpacity: value } )
+ }
+ />
+
+ );
+}
+
+export default compose( [
+ withColors( { overlayColor: 'background-color' } ),
+] )( Edit );
+```
diff --git a/src/utils/components/overlay-panel/index.js b/src/utils/components/overlay-panel/index.js
new file mode 100644
index 00000000..0c569a64
--- /dev/null
+++ b/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 (
+
+
+ setOverlayOpacity( value ) }
+ min={ 0 }
+ max={ 100 }
+ />
+
+ );
+}
diff --git a/src/utils/components/with-overlay-color/README.md b/src/utils/components/with-overlay-color/README.md
new file mode 100644
index 00000000..b204bac1
--- /dev/null
+++ b/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 (
+
+ );
+}
+```
diff --git a/src/utils/components/with-overlay-color/index.js b/src/utils/components/with-overlay-color/index.js
new file mode 100644
index 00000000..87f3b374
--- /dev/null
+++ b/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 (
+
+ { hasOverlay && !! overlayOpacity && (
+
+ ) }
+ { children }
+
+ );
+ };
+}