Cover Image: Add configurable overlay color (#10291)

* Cover Image: Add configurable overlay color * Address feedback * Refactor duplicated attribute setter
WordPress · Oct 4, 2018 · a01b009 · a01b009
1 parent a3e1058
commit a01b009
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 120 deletions.
diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
@@ -10,14 +10,18 @@ import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar, withNotice
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
+import { compose } from '@wordpress/compose';
 import {
 	BlockControls,
 	InspectorControls,
 	BlockAlignmentToolbar,
 	MediaPlaceholder,
 	MediaUpload,
 	AlignmentToolbar,
+	PanelColorSettings,
 	RichText,
+	withColors,
+	getColorClassName,
 } from '@wordpress/editor';
 
 const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
@@ -48,6 +52,12 @@ const blockAttributes = {
 		type: 'number',
 		default: 50,
 	},
+	overlayColor: {
+		type: 'string',
+	},
+	customOverlayColor: {
+		type: 'string',
+	},
 };
 
 export const name = 'core/cover-image';
@@ -117,142 +127,168 @@ export const settings = {
 		}
 	},
 
-	edit: withNotices( ( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI } ) => {
-		const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
-		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
-		const onSelectImage = ( media ) => {
-			if ( ! media || ! media.url ) {
-				setAttributes( { url: undefined, id: undefined } );
-				return;
-			}
-			setAttributes( { url: media.url, id: media.id } );
-		};
-		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
-		const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
+	edit: compose( [
+		withColors( { overlayColor: 'background-color' } ),
+		withNotices,
+	] )(
+		( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
+			const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+			const onSelectImage = ( media ) => {
+				if ( ! media || ! media.url ) {
+					setAttributes( { url: undefined, id: undefined } );
+					return;
+				}
+				setAttributes( { url: media.url, id: media.id } );
+			};
+			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
+			const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
+			const setTitle = ( newTitle ) => setAttributes( { title: newTitle } );
 
-		const style = backgroundImageStyles( url );
-		const classes = classnames(
-			className,
-			contentAlign !== 'center' && `has-${ contentAlign }-content`,
-			dimRatioToClass( dimRatio ),
-			{
-				'has-background-dim': dimRatio !== 0,
-				'has-parallax': hasParallax,
-			}
-		);
+			const style = {
+				...backgroundImageStyles( url ),
+				backgroundColor: overlayColor.color,
+			};
 
-		const controls = (
-			<Fragment>
-				<BlockControls>
-					<BlockAlignmentToolbar
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-					<AlignmentToolbar
-						value={ contentAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { contentAlign: nextAlign } );
-						} }
+			const classes = classnames(
+				className,
+				contentAlign !== 'center' && `has-${ contentAlign }-content`,
+				dimRatioToClass( dimRatio ),
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+				}
+			);
+
+			const controls = (
+				<Fragment>
+					<BlockControls>
+						<BlockAlignmentToolbar
+							value={ align }
+							onChange={ updateAlignment }
+						/>
+						<AlignmentToolbar
+							value={ contentAlign }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { contentAlign: nextAlign } );
+							} }
+						/>
+						<Toolbar>
+							<MediaUpload
+								onSelect={ onSelectImage }
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								value={ id }
+								render={ ( { open } ) => (
+									<IconButton
+										className="components-toolbar__control"
+										label={ __( 'Edit image' ) }
+										icon="edit"
+										onClick={ open }
+									/>
+								) }
+							/>
+						</Toolbar>
+					</BlockControls>
+					{ !! url && (
+						<InspectorControls>
+							<PanelBody title={ __( 'Cover Image Settings' ) }>
+								<ToggleControl
+									label={ __( 'Fixed Background' ) }
+									checked={ hasParallax }
+									onChange={ toggleParallax }
+								/>
+								<PanelColorSettings
+									title={ __( 'Overlay' ) }
+									initialOpen={ true }
+									colorSettings={ [ {
+										value: overlayColor.color,
+										onChange: setOverlayColor,
+										label: __( 'Overlay Color' ),
+									} ] }
+								>
+									<RangeControl
+										label={ __( 'Background Opacity' ) }
+										value={ dimRatio }
+										onChange={ setDimRatio }
+										min={ 0 }
+										max={ 100 }
+										step={ 10 }
+									/>
+								</PanelColorSettings>
+							</PanelBody>
+						</InspectorControls>
+					) }
+				</Fragment>
+			);
+
+			if ( ! url ) {
+				const hasTitle = ! RichText.isEmpty( title );
+				const icon = hasTitle ? undefined : 'format-image';
+				const label = hasTitle ? (
+					<RichText
+						tagName="h2"
+						value={ title }
+						onChange={ setTitle }
+						inlineToolbar
 					/>
-					<Toolbar>
-						<MediaUpload
+				) : __( 'Cover Image' );
+
+				return (
+					<Fragment>
+						{ controls }
+						<MediaPlaceholder
+							icon={ icon }
+							className={ className }
+							labels={ {
+								title: label,
+								name: __( 'an image' ),
+							} }
 							onSelect={ onSelectImage }
+							accept="image/*"
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							value={ id }
-							render={ ( { open } ) => (
-								<IconButton
-									className="components-toolbar__control"
-									label={ __( 'Edit image' ) }
-									icon="edit"
-									onClick={ open }
-								/>
-							) }
+							notices={ noticeUI }
+							onError={ noticeOperations.createErrorNotice }
 						/>
-					</Toolbar>
-				</BlockControls>
-				{ !! url && (
-					<InspectorControls>
-						<PanelBody title={ __( 'Cover Image Settings' ) }>
-							<ToggleControl
-								label={ __( 'Fixed Background' ) }
-								checked={ !! hasParallax }
-								onChange={ toggleParallax }
-							/>
-							<RangeControl
-								label={ __( 'Background Opacity' ) }
-								value={ dimRatio }
-								onChange={ setDimRatio }
-								min={ 0 }
-								max={ 100 }
-								step={ 10 }
-							/>
-						</PanelBody>
-					</InspectorControls>
-				) }
-			</Fragment>
-		);
-
-		if ( ! url ) {
-			const hasTitle = ! RichText.isEmpty( title );
-			const icon = hasTitle ? undefined : 'format-image';
-			const label = hasTitle ? (
-				<RichText
-					tagName="h2"
-					value={ title }
-					onChange={ ( value ) => setAttributes( { title: value } ) }
-					inlineToolbar
-				/>
-			) : __( 'Cover Image' );
+					</Fragment>
+				);
+			}
 
 			return (
 				<Fragment>
 					{ controls }
-					<MediaPlaceholder
-						icon={ icon }
-						className={ className }
-						labels={ {
-							title: label,
-							name: __( 'an image' ),
-						} }
-						onSelect={ onSelectImage }
-						accept="image/*"
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						notices={ noticeUI }
-						onError={ noticeOperations.createErrorNotice }
-					/>
+					<div
+						data-url={ url }
+						style={ style }
+						className={ classes }
+					>
+						{ ( ! RichText.isEmpty( title ) || isSelected ) && (
+							<RichText
+								tagName="p"
+								className="wp-block-cover-image-text"
+								placeholder={ __( 'Write title…' ) }
+								value={ title }
+								onChange={ setTitle }
+								inlineToolbar
+							/>
+						) }
+					</div>
 				</Fragment>
 			);
 		}
