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

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CoverInspectorControls;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _blockEditor = require("@wordpress/block-editor");

var _i18n = require("@wordpress/i18n");

var _shared = require("../shared");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function CoverHeightInput(_ref) {
  let {
    onChange,
    onUnitChange,
    unit = 'px',
    value = ''
  } = _ref;
  const instanceId = (0, _compose.useInstanceId)(_components.__experimentalUnitControl);
  const inputId = `block-cover-height-input-${instanceId}`;
  const isPx = unit === 'px';
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _blockEditor.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 = (0, _element.useMemo)(() => {
    const [parsedQuantity] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
    return [parsedQuantity, unit].join('');
  }, [unit, value]);
  const min = isPx ? _shared.COVER_MIN_HEIGHT : 0;
  return (0, _element.createElement)(_components.BaseControl, {
    label: (0, _i18n.__)('Minimum height of cover'),
    id: inputId
  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
    id: inputId,
    isResetValueOnUnitChange: true,
    min: min,
    onChange: handleOnChange,
    onUnitChange: onUnitChange,
    style: {
      maxWidth: 80
    },
    units: units,
    value: computedValue
  }));
}

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
  } = (0, _blockEditor.__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] = (0, _shared.mediaPosition)(value);
  };

  const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.InspectorControls, null, !!url && (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Media settings')
  }, isImageBackground && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Fixed background'),
    checked: hasParallax,
    onChange: toggleParallax
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Repeated background'),
    checked: isRepeated,
    onChange: toggleIsRepeated
  })), showFocalPointPicker && (0, _element.createElement)(_components.FocalPointPicker, {
    label: (0, _i18n.__)('Focal point picker'),
    url: url,
    value: focalPoint,
    onDragStart: imperativeFocalPointPreview,
    onDrag: imperativeFocalPointPreview,
    onChange: newFocalPoint => setAttributes({
      focalPoint: newFocalPoint
    })
  }), !useFeaturedImage && url && isImageBackground && isImgElement && (0, _element.createElement)(_components.TextareaControl, {
    label: (0, _i18n.__)('Alt text (alternative text)'),
    value: alt,
    onChange: newAlt => setAttributes({
      alt: newAlt
    }),
    help: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ExternalLink, {
      href: "https://www.w3.org/WAI/tutorials/images/decision-tree"
    }, (0, _i18n.__)('Describe the purpose of the image')), (0, _i18n.__)('Leave empty if the image is purely decorative.'))
  }), (0, _element.createElement)(_components.PanelRow, null, (0, _element.createElement)(_components.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
    })
  }, (0, _i18n.__)('Clear Media'))))), (0, _element.createElement)(_blockEditor.InspectorControls, {
    __experimentalGroup: "color"
  }, (0, _element.createElement)(_blockEditor.__experimentalColorGradientSettingsDropdown, (0, _extends2.default)({
    __experimentalHasMultipleOrigins: true,
    __experimentalIsRenderedInSidebar: true,
    settings: [{
      colorValue: overlayColor.color,
      gradientValue,
      label: (0, _i18n.__)('Overlay'),
      onColorChange: setOverlayColor,
      onGradientChange: setGradient,
      isShownByDefault: true,
      resetAllFilter: () => ({
        overlayColor: undefined,
        customOverlayColor: undefined,
        gradient: undefined,
        customGradient: undefined
      })
    }],
    panelId: clientId
  }, colorGradientSettings)), (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    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: (0, _i18n.__)('Overlay opacity'),
    onDeselect: () => setAttributes({
      dimRatio: url ? 50 : 100
    }),
    resetAllFilter: () => ({
      dimRatio: url ? 50 : 100
    }),
    isShownByDefault: true,
    panelId: clientId
  }, (0, _element.createElement)(_components.RangeControl, {
    label: (0, _i18n.__)('Overlay opacity'),
    value: dimRatio,
    onChange: newDimRation => setAttributes({
      dimRatio: newDimRation
    }),
    min: 0,
    max: 100,
    step: 10,
    required: true
  }))), (0, _element.createElement)(_blockEditor.InspectorControls, {
    __experimentalGroup: "dimensions"
  }, (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
    hasValue: () => !!minHeight,
    label: (0, _i18n.__)('Minimum height'),
    onDeselect: () => setAttributes({
      minHeight: undefined,
      minHeightUnit: undefined
    }),
    resetAllFilter: () => ({
      minHeight: undefined,
      minHeightUnit: undefined
    }),
    isShownByDefault: true,
    panelId: clientId
  }, (0, _element.createElement)(CoverHeightInput, {
    value: minHeight,
    unit: minHeightUnit,
    onChange: newMinHeight => setAttributes({
      minHeight: newMinHeight
    }),
    onUnitChange: nextUnit => setAttributes({
      minHeightUnit: nextUnit
    })
  }))));
}
//# sourceMappingURL=inspector-controls.js.map