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 }
+ /> }
+ </>
+ );
+}