-
-		return (
-			<Fragment>
-				{ controls }
-				<div
-					data-url={ url }
-					style={ style }
-					className={ classes }
-				>
-					{ ( ! RichText.isEmpty( title ) || isSelected ) && (
-						<RichText
-							tagName="p"
-							className="wp-block-cover-image-text"
-							placeholder={ __( 'Write title…' ) }
-							value={ title }
-							onChange={ ( value ) => setAttributes( { title: value } ) }
-							inlineToolbar
-						/>
-					) }
-				</div>
-			</Fragment>
-		);
-	} ),
+	),
 
 	save( { attributes, className } ) {
-		const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
+		const { url, title, hasParallax, dimRatio, align, contentAlign, overlayColor, customOverlayColor } = attributes;
+		const overlayColorClass = getColorClassName( 'background-color', overlayColor );
 		const style = backgroundImageStyles( url );
+		if ( ! overlayColorClass ) {
+			style.backgroundColor = customOverlayColor;
+		}
+
 		const classes = classnames(
 			className,
 			dimRatioToClass( dimRatio ),
+			overlayColorClass,
 			{
 				'has-background-dim': dimRatio !== 0,
 				'has-parallax': hasParallax,
@@ -310,5 +346,5 @@ function dimRatioToClass( ratio ) {
 function backgroundImageStyles( url ) {
 	return url ?
 		{ backgroundImage: `url(${ url })` } :
-		undefined;
+		{};
 }
diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss
@@ -1,5 +1,6 @@
 .wp-block-cover-image {
 	position: relative;
+	background-color: $black;
 	background-size: cover;
 	background-position: center center;
 	min-height: 430px;
@@ -59,12 +60,13 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
-		background-color: rgba($black, 0.5);
+		background-color: inherit;
+		opacity: 0.5;
 	}
 
 	@for $i from 1 through 10 {
 		&.has-background-dim.has-background-dim-#{ $i * 10 }::before {
-			background-color: rgba($black, $i * 0.1);
+			opacity: $i * 0.1;
 		}
 	}