@wordpress/block-library 7.4.0 → 7.7.0

package/build-module/cover/edit.js

@@ -1,642 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import FastAverageColor from 'fast-average-color';
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-/**
- * WordPress dependencies
- */
-
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { Fragment, useEffect, useRef, useState, useMemo } from '@wordpress/element';
-import { BaseControl, Button, ExternalLink, FocalPointPicker, PanelBody, PanelRow, RangeControl, ResizableBox, Spinner, TextareaControl, ToggleControl, ToolbarButton, __experimentalUseCustomUnits as useCustomUnits, __experimentalBoxControl as BoxControl, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';
-import { compose, useInstanceId } from '@wordpress/compose';
-import { BlockControls, BlockIcon, InspectorControls, MediaPlaceholder, MediaReplaceFlow, withColors, ColorPalette, useBlockProps, useSetting, useInnerBlocksProps, __experimentalUseGradient, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, __experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl, __experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl, store as blockEditorStore } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { postFeaturedImage, cover as icon } from '@wordpress/icons';
-import { isBlobURL } from '@wordpress/blob';
-import { store as noticesStore } from '@wordpress/notices';
-/**
- * Internal dependencies
- */
-
-import { ALLOWED_MEDIA_TYPES, attributesFromMedia, IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, COVER_MIN_HEIGHT, backgroundImageStyles, dimRatioToClass, isContentPositionCenter, getPositionClassName } from './shared';
-extend([namesPlugin]);
-const {
-  __Visualizer: BoxControlVisualizer
-} = BoxControl;
-
-function getInnerBlocksTemplate(attributes) {
-  return [['core/paragraph', {
-    align: 'center',
-    placeholder: __('Write title…'),
-    ...attributes
-  }]];
-}
-
-function retrieveFastAverageColor() {
-  if (!retrieveFastAverageColor.fastAverageColor) {
-    retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
-  }
-
-  return retrieveFastAverageColor.fastAverageColor;
-}
-
-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
-  }));
-}
-
-const RESIZABLE_BOX_ENABLE_OPTION = {
-  top: false,
-  right: false,
-  bottom: true,
-  left: false,
-  topRight: false,
-  bottomRight: false,
-  bottomLeft: false,
-  topLeft: false
-};
-
-function ResizableCover(_ref2) {
-  let {
-    className,
-    onResizeStart,
-    onResize,
-    onResizeStop,
-    ...props
-  } = _ref2;
-  const [isResizing, setIsResizing] = useState(false);
-  return createElement(ResizableBox, _extends({
-    className: classnames(className, {
-      'is-resizing': isResizing
-    }),
-    enable: RESIZABLE_BOX_ENABLE_OPTION,
-    onResizeStart: (_event, _direction, elt) => {
-      onResizeStart(elt.clientHeight);
-      onResize(elt.clientHeight);
-    },
-    onResize: (_event, _direction, elt) => {
-      onResize(elt.clientHeight);
-
-      if (!isResizing) {
-        setIsResizing(true);
-      }
-    },
-    onResizeStop: (_event, _direction, elt) => {
-      onResizeStop(elt.clientHeight);
-      setIsResizing(false);
-    }
-  }, props));
-}
-/**
- * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
- * background is dark or not.
- *
- * @param {?string} url          Url of the media background.
- * @param {?number} dimRatio     Transparency of the overlay color. If an image and
- *                               color are set, dimRatio is used to decide what is used
- *                               for background darkness checking purposes.
- * @param {?string} overlayColor String containing the overlay color value if one exists.
- * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a
- *                               dom element that renders that media.
- *
- * @return {boolean} True if the cover background is considered "dark" and false otherwise.
- */
-
-
-function useCoverIsDark(url) {
-  let dimRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
-  let overlayColor = arguments.length > 2 ? arguments[2] : undefined;
-  let elementRef = arguments.length > 3 ? arguments[3] : undefined;
-  const [isDark, setIsDark] = useState(false);
-  useEffect(() => {
-    // If opacity is lower than 50 the dominant color is the image or video color,
-    // so use that color for the dark mode computation.
-    if (url && dimRatio <= 50 && elementRef.current) {
-      retrieveFastAverageColor().getColorAsync(elementRef.current, color => {
-        setIsDark(color.isDark);
-      });
-    }
-  }, [url, url && dimRatio <= 50 && elementRef.current, setIsDark]);
-  useEffect(() => {
-    // If opacity is greater than 50 the dominant color is the overlay color,
-    // so use that color for the dark mode computation.
-    if (dimRatio > 50 || !url) {
-      if (!overlayColor) {
-        // If no overlay color exists the overlay color is black (isDark )
-        setIsDark(true);
-        return;
-      }
-
-      setIsDark(colord(overlayColor).isDark());
-    }
-  }, [overlayColor, dimRatio > 50 || !url, setIsDark]);
-  useEffect(() => {
-    if (!url && !overlayColor) {
-      // Reset isDark.
-      setIsDark(false);
-    }
-  }, [!url && !overlayColor, setIsDark]);
-  return isDark;
-}
-
-function mediaPosition(_ref3) {
-  let {
-    x,
-    y
-  } = _ref3;
-  return `${Math.round(x * 100)}% ${Math.round(y * 100)}%`;
-}
-/**
- * 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 && isBlobURL(url);
-
-function CoverPlaceholder(_ref4) {
-  let {
-    disableMediaButtons = false,
-    children,
-    onSelectMedia,
-    onError,
-    style
-  } = _ref4;
-  return createElement(MediaPlaceholder, {
-    icon: createElement(BlockIcon, {
-      icon: icon
-    }),
-    labels: {
-      title: __('Cover'),
-      instructions: __('Drag and drop onto this block, upload, or select existing media from your library.')
-    },
-    onSelect: onSelectMedia,
-    accept: "image/*,video/*",
-    allowedTypes: ALLOWED_MEDIA_TYPES,
-    disableMediaButtons: disableMediaButtons,
-    onError: onError,
-    style: style
-  }, children);
-}
-
-function CoverEdit(_ref5) {
-  var _useSetting, _styleAttribute$spaci, _styleAttribute$visua;
-
-  let {
-    attributes,
-    clientId,
-    isSelected,
-    overlayColor,
-    setAttributes,
-    setOverlayColor,
-    toggleSelection,
-    context: {
-      postId,
-      postType
-    }
-  } = _ref5;
-  const {
-    contentPosition,
-    id,
-    useFeaturedImage,
-    dimRatio,
-    focalPoint,
-    hasParallax,
-    isDark,
-    isRepeated,
-    minHeight,
-    minHeightUnit,
-    style: styleAttribute,
-    alt,
-    allowedBlocks,
-    templateLock
-  } = attributes;
-  const [featuredImage] = useEntityProp('postType', postType, 'featured_media', postId);
-  const media = useSelect(select => featuredImage && select(coreStore).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 ? IMAGE_BACKGROUND_TYPE : attributes.backgroundType;
-  const {
-    __unstableMarkNextChangeAsNotPersistent
-  } = useDispatch(blockEditorStore);
-  const {
-    createErrorNotice
-  } = useDispatch(noticesStore);
-
-  const {
-    gradientClass,
-    gradientValue,
-    setGradient
-  } = __experimentalUseGradient();
-
-  const onSelectMedia = attributesFromMedia(setAttributes, dimRatio);
-  const isUploadingMedia = isTemporaryMedia(id, url);
-  const [prevMinHeightValue, setPrevMinHeightValue] = useState(minHeight);
-  const [prevMinHeightUnit, setPrevMinHeightUnit] = useState(minHeightUnit);
-  const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
-
-  const toggleMinFullHeight = () => {
-    if (isMinFullHeight) {
-      // If there aren't previous values, take the default ones.
-      if (prevMinHeightUnit === 'vh' && prevMinHeightValue === 100) {
-        return setAttributes({
-          minHeight: undefined,
-          minHeightUnit: undefined
-        });
-      } // Set the previous values of height.
-
-
-      return setAttributes({
-        minHeight: prevMinHeightValue,
-        minHeightUnit: prevMinHeightUnit
-      });
-    }
-
-    setPrevMinHeightValue(minHeight);
-    setPrevMinHeightUnit(minHeightUnit); // Set full height.
-
-    return setAttributes({
-      minHeight: 100,
-      minHeightUnit: 'vh'
-    });
-  };
-
-  const toggleParallax = () => {
-    setAttributes({
-      hasParallax: !hasParallax,
-      ...(!hasParallax ? {
-        focalPoint: undefined
-      } : {})
-    });
-  };
-
-  const toggleIsRepeated = () => {
-    setAttributes({
-      isRepeated: !isRepeated
-    });
-  };
-
-  const toggleUseFeaturedImage = () => {
-    setAttributes({
-      useFeaturedImage: !useFeaturedImage,
-      dimRatio: dimRatio === 100 ? 50 : dimRatio
-    });
-  };
-
-  const onUploadError = message => {
-    createErrorNotice(Array.isArray(message) ? message[2] : message, {
-      type: 'snackbar'
-    });
-  };
-
-  const isDarkElement = useRef();
-  const isCoverDark = useCoverIsDark(url, dimRatio, overlayColor.color, isDarkElement);
-  useEffect(() => {
-    // This side-effect should not create an undo level.
-    __unstableMarkNextChangeAsNotPersistent();
-
-    setAttributes({
-      isDark: isCoverDark
-    });
-  }, [isCoverDark]);
-  const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
-  const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
-  const minHeightWithUnit = minHeight && minHeightUnit ? `${minHeight}${minHeightUnit}` : minHeight;
-  const isImgElement = !(hasParallax || isRepeated);
-  const style = { ...(isImageBackground && !isImgElement ? backgroundImageStyles(url) : undefined),
-    minHeight: minHeightWithUnit || undefined
-  };
-  const bgStyle = {
-    backgroundColor: overlayColor.color
-  };
-  const mediaStyle = {
-    objectPosition: focalPoint && isImgElement ? mediaPosition(focalPoint) : undefined
-  };
-  const hasBackground = !!(url || overlayColor.color || gradientValue);
-  const showFocalPointPicker = isVideoBackground || isImageBackground && (!hasParallax || isRepeated);
-
-  const imperativeFocalPointPreview = value => {
-    const [styleOfRef, property] = isDarkElement.current ? [isDarkElement.current.style, 'objectPosition'] : [ref.current.style, 'backgroundPosition'];
-    styleOfRef[property] = mediaPosition(value);
-  };
-
-  const hasInnerBlocks = useSelect(select => select(blockEditorStore).getBlock(clientId).innerBlocks.length > 0, [clientId]);
-  const controls = createElement(Fragment, null, createElement(BlockControls, {
-    group: "block"
-  }, createElement(BlockAlignmentMatrixControl, {
-    label: __('Change content position'),
-    value: contentPosition,
-    onChange: nextPosition => setAttributes({
-      contentPosition: nextPosition
-    }),
-    isDisabled: !hasInnerBlocks
-  }), createElement(FullHeightAlignmentControl, {
-    isActive: isMinFullHeight,
-    onToggle: toggleMinFullHeight,
-    isDisabled: !hasInnerBlocks
-  })), createElement(BlockControls, {
-    group: "other"
-  }, createElement(ToolbarButton, {
-    icon: postFeaturedImage,
-    label: __('Use featured image'),
-    isPressed: useFeaturedImage,
-    onClick: toggleUseFeaturedImage
-  }), !useFeaturedImage && createElement(MediaReplaceFlow, {
-    mediaId: id,
-    mediaURL: url,
-    allowedTypes: ALLOWED_MEDIA_TYPES,
-    accept: "image/*,video/*",
-    onSelect: onSelectMedia,
-    name: !url ? __('Add Media') : __('Replace')
-  })), 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(PanelColorGradientSettings, {
-    __experimentalHasMultipleOrigins: true,
-    __experimentalIsRenderedInSidebar: true,
-    title: __('Overlay'),
-    initialOpen: true,
-    settings: [{
-      colorValue: overlayColor.color,
-      gradientValue,
-      onColorChange: setOverlayColor,
-      onGradientChange: setGradient,
-      label: __('Color')
-    }]
-  }, createElement(RangeControl, {
-    label: __('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
-    })
-  }))));
-  const ref = useRef();
-  const blockProps = useBlockProps({
-    ref
-  }); // Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-
-  const hasFontSizes = !!((_useSetting = useSetting('typography.fontSizes')) !== null && _useSetting !== void 0 && _useSetting.length);
-  const innerBlocksTemplate = getInnerBlocksTemplate({
-    fontSize: hasFontSizes ? 'large' : undefined
-  });
-  const innerBlocksProps = useInnerBlocksProps({
-    className: 'wp-block-cover__inner-container'
-  }, {
-    template: innerBlocksTemplate,
-    templateInsertUpdatesSelection: true,
-    allowedBlocks,
-    templateLock
-  });
-
-  if (!hasInnerBlocks && !hasBackground) {
-    return createElement(Fragment, null, controls, createElement("div", _extends({}, blockProps, {
-      className: classnames('is-placeholder', blockProps.className)
-    }), createElement(CoverPlaceholder, {
-      onSelectMedia: onSelectMedia,
-      onError: onUploadError,
-      style: {
-        minHeight: minHeightWithUnit || undefined
-      }
-    }, createElement("div", {
-      className: "wp-block-cover__placeholder-background-options"
-    }, createElement(ColorPalette, {
-      disableCustomColors: true,
-      value: overlayColor.color,
-      onChange: setOverlayColor,
-      clearable: false
-    }))), createElement(ResizableCover, {
-      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 = classnames({
-    'is-dark-theme': isDark,
-    'is-light': !isDark,
-    'is-transient': isUploadingMedia,
-    'has-parallax': hasParallax,
-    'is-repeated': isRepeated,
-    'has-custom-content-position': !isContentPositionCenter(contentPosition)
-  }, getPositionClassName(contentPosition));
-  return createElement(Fragment, null, controls, createElement("div", _extends({}, blockProps, {
-    className: classnames(classes, blockProps.className),
-    style: { ...style,
-      ...blockProps.style
-    },
-    "data-url": url
-  }), createElement(BoxControlVisualizer, {
-    values: styleAttribute === null || styleAttribute === void 0 ? void 0 : (_styleAttribute$spaci = styleAttribute.spacing) === null || _styleAttribute$spaci === void 0 ? void 0 : _styleAttribute$spaci.padding,
-    showValues: styleAttribute === null || styleAttribute === void 0 ? void 0 : (_styleAttribute$visua = styleAttribute.visualizers) === null || _styleAttribute$visua === void 0 ? void 0 : _styleAttribute$visua.padding,
-    className: "block-library-cover__padding-visualizer"
-  }), createElement(ResizableCover, {
-    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
-  }), createElement("span", {
-    "aria-hidden": "true",
-    className: classnames('wp-block-cover__background', 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 && isImageBackground && isImgElement && createElement("img", {
-    ref: isDarkElement,
-    className: "wp-block-cover__image-background",
-    alt: alt,
-    src: url,
-    style: mediaStyle
-  }), url && isVideoBackground && createElement("video", {
-    ref: isDarkElement,
-    className: "wp-block-cover__video-background",
-    autoPlay: true,
-    muted: true,
-    loop: true,
-    src: url,
-    style: mediaStyle
-  }), isUploadingMedia && createElement(Spinner, null), createElement(CoverPlaceholder, {
-    disableMediaButtons: true,
-    onSelectMedia: onSelectMedia,
-    onError: onUploadError
-  }), createElement("div", innerBlocksProps)));
-}
-
-export default compose([withColors({
-  overlayColor: 'background-color'
-})])(CoverEdit);
-//# sourceMappingURL=edit.js.map