@wordpress/block-library/build-module/cover/edit/inspector-controls.js

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { Fragment, useMemo } from '@wordpress/element';
import { BaseControl, Button, ExternalLink, FocalPointPicker, PanelBody, PanelRow, RangeControl, TextareaControl, ToggleControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { InspectorControls, useSetting, __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseGradient, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';

function CoverHeightInput(_ref) {
  let {
    onChange,
    onUnitChange,
    unit = 'px',
    value = ''
  } = _ref;
  const instanceId = useInstanceId(UnitControl);
  const inputId = `block-cover-height-input-${instanceId}`;
  const isPx = unit === 'px';
  const units = useCustomUnits({
    availableUnits: useSetting('spacing.units') || ['px', 'em', 'rem', 'vw', 'vh'],
    defaultValues: {
      px: 430,
      '%': 20,
      em: 20,
      rem: 20,
      vw: 20,
      vh: 50
    }
  });

  const handleOnChange = unprocessedValue => {
    const inputValue = unprocessedValue !== '' ? parseFloat(unprocessedValue) : undefined;

    if (isNaN(inputValue) && inputValue !== undefined) {
      return;
    }

    onChange(inputValue);
  };

  const computedValue = useMemo(() => {
    const [parsedQuantity] = parseQuantityAndUnitFromRawValue(value);
    return [parsedQuantity, unit].join('');
  }, [unit, value]);
  const min = isPx ? COVER_MIN_HEIGHT : 0;
  return createElement(BaseControl, {
    label: __('Minimum height of cover'),
    id: inputId
  }, createElement(UnitControl, {
    id: inputId,
    isResetValueOnUnitChange: true,
    min: min,
    onChange: handleOnChange,
    onUnitChange: onUnitChange,
    style: {
      maxWidth: 80
    },
    units: units,
    value: computedValue
  }));
}

export default function CoverInspectorControls(_ref2) {
  let {
    attributes,
    setAttributes,
    clientId,
    setOverlayColor,
    coverRef,
    currentSettings
  } = _ref2;
  const {
    useFeaturedImage,
    dimRatio,
    focalPoint,
    hasParallax,
    isRepeated,
    minHeight,
    minHeightUnit,
    alt
  } = attributes;
  const {
    isVideoBackground,
    isImageBackground,
    mediaElement,
    url,
    isImgElement,
    overlayColor
  } = currentSettings;

  const {
    gradientValue,
    setGradient
  } = __experimentalUseGradient();

  const toggleParallax = () => {
    setAttributes({
      hasParallax: !hasParallax,
      ...(!hasParallax ? {
        focalPoint: undefined
      } : {})
    });
  };

  const toggleIsRepeated = () => {
    setAttributes({
      isRepeated: !isRepeated
    });
  };

  const showFocalPointPicker = isVideoBackground || isImageBackground && (!hasParallax || isRepeated);

  const imperativeFocalPointPreview = value => {
    const [styleOfRef, property] = mediaElement.current ? [mediaElement.current.style, 'objectPosition'] : [coverRef.current.style, 'backgroundPosition'];
    styleOfRef[property] = mediaPosition(value);
  };

  const colorGradientSettings = useMultipleOriginColorsAndGradients();
  return createElement(Fragment, null, createElement(InspectorControls, null, !!url && createElement(PanelBody, {
    title: __('Media settings')
  }, isImageBackground && createElement(Fragment, null, createElement(ToggleControl, {
    label: __('Fixed background'),
    checked: hasParallax,
    onChange: toggleParallax
  }), createElement(ToggleControl, {
    label: __('Repeated background'),
    checked: isRepeated,
    onChange: toggleIsRepeated
  })), showFocalPointPicker && createElement(FocalPointPicker, {
    label: __('Focal point picker'),
    url: url,
    value: focalPoint,
    onDragStart: imperativeFocalPointPreview,
    onDrag: imperativeFocalPointPreview,
    onChange: newFocalPoint => setAttributes({
      focalPoint: newFocalPoint
    })
  }), !useFeaturedImage && url && isImageBackground && isImgElement && createElement(TextareaControl, {
    label: __('Alt text (alternative text)'),
    value: alt,
    onChange: newAlt => setAttributes({
      alt: newAlt
    }),
    help: createElement(Fragment, null, createElement(ExternalLink, {
      href: "https://www.w3.org/WAI/tutorials/images/decision-tree"
    }, __('Describe the purpose of the image')), __('Leave empty if the image is purely decorative.'))
  }), createElement(PanelRow, null, createElement(Button, {
    variant: "secondary",
    isSmall: true,
    className: "block-library-cover__reset-button",
    onClick: () => setAttributes({
      url: undefined,
      id: undefined,
      backgroundType: undefined,
      focalPoint: undefined,
      hasParallax: undefined,
      isRepeated: undefined,
      useFeaturedImage: false
    })
  }, __('Clear Media'))))), createElement(InspectorControls, {
    __experimentalGroup: "color"
  }, createElement(ColorGradientSettingsDropdown, _extends({
    __experimentalHasMultipleOrigins: true,
    __experimentalIsRenderedInSidebar: true,
    settings: [{
      colorValue: overlayColor.color,
      gradientValue,
      label: __('Overlay'),
      onColorChange: setOverlayColor,
      onGradientChange: setGradient,
      isShownByDefault: true,
      resetAllFilter: () => ({
        overlayColor: undefined,
        customOverlayColor: undefined,
        gradient: undefined,
        customGradient: undefined
      })
    }],
    panelId: clientId
  }, colorGradientSettings)), createElement(ToolsPanelItem, {
    hasValue: () => {
      // If there's a media background the dimRatio will be
      // defaulted to 50 whereas it will be 100 for colors.
      return dimRatio === undefined ? false : dimRatio !== (url ? 50 : 100);
    },
    label: __('Overlay opacity'),
    onDeselect: () => setAttributes({
      dimRatio: url ? 50 : 100
    }),
    resetAllFilter: () => ({
      dimRatio: url ? 50 : 100
    }),
    isShownByDefault: true,
    panelId: clientId
  }, createElement(RangeControl, {
    label: __('Overlay opacity'),
    value: dimRatio,
    onChange: newDimRation => setAttributes({
      dimRatio: newDimRation
    }),
    min: 0,
    max: 100,
    step: 10,
    required: true
  }))), createElement(InspectorControls, {
    __experimentalGroup: "dimensions"
  }, createElement(ToolsPanelItem, {
    hasValue: () => !!minHeight,
    label: __('Minimum height'),
    onDeselect: () => setAttributes({
      minHeight: undefined,
      minHeightUnit: undefined
    }),
    resetAllFilter: () => ({
      minHeight: undefined,
      minHeightUnit: undefined
    }),
    isShownByDefault: true,
    panelId: clientId
  }, createElement(CoverHeightInput, {
    value: minHeight,
    unit: minHeightUnit,
    onChange: newMinHeight => setAttributes({
      minHeight: newMinHeight
    }),
    onUnitChange: nextUnit => setAttributes({
      minHeightUnit: nextUnit
    })
  }))));
}
//# sourceMappingURL=inspector-controls.js.map