@wordpress/block-library/build/cover/edit/index.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _colord = require("colord");

var _names = _interopRequireDefault(require("colord/plugins/names"));

var _coreData = require("@wordpress/core-data");

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

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

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

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

var _data = require("@wordpress/data");

var _blob = require("@wordpress/blob");

var _notices = require("@wordpress/notices");

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

var _useCoverIsDark = _interopRequireDefault(require("./use-cover-is-dark"));

var _inspectorControls = _interopRequireDefault(require("./inspector-controls"));

var _blockControls = _interopRequireDefault(require("./block-controls"));

var _coverPlaceholder = _interopRequireDefault(require("./cover-placeholder"));

var _resizableCover = _interopRequireDefault(require("./resizable-cover"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
(0, _colord.extend)([_names.default]);

function getInnerBlocksTemplate(attributes) {
  return [['core/paragraph', {
    align: 'center',
    placeholder: (0, _i18n.__)('Write title…'),
    ...attributes
  }]];
}
/**
 * Is the URL a temporary blob URL? A blob URL is one that is used temporarily while
 * the media (image or video) is being uploaded and will not have an id allocated yet.
 *
 * @param {number} id  The id of the media.
 * @param {string} url The url of the media.
 *
 * @return {boolean} Is the URL a Blob URL.
 */


const isTemporaryMedia = (id, url) => !id && (0, _blob.isBlobURL)(url);

function CoverEdit(_ref) {
  var _useSetting;

  let {
    attributes,
    clientId,
    isSelected,
    overlayColor,
    setAttributes,
    setOverlayColor,
    toggleSelection,
    context: {
      postId,
      postType
    }
  } = _ref;
  const {
    contentPosition,
    id,
    useFeaturedImage,
    dimRatio,
    focalPoint,
    hasParallax,
    isDark,
    isRepeated,
    minHeight,
    minHeightUnit,
    alt,
    allowedBlocks,
    templateLock
  } = attributes;
  const [featuredImage] = (0, _coreData.useEntityProp)('postType', postType, 'featured_media', postId);
  const media = (0, _data.useSelect)(select => featuredImage && select(_coreData.store).getMedia(featuredImage, {
    context: 'view'
  }), [featuredImage]);
  const mediaUrl = media === null || media === void 0 ? void 0 : media.source_url; // instead of destructuring the attributes
  // we define the url and background type
  // depending on the value of the useFeaturedImage flag
  // to preview in edit the dynamic featured image

  const url = useFeaturedImage ? mediaUrl : attributes.url;
  const backgroundType = useFeaturedImage ? _shared.IMAGE_BACKGROUND_TYPE : attributes.backgroundType;
  const {
    __unstableMarkNextChangeAsNotPersistent
  } = (0, _data.useDispatch)(_blockEditor.store);
  const {
    createErrorNotice
  } = (0, _data.useDispatch)(_notices.store);
  const {
    gradientClass,
    gradientValue
  } = (0, _blockEditor.__experimentalUseGradient)();
  const onSelectMedia = (0, _shared.attributesFromMedia)(setAttributes, dimRatio);
  const isUploadingMedia = isTemporaryMedia(id, url);

  const onUploadError = message => {
    createErrorNotice(message, {
      type: 'snackbar'
    });
  };

  const mediaElement = (0, _element.useRef)();
  const isCoverDark = (0, _useCoverIsDark.default)(url, dimRatio, overlayColor.color, mediaElement);
  (0, _element.useEffect)(() => {
    // This side-effect should not create an undo level.
    __unstableMarkNextChangeAsNotPersistent();

    setAttributes({
      isDark: isCoverDark
    });
  }, [isCoverDark]);
  const isImageBackground = _shared.IMAGE_BACKGROUND_TYPE === backgroundType;
  const isVideoBackground = _shared.VIDEO_BACKGROUND_TYPE === backgroundType;
  const minHeightWithUnit = minHeight && minHeightUnit ? `${minHeight}${minHeightUnit}` : minHeight;
  const isImgElement = !(hasParallax || isRepeated);
  const style = {
    minHeight: minHeightWithUnit || undefined
  };
  const backgroundImage = url ? `url(${url})` : undefined;
  const backgroundPosition = (0, _shared.mediaPosition)(focalPoint);
  const bgStyle = {
    backgroundColor: overlayColor.color
  };
  const mediaStyle = {
    objectPosition: focalPoint && isImgElement ? (0, _shared.mediaPosition)(focalPoint) : undefined
  };
  const hasBackground = !!(url || overlayColor.color || gradientValue);
  const hasInnerBlocks = (0, _data.useSelect)(select => select(_blockEditor.store).getBlock(clientId).innerBlocks.length > 0, [clientId]);
  const ref = (0, _element.useRef)();
  const blockProps = (0, _blockEditor.useBlockProps)({
    ref
  }); // Check for fontSize support before we pass a fontSize attribute to the innerBlocks.

  const hasFontSizes = !!((_useSetting = (0, _blockEditor.useSetting)('typography.fontSizes')) !== null && _useSetting !== void 0 && _useSetting.length);
  const innerBlocksTemplate = getInnerBlocksTemplate({
    fontSize: hasFontSizes ? 'large' : undefined
  });
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({
    className: 'wp-block-cover__inner-container'
  }, {
    template: innerBlocksTemplate,
    templateInsertUpdatesSelection: true,
    allowedBlocks,
    templateLock
  });
  const currentSettings = {
    isVideoBackground,
    isImageBackground,
    mediaElement,
    hasInnerBlocks,
    url,
    isImgElement,
    overlayColor
  };

  const toggleUseFeaturedImage = () => {
    setAttributes({
      id: undefined,
      url: undefined,
      useFeaturedImage: !useFeaturedImage,
      dimRatio: dimRatio === 100 ? 50 : dimRatio,
      backgroundType: useFeaturedImage ? _shared.IMAGE_BACKGROUND_TYPE : undefined
    });
  };

  const blockControls = (0, _element.createElement)(_blockControls.default, {
    attributes: attributes,
    setAttributes: setAttributes,
    onSelectMedia: onSelectMedia,
    currentSettings: currentSettings,
    toggleUseFeaturedImage: toggleUseFeaturedImage
  });
  const inspectorControls = (0, _element.createElement)(_inspectorControls.default, {
    attributes: attributes,
    setAttributes: setAttributes,
    clientId: clientId,
    setOverlayColor: setOverlayColor,
    coverRef: ref,
    currentSettings: currentSettings,
    toggleUseFeaturedImage: toggleUseFeaturedImage
  });

  if (!useFeaturedImage && !hasInnerBlocks && !hasBackground) {
    return (0, _element.createElement)(_element.Fragment, null, blockControls, inspectorControls, (0, _element.createElement)("div", (0, _extends2.default)({}, blockProps, {
      className: (0, _classnames.default)('is-placeholder', blockProps.className)
    }), (0, _element.createElement)(_coverPlaceholder.default, {
      onSelectMedia: onSelectMedia,
      onError: onUploadError,
      style: {
        minHeight: minHeightWithUnit || undefined
      },
      toggleUseFeaturedImage: toggleUseFeaturedImage
    }, (0, _element.createElement)("div", {
      className: "wp-block-cover__placeholder-background-options"
    }, (0, _element.createElement)(_blockEditor.ColorPalette, {
      disableCustomColors: true,
      value: overlayColor.color,
      onChange: setOverlayColor,
      clearable: false
    }))), (0, _element.createElement)(_resizableCover.default, {
      className: "block-library-cover__resize-container",
      onResizeStart: () => {
        setAttributes({
          minHeightUnit: 'px'
        });
        toggleSelection(false);
      },
      onResize: value => {
        setAttributes({
          minHeight: value
        });
      },
      onResizeStop: newMinHeight => {
        toggleSelection(true);
        setAttributes({
          minHeight: newMinHeight
        });
      },
      showHandle: isSelected
    })));
  }

  const classes = (0, _classnames.default)({
    'is-dark-theme': isDark,
    'is-light': !isDark,
    'is-transient': isUploadingMedia,
    'has-parallax': hasParallax,
    'is-repeated': isRepeated,
    'has-custom-content-position': !(0, _shared.isContentPositionCenter)(contentPosition)
  }, (0, _shared.getPositionClassName)(contentPosition));
  return (0, _element.createElement)(_element.Fragment, null, blockControls, inspectorControls, (0, _element.createElement)("div", (0, _extends2.default)({}, blockProps, {
    className: (0, _classnames.default)(classes, blockProps.className),
    style: { ...style,
      ...blockProps.style
    },
    "data-url": url
  }), (0, _element.createElement)(_resizableCover.default, {
    className: "block-library-cover__resize-container",
    onResizeStart: () => {
      setAttributes({
        minHeightUnit: 'px'
      });
      toggleSelection(false);
    },
    onResize: value => {
      setAttributes({
        minHeight: value
      });
    },
    onResizeStop: newMinHeight => {
      toggleSelection(true);
      setAttributes({
        minHeight: newMinHeight
      });
    },
    showHandle: isSelected
  }), (!useFeaturedImage || url) && (0, _element.createElement)("span", {
    "aria-hidden": "true",
    className: (0, _classnames.default)('wp-block-cover__background', (0, _shared.dimRatioToClass)(dimRatio), {
      [overlayColor.class]: overlayColor.class,
      'has-background-dim': dimRatio !== undefined,
      // For backwards compatibility. Former versions of the Cover Block applied
      // `.wp-block-cover__gradient-background` in the presence of
      // media, a gradient and a dim.
      'wp-block-cover__gradient-background': url && gradientValue && dimRatio !== 0,
      'has-background-gradient': gradientValue,
      [gradientClass]: gradientClass
    }),
    style: {
      backgroundImage: gradientValue,
      ...bgStyle
    }
  }), !url && useFeaturedImage && (0, _element.createElement)(_components.Placeholder, {
    className: "wp-block-cover__image--placeholder-image",
    withIllustration: true
  }), url && isImageBackground && (isImgElement ? (0, _element.createElement)("img", {
    ref: mediaElement,
    className: "wp-block-cover__image-background",
    alt: alt,
    src: url,
    style: mediaStyle
  }) : (0, _element.createElement)("div", {
    ref: mediaElement,
    role: "img",
    className: (0, _classnames.default)(classes, 'wp-block-cover__image-background'),
    style: {
      backgroundImage,
      backgroundPosition
    }
  })), url && isVideoBackground && (0, _element.createElement)("video", {
    ref: mediaElement,
    className: "wp-block-cover__video-background",
    autoPlay: true,
    muted: true,
    loop: true,
    src: url,
    style: mediaStyle
  }), isUploadingMedia && (0, _element.createElement)(_components.Spinner, null), (0, _element.createElement)(_coverPlaceholder.default, {
    disableMediaButtons: true,
    onSelectMedia: onSelectMedia,
    onError: onUploadError,
    toggleUseFeaturedImage: toggleUseFeaturedImage
  }), (0, _element.createElement)("div", innerBlocksProps)));
}

var _default = (0, _compose.compose)([(0, _blockEditor.withColors)({
  overlayColor: 'background-color'
})])(CoverEdit);

exports.default = _default;
//# sourceMappingURL=index.js.map