@wordpress/block-library 7.5.0 → 7.8.0

package/build-module/cover/edit/index.js

@@ -0,0 +1,310 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+/**
+ * WordPress dependencies
+ */
+
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
+import { Placeholder, Spinner } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withColors, ColorPalette, useBlockProps, useSetting, useInnerBlocksProps, __experimentalUseGradient, store as blockEditorStore } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { isBlobURL } from '@wordpress/blob';
+import { store as noticesStore } from '@wordpress/notices';
+/**
+ * Internal dependencies
+ */
+
+import { attributesFromMedia, IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE, dimRatioToClass, isContentPositionCenter, getPositionClassName, mediaPosition } from '../shared';
+import useCoverIsDark from './use-cover-is-dark';
+import CoverInspectorControls from './inspector-controls';
+import CoverBlockControls from './block-controls';
+import CoverPlaceholder from './cover-placeholder';
+import ResizableCover from './resizable-cover';
+extend([namesPlugin]);
+
+function getInnerBlocksTemplate(attributes) {
+  return [['core/paragraph', {
+    align: 'center',
+    placeholder: __('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 && 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] = 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
+  } = __experimentalUseGradient();
+
+  const onSelectMedia = attributesFromMedia(setAttributes, dimRatio);
+  const isUploadingMedia = isTemporaryMedia(id, url);
+
+  const onUploadError = message => {
+    createErrorNotice(message, {
+      type: 'snackbar'
+    });
+  };
+
+  const mediaElement = useRef();
+  const isCoverDark = useCoverIsDark(url, dimRatio, overlayColor.color, mediaElement);
+  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 = {
+    minHeight: minHeightWithUnit || undefined
+  };
+  const backgroundImage = url ? `url(${url})` : undefined;
+  const backgroundPosition = mediaPosition(focalPoint);
+  const bgStyle = {
+    backgroundColor: overlayColor.color
+  };
+  const mediaStyle = {
+    objectPosition: focalPoint && isImgElement ? mediaPosition(focalPoint) : undefined
+  };
+  const hasBackground = !!(url || overlayColor.color || gradientValue);
+  const hasInnerBlocks = useSelect(select => select(blockEditorStore).getBlock(clientId).innerBlocks.length > 0, [clientId]);
+  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
+  });
+  const currentSettings = {
+    isVideoBackground,
+    isImageBackground,
+    mediaElement,
+    hasInnerBlocks,
+    url,
+    isImgElement,
+    overlayColor
+  };
+  const blockControls = createElement(CoverBlockControls, {
+    attributes: attributes,
+    setAttributes: setAttributes,
+    onSelectMedia: onSelectMedia,
+    currentSettings: currentSettings
+  });
+  const inspectorControls = createElement(CoverInspectorControls, {
+    attributes: attributes,
+    setAttributes: setAttributes,
+    clientId: clientId,
+    setOverlayColor: setOverlayColor,
+    coverRef: ref,
+    currentSettings: currentSettings
+  });
+
+  if (!useFeaturedImage && !hasInnerBlocks && !hasBackground) {
+    return createElement(Fragment, null, blockControls, inspectorControls, 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, blockControls, inspectorControls, createElement("div", _extends({}, blockProps, {
+    className: classnames(classes, blockProps.className),
+    style: { ...style,
+      ...blockProps.style
+    },
+    "data-url": url
+  }), 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
+  }), (!useFeaturedImage || url) && 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 && useFeaturedImage && createElement(Placeholder, {
+    className: "wp-block-cover__image--placeholder-image",
+    withIllustration: true
+  }), url && isImageBackground && (isImgElement ? createElement("img", {
+    ref: mediaElement,
+    className: "wp-block-cover__image-background",
+    alt: alt,
+    src: url,
+    style: mediaStyle
+  }) : createElement("div", {
+    ref: mediaElement,
+    role: "img",
+    className: classnames(classes, 'wp-block-cover__image-background'),
+    style: {
+      backgroundImage,
+      backgroundPosition
+    }
+  })), url && isVideoBackground && createElement("video", {
+    ref: mediaElement,
+    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=index.js.map

package/build-module/cover/edit/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/cover/edit/index.js"],"names":["classnames","extend","namesPlugin","useEntityProp","store","coreStore","useEffect","useRef","Placeholder","Spinner","compose","withColors","ColorPalette","useBlockProps","useSetting","useInnerBlocksProps","__experimentalUseGradient","blockEditorStore","__","useSelect","useDispatch","isBlobURL","noticesStore","attributesFromMedia","IMAGE_BACKGROUND_TYPE","VIDEO_BACKGROUND_TYPE","dimRatioToClass","isContentPositionCenter","getPositionClassName","mediaPosition","useCoverIsDark","CoverInspectorControls","CoverBlockControls","CoverPlaceholder","ResizableCover","getInnerBlocksTemplate","attributes","align","placeholder","isTemporaryMedia","id","url","CoverEdit","clientId","isSelected","overlayColor","setAttributes","setOverlayColor","toggleSelection","context","postId","postType","contentPosition","useFeaturedImage","dimRatio","focalPoint","hasParallax","isDark","isRepeated","minHeight","minHeightUnit","alt","allowedBlocks","templateLock","featuredImage","media","select","getMedia","mediaUrl","source_url","backgroundType","__unstableMarkNextChangeAsNotPersistent","createErrorNotice","gradientClass","gradientValue","onSelectMedia","isUploadingMedia","onUploadError","message","type","mediaElement","isCoverDark","color","isImageBackground","isVideoBackground","minHeightWithUnit","isImgElement","style","undefined","backgroundImage","backgroundPosition","bgStyle","backgroundColor","mediaStyle","objectPosition","hasBackground","hasInnerBlocks","getBlock","innerBlocks","length","ref","blockProps","hasFontSizes","innerBlocksTemplate","fontSize","innerBlocksProps","className","template","templateInsertUpdatesSelection","currentSettings","blockControls","inspectorControls","value","newMinHeight","classes","class"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { compose } from '@wordpress/compose';\nimport {\n\twithColors,\n\tColorPalette,\n\tuseBlockProps,\n\tuseSetting,\n\tuseInnerBlocksProps,\n\t__experimentalUseGradient,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { isBlobURL } from '@wordpress/blob';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport {\n\tattributesFromMedia,\n\tIMAGE_BACKGROUND_TYPE,\n\tVIDEO_BACKGROUND_TYPE,\n\tdimRatioToClass,\n\tisContentPositionCenter,\n\tgetPositionClassName,\n\tmediaPosition,\n} from '../shared';\nimport useCoverIsDark from './use-cover-is-dark';\nimport CoverInspectorControls from './inspector-controls';\nimport CoverBlockControls from './block-controls';\nimport CoverPlaceholder from './cover-placeholder';\nimport ResizableCover from './resizable-cover';\n\nextend( [ namesPlugin ] );\n\nfunction getInnerBlocksTemplate( attributes ) {\n\treturn [\n\t\t[\n\t\t\t'core/paragraph',\n\t\t\t{\n\t\t\t\talign: 'center',\n\t\t\t\tplaceholder: __( 'Write title…' ),\n\t\t\t\t...attributes,\n\t\t\t},\n\t\t],\n\t];\n}\n\n/**\n * Is the URL a temporary blob URL? A blob URL is one that is used temporarily while\n * the media (image or video) is being uploaded and will not have an id allocated yet.\n *\n * @param {number} id  The id of the media.\n * @param {string} url The url of the media.\n *\n * @return {boolean} Is the URL a Blob URL.\n */\nconst isTemporaryMedia = ( id, url ) => ! id && isBlobURL( url );\n\nfunction CoverEdit( {\n\tattributes,\n\tclientId,\n\tisSelected,\n\toverlayColor,\n\tsetAttributes,\n\tsetOverlayColor,\n\ttoggleSelection,\n\tcontext: { postId, postType },\n} ) {\n\tconst {\n\t\tcontentPosition,\n\t\tid,\n\t\tuseFeaturedImage,\n\t\tdimRatio,\n\t\tfocalPoint,\n\t\thasParallax,\n\t\tisDark,\n\t\tisRepeated,\n\t\tminHeight,\n\t\tminHeightUnit,\n\t\talt,\n\t\tallowedBlocks,\n\t\ttemplateLock,\n\t} = attributes;\n\n\tconst [ featuredImage ] = useEntityProp(\n\t\t'postType',\n\t\tpostType,\n\t\t'featured_media',\n\t\tpostId\n\t);\n\n\tconst media = useSelect(\n\t\t( select ) =>\n\t\t\tfeaturedImage &&\n\t\t\tselect( coreStore ).getMedia( featuredImage, { context: 'view' } ),\n\t\t[ featuredImage ]\n\t);\n\tconst mediaUrl = media?.source_url;\n\n\t// instead of destructuring the attributes\n\t// we define the url and background type\n\t// depending on the value of the useFeaturedImage flag\n\t// to preview in edit the dynamic featured image\n\tconst url = useFeaturedImage ? mediaUrl : attributes.url;\n\tconst backgroundType = useFeaturedImage\n\t\t? IMAGE_BACKGROUND_TYPE\n\t\t: attributes.backgroundType;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst { gradientClass, gradientValue } = __experimentalUseGradient();\n\tconst onSelectMedia = attributesFromMedia( setAttributes, dimRatio );\n\tconst isUploadingMedia = isTemporaryMedia( id, url );\n\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t};\n\n\tconst mediaElement = useRef();\n\tconst isCoverDark = useCoverIsDark(\n\t\turl,\n\t\tdimRatio,\n\t\toverlayColor.color,\n\t\tmediaElement\n\t);\n\n\tuseEffect( () => {\n\t\t// This side-effect should not create an undo level.\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tsetAttributes( { isDark: isCoverDark } );\n\t}, [ isCoverDark ] );\n\n\tconst isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;\n\tconst isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;\n\n\tconst minHeightWithUnit =\n\t\tminHeight && minHeightUnit\n\t\t\t? `${ minHeight }${ minHeightUnit }`\n\t\t\t: minHeight;\n\n\tconst isImgElement = ! ( hasParallax || isRepeated );\n\n\tconst style = {\n\t\tminHeight: minHeightWithUnit || undefined,\n\t};\n\n\tconst backgroundImage = url ? `url(${ url })` : undefined;\n\n\tconst backgroundPosition = mediaPosition( focalPoint );\n\n\tconst bgStyle = { backgroundColor: overlayColor.color };\n\tconst mediaStyle = {\n\t\tobjectPosition:\n\t\t\tfocalPoint && isImgElement\n\t\t\t\t? mediaPosition( focalPoint )\n\t\t\t\t: undefined,\n\t};\n\n\tconst hasBackground = !! ( url || overlayColor.color || gradientValue );\n\n\tconst hasInnerBlocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlock( clientId ).innerBlocks.length >\n\t\t\t0,\n\t\t[ clientId ]\n\t);\n\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps( { ref } );\n\n\t// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.\n\tconst hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;\n\tconst innerBlocksTemplate = getInnerBlocksTemplate( {\n\t\tfontSize: hasFontSizes ? 'large' : undefined,\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\t{\n\t\t\tclassName: 'wp-block-cover__inner-container',\n\t\t},\n\t\t{\n\t\t\ttemplate: innerBlocksTemplate,\n\t\t\ttemplateInsertUpdatesSelection: true,\n\t\t\tallowedBlocks,\n\t\t\ttemplateLock,\n\t\t}\n\t);\n\n\tconst currentSettings = {\n\t\tisVideoBackground,\n\t\tisImageBackground,\n\t\tmediaElement,\n\t\thasInnerBlocks,\n\t\turl,\n\t\tisImgElement,\n\t\toverlayColor,\n\t};\n\n\tconst blockControls = (\n\t\t<CoverBlockControls\n\t\t\tattributes={ attributes }\n\t\t\tsetAttributes={ setAttributes }\n\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\tcurrentSettings={ currentSettings }\n\t\t/>\n\t);\n\n\tconst inspectorControls = (\n\t\t<CoverInspectorControls\n\t\t\tattributes={ attributes }\n\t\t\tsetAttributes={ setAttributes }\n\t\t\tclientId={ clientId }\n\t\t\tsetOverlayColor={ setOverlayColor }\n\t\t\tcoverRef={ ref }\n\t\t\tcurrentSettings={ currentSettings }\n\t\t/>\n\t);\n\n\tif ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ blockControls }\n\t\t\t\t{ inspectorControls }\n\t\t\t\t<div\n\t\t\t\t\t{ ...blockProps }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'is-placeholder',\n\t\t\t\t\t\tblockProps.className\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<CoverPlaceholder\n\t\t\t\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tminHeight: minHeightWithUnit || undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"wp-block-cover__placeholder-background-options\">\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t\tvalue={ overlayColor.color }\n\t\t\t\t\t\t\t\tonChange={ setOverlayColor }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</CoverPlaceholder>\n\t\t\t\t\t<ResizableCover\n\t\t\t\t\t\tclassName=\"block-library-cover__resize-container\"\n\t\t\t\t\t\tonResizeStart={ () => {\n\t\t\t\t\t\t\tsetAttributes( { minHeightUnit: 'px' } );\n\t\t\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonResize={ ( value ) => {\n\t\t\t\t\t\t\tsetAttributes( { minHeight: value } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonResizeStop={ ( newMinHeight ) => {\n\t\t\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t\t\t\tsetAttributes( { minHeight: newMinHeight } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tshowHandle={ isSelected }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n\n\tconst classes = classnames(\n\t\t{\n\t\t\t'is-dark-theme': isDark,\n\t\t\t'is-light': ! isDark,\n\t\t\t'is-transient': isUploadingMedia,\n\t\t\t'has-parallax': hasParallax,\n\t\t\t'is-repeated': isRepeated,\n\t\t\t'has-custom-content-position':\n\t\t\t\t! isContentPositionCenter( contentPosition ),\n\t\t},\n\t\tgetPositionClassName( contentPosition )\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ blockControls }\n\t\t\t{ inspectorControls }\n\t\t\t<div\n\t\t\t\t{ ...blockProps }\n\t\t\t\tclassName={ classnames( classes, blockProps.className ) }\n\t\t\t\tstyle={ { ...style, ...blockProps.style } }\n\t\t\t\tdata-url={ url }\n\t\t\t>\n\t\t\t\t<ResizableCover\n\t\t\t\t\tclassName=\"block-library-cover__resize-container\"\n\t\t\t\t\tonResizeStart={ () => {\n\t\t\t\t\t\tsetAttributes( { minHeightUnit: 'px' } );\n\t\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonResize={ ( value ) => {\n\t\t\t\t\t\tsetAttributes( { minHeight: value } );\n\t\t\t\t\t} }\n\t\t\t\t\tonResizeStop={ ( newMinHeight ) => {\n\t\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t\t\tsetAttributes( { minHeight: newMinHeight } );\n\t\t\t\t\t} }\n\t\t\t\t\tshowHandle={ isSelected }\n\t\t\t\t/>\n\n\t\t\t\t{ ( ! useFeaturedImage || url ) && (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'wp-block-cover__background',\n\t\t\t\t\t\t\tdimRatioToClass( dimRatio ),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ overlayColor.class ]: overlayColor.class,\n\t\t\t\t\t\t\t\t'has-background-dim': dimRatio !== undefined,\n\t\t\t\t\t\t\t\t// For backwards compatibility. Former versions of the Cover Block applied\n\t\t\t\t\t\t\t\t// `.wp-block-cover__gradient-background` in the presence of\n\t\t\t\t\t\t\t\t// media, a gradient and a dim.\n\t\t\t\t\t\t\t\t'wp-block-cover__gradient-background':\n\t\t\t\t\t\t\t\t\turl && gradientValue && dimRatio !== 0,\n\t\t\t\t\t\t\t\t'has-background-gradient': gradientValue,\n\t\t\t\t\t\t\t\t[ gradientClass ]: gradientClass,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={ { backgroundImage: gradientValue, ...bgStyle } }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ ! url && useFeaturedImage && (\n\t\t\t\t\t<Placeholder\n\t\t\t\t\t\tclassName=\"wp-block-cover__image--placeholder-image\"\n\t\t\t\t\t\twithIllustration={ true }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ url &&\n\t\t\t\t\tisImageBackground &&\n\t\t\t\t\t( isImgElement ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tref={ mediaElement }\n\t\t\t\t\t\t\tclassName=\"wp-block-cover__image-background\"\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\t\tstyle={ mediaStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tref={ mediaElement }\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\tclasses,\n\t\t\t\t\t\t\t\t'wp-block-cover__image-background'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ { backgroundImage, backgroundPosition } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t{ url && isVideoBackground && (\n\t\t\t\t\t<video\n\t\t\t\t\t\tref={ mediaElement }\n\t\t\t\t\t\tclassName=\"wp-block-cover__video-background\"\n\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\tmuted\n\t\t\t\t\t\tloop\n\t\t\t\t\t\tsrc={ url }\n\t\t\t\t\t\tstyle={ mediaStyle }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ isUploadingMedia && <Spinner /> }\n\t\t\t\t<CoverPlaceholder\n\t\t\t\t\tdisableMediaButtons\n\t\t\t\t\tonSelectMedia={ onSelectMedia }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t\t<div { ...innerBlocksProps } />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default compose( [\n\twithColors( { overlayColor: 'background-color' } ),\n] )( CoverEdit );\n"]}

package/build-module/cover/edit/inspector-controls.js

@@ -0,0 +1,240 @@
+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

package/build-module/cover/edit/inspector-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/cover/edit/inspector-controls.js"],"names":["Fragment","useMemo","BaseControl","Button","ExternalLink","FocalPointPicker","PanelBody","PanelRow","RangeControl","TextareaControl","ToggleControl","__experimentalUseCustomUnits","useCustomUnits","__experimentalToolsPanelItem","ToolsPanelItem","__experimentalUnitControl","UnitControl","__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","useInstanceId","InspectorControls","useSetting","__experimentalColorGradientSettingsDropdown","ColorGradientSettingsDropdown","__experimentalUseGradient","__experimentalUseMultipleOriginColorsAndGradients","useMultipleOriginColorsAndGradients","__","COVER_MIN_HEIGHT","mediaPosition","CoverHeightInput","onChange","onUnitChange","unit","value","instanceId","inputId","isPx","units","availableUnits","defaultValues","px","em","rem","vw","vh","handleOnChange","unprocessedValue","inputValue","parseFloat","undefined","isNaN","computedValue","parsedQuantity","join","min","maxWidth","CoverInspectorControls","attributes","setAttributes","clientId","setOverlayColor","coverRef","currentSettings","useFeaturedImage","dimRatio","focalPoint","hasParallax","isRepeated","minHeight","minHeightUnit","alt","isVideoBackground","isImageBackground","mediaElement","url","isImgElement","overlayColor","gradientValue","setGradient","toggleParallax","toggleIsRepeated","showFocalPointPicker","imperativeFocalPointPreview","styleOfRef","property","current","style","colorGradientSettings","newFocalPoint","newAlt","id","backgroundType","colorValue","color","label","onColorChange","onGradientChange","isShownByDefault","resetAllFilter","customOverlayColor","gradient","customGradient","newDimRation","newMinHeight","nextUnit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Fragment, useMemo } from '@wordpress/element';\nimport {\n\tBaseControl,\n\tButton,\n\tExternalLink,\n\tFocalPointPicker,\n\tPanelBody,\n\tPanelRow,\n\tRangeControl,\n\tTextareaControl,\n\tToggleControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\tInspectorControls,\n\tuseSetting,\n\t__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,\n\t__experimentalUseGradient,\n\t__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { COVER_MIN_HEIGHT, mediaPosition } from '../shared';\n\nfunction CoverHeightInput( {\n\tonChange,\n\tonUnitChange,\n\tunit = 'px',\n\tvalue = '',\n} ) {\n\tconst instanceId = useInstanceId( UnitControl );\n\tconst inputId = `block-cover-height-input-${ instanceId }`;\n\tconst isPx = unit === 'px';\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vw',\n\t\t\t'vh',\n\t\t],\n\t\tdefaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },\n\t} );\n\n\tconst handleOnChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== ''\n\t\t\t\t? parseFloat( unprocessedValue )\n\t\t\t\t: undefined;\n\n\t\tif ( isNaN( inputValue ) && inputValue !== undefined ) {\n\t\t\treturn;\n\t\t}\n\t\tonChange( inputValue );\n\t};\n\n\tconst computedValue = useMemo( () => {\n\t\tconst [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );\n\t\treturn [ parsedQuantity, unit ].join( '' );\n\t}, [ unit, value ] );\n\n\tconst min = isPx ? COVER_MIN_HEIGHT : 0;\n\n\treturn (\n\t\t<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>\n\t\t\t<UnitControl\n\t\t\t\tid={ inputId }\n\t\t\t\tisResetValueOnUnitChange\n\t\t\t\tmin={ min }\n\t\t\t\tonChange={ handleOnChange }\n\t\t\t\tonUnitChange={ onUnitChange }\n\t\t\t\tstyle={ { maxWidth: 80 } }\n\t\t\t\tunits={ units }\n\t\t\t\tvalue={ computedValue }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\nexport default function CoverInspectorControls( {\n\tattributes,\n\tsetAttributes,\n\tclientId,\n\tsetOverlayColor,\n\tcoverRef,\n\tcurrentSettings,\n} ) {\n\tconst {\n\t\tuseFeaturedImage,\n\t\tdimRatio,\n\t\tfocalPoint,\n\t\thasParallax,\n\t\tisRepeated,\n\t\tminHeight,\n\t\tminHeightUnit,\n\t\talt,\n\t} = attributes;\n\tconst {\n\t\tisVideoBackground,\n\t\tisImageBackground,\n\t\tmediaElement,\n\t\turl,\n\t\tisImgElement,\n\t\toverlayColor,\n\t} = currentSettings;\n\n\tconst { gradientValue, setGradient } = __experimentalUseGradient();\n\n\tconst toggleParallax = () => {\n\t\tsetAttributes( {\n\t\t\thasParallax: ! hasParallax,\n\t\t\t...( ! hasParallax ? { focalPoint: undefined } : {} ),\n\t\t} );\n\t};\n\n\tconst toggleIsRepeated = () => {\n\t\tsetAttributes( {\n\t\t\tisRepeated: ! isRepeated,\n\t\t} );\n\t};\n\n\tconst showFocalPointPicker =\n\t\tisVideoBackground ||\n\t\t( isImageBackground && ( ! hasParallax || isRepeated ) );\n\n\tconst imperativeFocalPointPreview = ( value ) => {\n\t\tconst [ styleOfRef, property ] = mediaElement.current\n\t\t\t? [ mediaElement.current.style, 'objectPosition' ]\n\t\t\t: [ coverRef.current.style, 'backgroundPosition' ];\n\t\tstyleOfRef[ property ] = mediaPosition( value );\n\t};\n\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t{ !! url && (\n\t\t\t\t\t<PanelBody title={ __( 'Media settings' ) }>\n\t\t\t\t\t\t{ isImageBackground && (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\t\t\t\t\t\tchecked={ hasParallax }\n\t\t\t\t\t\t\t\t\tonChange={ toggleParallax }\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Repeated background' ) }\n\t\t\t\t\t\t\t\t\tchecked={ isRepeated }\n\t\t\t\t\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ showFocalPointPicker && (\n\t\t\t\t\t\t\t<FocalPointPicker\n\t\t\t\t\t\t\t\tlabel={ __( 'Focal point picker' ) }\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tvalue={ focalPoint }\n\t\t\t\t\t\t\t\tonDragStart={ imperativeFocalPointPreview }\n\t\t\t\t\t\t\t\tonDrag={ imperativeFocalPointPreview }\n\t\t\t\t\t\t\t\tonChange={ ( newFocalPoint ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tfocalPoint: newFocalPoint,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! useFeaturedImage &&\n\t\t\t\t\t\t\turl &&\n\t\t\t\t\t\t\tisImageBackground &&\n\t\t\t\t\t\t\tisImgElement && (\n\t\t\t\t\t\t\t\t<TextareaControl\n\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t'Alt text (alternative text)'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tvalue={ alt }\n\t\t\t\t\t\t\t\t\tonChange={ ( newAlt ) =>\n\t\t\t\t\t\t\t\t\t\tsetAttributes( { alt: newAlt } )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\thelp={\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t<ExternalLink href=\"https://www.w3.org/WAI/tutorials/images/decision-tree\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Describe the purpose of the image'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Leave empty if the image is purely decorative.'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t<PanelRow>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\tclassName=\"block-library-cover__reset-button\"\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\turl: undefined,\n\t\t\t\t\t\t\t\t\t\tid: undefined,\n\t\t\t\t\t\t\t\t\t\tbackgroundType: undefined,\n\t\t\t\t\t\t\t\t\t\tfocalPoint: undefined,\n\t\t\t\t\t\t\t\t\t\thasParallax: undefined,\n\t\t\t\t\t\t\t\t\t\tisRepeated: undefined,\n\t\t\t\t\t\t\t\t\t\tuseFeaturedImage: false,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear Media' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</PanelRow>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t) }\n\t\t\t</InspectorControls>\n\t\t\t<InspectorControls __experimentalGroup=\"color\">\n\t\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\tsettings={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tcolorValue: overlayColor.color,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tlabel: __( 'Overlay' ),\n\t\t\t\t\t\t\tonColorChange: setOverlayColor,\n\t\t\t\t\t\t\tonGradientChange: setGradient,\n\t\t\t\t\t\t\tisShownByDefault: true,\n\t\t\t\t\t\t\tresetAllFilter: () => ( {\n\t\t\t\t\t\t\t\toverlayColor: undefined,\n\t\t\t\t\t\t\t\tcustomOverlayColor: undefined,\n\t\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t\t\t\tcustomGradient: undefined,\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\t{ ...colorGradientSettings }\n\t\t\t\t/>\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => {\n\t\t\t\t\t\t// If there's a media background the dimRatio will be\n\t\t\t\t\t\t// defaulted to 50 whereas it will be 100 for colors.\n\t\t\t\t\t\treturn dimRatio === undefined\n\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t: dimRatio !== ( url ? 50 : 100 );\n\t\t\t\t\t} }\n\t\t\t\t\tlabel={ __( 'Overlay opacity' ) }\n\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\tsetAttributes( { dimRatio: url ? 50 : 100 } )\n\t\t\t\t\t}\n\t\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\t\tdimRatio: url ? 50 : 100,\n\t\t\t\t\t} ) }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Overlay opacity' ) }\n\t\t\t\t\t\tvalue={ dimRatio }\n\t\t\t\t\t\tonChange={ ( newDimRation ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tdimRatio: newDimRation,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tstep={ 10 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t</InspectorControls>\n\t\t\t<InspectorControls __experimentalGroup=\"dimensions\">\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => !! minHeight }\n\t\t\t\t\tlabel={ __( 'Minimum height' ) }\n\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tminHeight: undefined,\n\t\t\t\t\t\t\tminHeightUnit: undefined,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tresetAllFilter={ () => ( {\n\t\t\t\t\t\tminHeight: undefined,\n\t\t\t\t\t\tminHeightUnit: undefined,\n\t\t\t\t\t} ) }\n\t\t\t\t\tisShownByDefault={ true }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<CoverHeightInput\n\t\t\t\t\t\tvalue={ minHeight }\n\t\t\t\t\t\tunit={ minHeightUnit }\n\t\t\t\t\t\tonChange={ ( newMinHeight ) =>\n\t\t\t\t\t\t\tsetAttributes( { minHeight: newMinHeight } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonUnitChange={ ( nextUnit ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tminHeightUnit: nextUnit,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n}\n"]}