Refactor cover background controls

packages/block-editor/package.json

@@ -45,6 +45,7 @@
 		"classnames": "^2.2.5",
 		"diff": "^3.5.0",
 		"dom-scroll-into-view": "^1.2.1",
+		"fast-average-color": "4.3.0",
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.15",
 		"memize": "^1.0.5",

packages/block-editor/src/components/background-controls/block-background-ui.js

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	IMAGE_BACKGROUND_TYPE,
+	VIDEO_BACKGROUND_TYPE,
+	backgroundImageStyles,
+	dimRatioToClass,
+} from './shared';
+import ResizableArea from './resizable-area';
+import useCoverIsDark from './use-cover-is-dark';
+
+export default function BlockBackgroundUi( {
+	className,
+	children,
+	attributes,
+	isSelected,
+	toggleSelection,
+	setAttributes,
+	overlayColor,
+	gradientValue,
+	temporaryMinHeight,
+	setTemporaryMinHeight,
+	gradientClass,
+} ) {
+	const {
+		backgroundType,
+		dimRatio,
+		focalPoint,
+		minHeight,
+		hasParallax,
+		url,
+	} = attributes;
+
+	const style = {
+		...(
+			backgroundType === IMAGE_BACKGROUND_TYPE ?
+				backgroundImageStyles( url ) :
+				{}
+		),
+		backgroundColor: overlayColor,
+		minHeight: ( temporaryMinHeight || minHeight ),
+	};
+
+	if ( gradientValue && ! url ) {
+		style.background = gradientValue;
+	}
+
+	if ( focalPoint ) {
+		style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
+	}
+
+	const isDarkElement = useRef();
+	const isDark = useCoverIsDark( url, dimRatio, overlayColor, isDarkElement );
+
+	const classes = classnames(
+		className,
+		dimRatioToClass( dimRatio ),
+		{
+			'is-dark-theme': isDark,
+			'has-background-dim': dimRatio !== 0,
+			'has-parallax': hasParallax,
+			// [ overlayColor.class ]: overlayColor.class, // @TODO fix
+			'has-background-gradient': gradientValue,
+			[ gradientClass ]: ! url && gradientClass,
+		}
+	);
+
+	return (
+		<ResizableArea
+			className={ classnames(
+				'block-library-cover__resize-container',
+				{ 'is-selected': isSelected },
+			) }
+			onResizeStart={ () => toggleSelection( false ) }
+			onResize={ setTemporaryMinHeight }
+			onResizeStop={
+				( newMinHeight ) => {
+					toggleSelection( true );
+					setAttributes( { minHeight: newMinHeight } );
+					setTemporaryMinHeight( null );
+				}
+			}
+		>
+			<div
+				data-url={ url }
+				style={ style }
+				className={ classes }
+			>
+				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+				// Used only to programmatically check if the image is dark or not
+					<img
+						ref={ isDarkElement }
+						aria-hidden
+						alt=""
+						style={ {
+							display: 'none',
+						} }
+						src={ url }
+					/>
+				) }
+				{ url && gradientValue && dimRatio !== 0 && (
+					<span
+						aria-hidden="true"
+						className={ classnames(
+							'wp-block-cover__gradient-background',
+							gradientClass,
+						) }
+						style={ { background: gradientValue } }
+					/>
+				) }
+				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+					<video
+						ref={ isDarkElement }
+						className="wp-block-cover__video-background"
+						autoPlay
+						muted
+						loop
+						src={ url }
+					/>
+				) }
+				<div className="wp-block-cover__inner-container">
+					{ children }
+				</div>
+			</div>
+		</ResizableArea>
+	);
+}

packages/block-editor/src/components/background-controls/controls.js

@@ -0,0 +1,229 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	FocalPointPicker,
+	IconButton,
+	PanelBody,
+	PanelRow,
+	RangeControl,
+	ToggleControl,
+	Toolbar,
+	Button,
+} from '@wordpress/components';
+
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	IMAGE_BACKGROUND_TYPE,
+	VIDEO_BACKGROUND_TYPE,
+} from './shared';
+import HeightInput from './height-input';
+
+import BlockControls from '../block-controls';
+import InspectorControls from '../inspector-controls';
+import MediaUpload from '../media-upload';
+import MediaUploadCheck from '../media-upload/check';
+import PanelColorSettings from '../panel-color-settings';
+import __experimentalGradientPickerControl from '../gradient-picker/control';
+
+const BackgroundToolbarControls = ( {
+	hasBackground,
+	onSelectMedia,
+	mediaId,
+	allowedMediaTypes,
+} ) => (
+	<BlockControls>
+		{ hasBackground && (
+		<>
+			<MediaUploadCheck>
+				<Toolbar>
+					<MediaUpload
+						onSelect={ onSelectMedia }
+						allowedTypes={ allowedMediaTypes }
+						value={ mediaId }
+						render={ ( { open } ) => (
+							<IconButton
+								className="components-toolbar__control"
+								label={ __( 'Edit media' ) }
+								icon="edit"
+								onClick={ open }
+							/>
+						) }
+					/>
+				</Toolbar>
+			</MediaUploadCheck>
+		</>
+		) }
+	</BlockControls>
+);
+
+const BackgroundInspectorControls = ( {
+	mediaUrl,
+	backgroundType,
+	hasParallax,
+	focalPoint,
+	setAttributes,
+	hasBackground,
+	overlayColor,
+	setOverlayColor,
+	gradientValue,
+	setGradient,
+	dimRatio,
+	temporaryMinHeight,
+	minHeight,
+} ) => (
+	<InspectorControls>
+		<PanelBody title={ __( 'Dimensions' ) }>
+			<HeightInput
+				value={ temporaryMinHeight || minHeight }
+				onChange={ ( newMinHeight ) => setAttributes( { minHeight: newMinHeight } ) }
+			/>
+		</PanelBody>
+		{ !! mediaUrl && (
+			<PanelBody title={ __( 'Media Settings' ) }>
+				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+					<ToggleControl
+						label={ __( 'Fixed Background' ) }
+						checked={ hasParallax }
+						onChange={ () => {
+							setAttributes( {
+								hasParallax: ! hasParallax,
+								...( ! hasParallax ? { focalPoint: undefined } : {} ),
+							} );
+						} }
+					/>
+				) }
+				{ IMAGE_BACKGROUND_TYPE === backgroundType && ! hasParallax && (
+					<FocalPointPicker
+						label={ __( 'Focal Point Picker' ) }
+						url={ mediaUrl }
+						value={ focalPoint }
+						onChange={ ( newFocalPoint ) => setAttributes( { focalPoint: newFocalPoint } ) }
+					/>
+				) }
+				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+					<video
+						autoPlay
+						muted
+						loop
+						src={ mediaUrl }
+					/>
+				) }
+				<PanelRow>
+					<Button
+						isDefault
+						isSmall
+						className="block-library-cover__reset-button"
+						onClick={ () => setAttributes( {
+							url: undefined,
+							id: undefined,
+							backgroundType: undefined,
+							dimRatio: undefined,
+							focalPoint: undefined,
+							hasParallax: undefined,
+						} ) }
+					>
+						{ __( 'Clear Media' ) }
+					</Button>
+				</PanelRow>
+			</PanelBody>
+		) }
+		{ hasBackground && (
+		<>
+			<PanelColorSettings
+				title={ __( 'Overlay' ) }
+				initialOpen={ true }
+				colorSettings={ [ {
+					value: overlayColor,
+					onChange: ( ...args ) => {
+						setAttributes( {
+							customGradient: undefined,
+						} );
+						setOverlayColor( ...args );
+					},
+					label: __( 'Overlay Color' ),
+				} ] }
+			>
+				<__experimentalGradientPickerControl
+					label={ __( 'Overlay Gradient' ) }
+					onChange={
+						( newGradient ) => {
+							setGradient( newGradient );
+							setAttributes( {
+								overlayColor: undefined,
+							} );
+						}
+					}
+					value={ gradientValue }
+				/>
+				{ !! mediaUrl && (
+					<RangeControl
+						label={ __( 'Background Opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRation ) => setAttributes( { dimRatio: newDimRation } ) }
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
+				) }
+			</PanelColorSettings>
+		</>
+		) }
+	</InspectorControls>
+);
+
+export default function BackgroundControls( {
+	attributes,
+	setAttributes,
+	hasBackground,
+	overlayColor,
+	setOverlayColor,
+	gradientValue,
+	setGradient,
+	onSelectMedia,
+	allowedMediaTypes,
+	temporaryMinHeight,
+	showInspectorControls = true,
+	showToolbarControls = true,
+} ) {
+	const {
+		backgroundType,
+		dimRatio,
+		focalPoint,
+		hasParallax,
+		minHeight,
+		id,
+		url,
+	} = attributes;
+
+	return (
+		<>
+			{ showInspectorControls && <BackgroundInspectorControls
+				mediaUrl={ url }
+				backgroundType={ backgroundType }
+				hasParallax={ hasParallax }
+				focalPoint={ focalPoint }
+				setAttributes={ setAttributes }
+				hasBackground={ hasBackground }
+				overlayColor={ overlayColor }
+				setOverlayColor={ setOverlayColor }
+				gradientValue={ gradientValue }
+				setGradient={ setGradient }
+				dimRatio={ dimRatio }
+				temporaryMinHeight={ temporaryMinHeight }
+				minHeight={ minHeight }
+			/> }
+			{ showToolbarControls && <BackgroundToolbarControls
+				hasBackground={ hasBackground }
+				onSelectMedia={ onSelectMedia }
+				mediaId={ id }
+				allowedMediaTypes={ allowedMediaTypes }
+			/> }
+		</>
+	);
+}