@wordpress/block-library 7.3.10 → 7.6.0

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

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CoverInspectorControls;
+
+var _element = require("@wordpress/element");
+
+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);
+  };
+
+  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.__experimentalPanelColorGradientSettings, {
+    __experimentalHasMultipleOrigins: true,
+    __experimentalIsRenderedInSidebar: true,
+    title: (0, _i18n.__)('Overlay'),
+    initialOpen: true,
+    settings: [{
+      colorValue: overlayColor.color,
+      gradientValue,
+      onColorChange: setOverlayColor,
+      onGradientChange: setGradient,
+      label: (0, _i18n.__)('Color')
+    }]
+  }, (0, _element.createElement)(_components.RangeControl, {
+    label: (0, _i18n.__)('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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/cover/edit/inspector-controls.js"],"names":["CoverHeightInput","onChange","onUnitChange","unit","value","instanceId","UnitControl","inputId","isPx","units","availableUnits","defaultValues","px","em","rem","vw","vh","handleOnChange","unprocessedValue","inputValue","parseFloat","undefined","isNaN","computedValue","parsedQuantity","join","min","COVER_MIN_HEIGHT","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","newFocalPoint","newAlt","id","backgroundType","colorValue","color","onColorChange","onGradientChange","label","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__experimentalUseGradient,\n\t__experimentalPanelColorGradientSettings as PanelColorGradientSettings,\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\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\t<PanelColorGradientSettings\n\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\ttitle={ __( 'Overlay' ) }\n\t\t\t\t\tinitialOpen={ true }\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\tonColorChange: setOverlayColor,\n\t\t\t\t\t\t\tonGradientChange: setGradient,\n\t\t\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( '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</PanelColorGradientSettings>\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"]}

package/build/cover/edit/resizable-cover.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResizableCover;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+const RESIZABLE_BOX_ENABLE_OPTION = {
+  top: false,
+  right: false,
+  bottom: true,
+  left: false,
+  topRight: false,
+  bottomRight: false,
+  bottomLeft: false,
+  topLeft: false
+};
+
+function ResizableCover(_ref) {
+  let {
+    className,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    ...props
+  } = _ref;
+  const [isResizing, setIsResizing] = (0, _element.useState)(false);
+  return (0, _element.createElement)(_components.ResizableBox, (0, _extends2.default)({
+    className: (0, _classnames.default)(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));
+}
+//# sourceMappingURL=resizable-cover.js.map

package/build/cover/edit/resizable-cover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/cover/edit/resizable-cover.js"],"names":["RESIZABLE_BOX_ENABLE_OPTION","top","right","bottom","left","topRight","bottomRight","bottomLeft","topLeft","ResizableCover","className","onResizeStart","onResize","onResizeStop","props","isResizing","setIsResizing","_event","_direction","elt","clientHeight"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,2BAA2B,GAAG;AACnCC,EAAAA,GAAG,EAAE,KAD8B;AAEnCC,EAAAA,KAAK,EAAE,KAF4B;AAGnCC,EAAAA,MAAM,EAAE,IAH2B;AAInCC,EAAAA,IAAI,EAAE,KAJ6B;AAKnCC,EAAAA,QAAQ,EAAE,KALyB;AAMnCC,EAAAA,WAAW,EAAE,KANsB;AAOnCC,EAAAA,UAAU,EAAE,KAPuB;AAQnCC,EAAAA,OAAO,EAAE;AAR0B,CAApC;;AAWe,SAASC,cAAT,OAMX;AAAA,MANoC;AACvCC,IAAAA,SADuC;AAEvCC,IAAAA,aAFuC;AAGvCC,IAAAA,QAHuC;AAIvCC,IAAAA,YAJuC;AAKvC,OAAGC;AALoC,GAMpC;AACH,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AAEA,SACC,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAG,yBAAYN,SAAZ,EAAuB;AAClC,qBAAeK;AADmB,KAAvB,CADb;AAIC,IAAA,MAAM,EAAGf,2BAJV;AAKC,IAAA,aAAa,EAAG,CAAEiB,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AAC9CR,MAAAA,aAAa,CAAEQ,GAAG,CAACC,YAAN,CAAb;AACAR,MAAAA,QAAQ,CAAEO,GAAG,CAACC,YAAN,CAAR;AACA,KARF;AASC,IAAA,QAAQ,EAAG,CAAEH,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AACzCP,MAAAA,QAAQ,CAAEO,GAAG,CAACC,YAAN,CAAR;;AACA,UAAK,CAAEL,UAAP,EAAoB;AACnBC,QAAAA,aAAa,CAAE,IAAF,CAAb;AACA;AACD,KAdF;AAeC,IAAA,YAAY,EAAG,CAAEC,MAAF,EAAUC,UAAV,EAAsBC,GAAtB,KAA+B;AAC7CN,MAAAA,YAAY,CAAEM,GAAG,CAACC,YAAN,CAAZ;AACAJ,MAAAA,aAAa,CAAE,KAAF,CAAb;AACA;AAlBF,KAmBMF,KAnBN,EADD;AAuBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\n\nconst RESIZABLE_BOX_ENABLE_OPTION = {\n\ttop: false,\n\tright: false,\n\tbottom: true,\n\tleft: false,\n\ttopRight: false,\n\tbottomRight: false,\n\tbottomLeft: false,\n\ttopLeft: false,\n};\n\nexport default function ResizableCover( {\n\tclassName,\n\tonResizeStart,\n\tonResize,\n\tonResizeStop,\n\t...props\n} ) {\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tclassName={ classnames( className, {\n\t\t\t\t'is-resizing': isResizing,\n\t\t\t} ) }\n\t\t\tenable={ RESIZABLE_BOX_ENABLE_OPTION }\n\t\t\tonResizeStart={ ( _event, _direction, elt ) => {\n\t\t\t\tonResizeStart( elt.clientHeight );\n\t\t\t\tonResize( elt.clientHeight );\n\t\t\t} }\n\t\t\tonResize={ ( _event, _direction, elt ) => {\n\t\t\t\tonResize( elt.clientHeight );\n\t\t\t\tif ( ! isResizing ) {\n\t\t\t\t\tsetIsResizing( true );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonResizeStop={ ( _event, _direction, elt ) => {\n\t\t\t\tonResizeStop( elt.clientHeight );\n\t\t\t\tsetIsResizing( false );\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}

package/build/cover/edit/use-cover-is-dark.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useCoverIsDark;
+
+var _fastAverageColor = _interopRequireDefault(require("fast-average-color"));
+
+var _colord = require("colord");
+
+var _element = require("@wordpress/element");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+function retrieveFastAverageColor() {
+  if (!retrieveFastAverageColor.fastAverageColor) {
+    retrieveFastAverageColor.fastAverageColor = new _fastAverageColor.default();
+  }
+
+  return retrieveFastAverageColor.fastAverageColor;
+}
+/**
+ * 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] = (0, _element.useState)(false);
+  (0, _element.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]);
+  (0, _element.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((0, _colord.colord)(overlayColor).isDark());
+    }
+  }, [overlayColor, dimRatio > 50 || !url, setIsDark]);
+  (0, _element.useEffect)(() => {
+    if (!url && !overlayColor) {
+      // Reset isDark.
+      setIsDark(false);
+    }
+  }, [!url && !overlayColor, setIsDark]);
+  return isDark;
+}
+//# sourceMappingURL=use-cover-is-dark.js.map

package/build/cover/edit/use-cover-is-dark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/cover/edit/use-cover-is-dark.js"],"names":["retrieveFastAverageColor","fastAverageColor","FastAverageColor","useCoverIsDark","url","dimRatio","overlayColor","elementRef","isDark","setIsDark","current","getColorAsync","color"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,wBAAT,GAAoC;AACnC,MAAK,CAAEA,wBAAwB,CAACC,gBAAhC,EAAmD;AAClDD,IAAAA,wBAAwB,CAACC,gBAAzB,GAA4C,IAAIC,yBAAJ,EAA5C;AACA;;AACD,SAAOF,wBAAwB,CAACC,gBAAhC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACe,SAASE,cAAT,CACdC,GADc,EAKb;AAAA,MAHDC,QAGC,uEAHU,EAGV;AAAA,MAFDC,YAEC;AAAA,MADDC,UACC;AACD,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,0BAAW,MAAM;AAChB;AACA;AACA,QAAKL,GAAG,IAAIC,QAAQ,IAAI,EAAnB,IAAyBE,UAAU,CAACG,OAAzC,EAAmD;AAClDV,MAAAA,wBAAwB,GAAGW,aAA3B,CACCJ,UAAU,CAACG,OADZ,EAEGE,KAAF,IAAa;AACZH,QAAAA,SAAS,CAAEG,KAAK,CAACJ,MAAR,CAAT;AACA,OAJF;AAMA;AACD,GAXD,EAWG,CAAEJ,GAAF,EAAOA,GAAG,IAAIC,QAAQ,IAAI,EAAnB,IAAyBE,UAAU,CAACG,OAA3C,EAAoDD,SAApD,CAXH;AAYA,0BAAW,MAAM;AAChB;AACA;AACA,QAAKJ,QAAQ,GAAG,EAAX,IAAiB,CAAED,GAAxB,EAA8B;AAC7B,UAAK,CAAEE,YAAP,EAAsB;AACrB;AACAG,QAAAA,SAAS,CAAE,IAAF,CAAT;AACA;AACA;;AACDA,MAAAA,SAAS,CAAE,oBAAQH,YAAR,EAAuBE,MAAvB,EAAF,CAAT;AACA;AACD,GAXD,EAWG,CAAEF,YAAF,EAAgBD,QAAQ,GAAG,EAAX,IAAiB,CAAED,GAAnC,EAAwCK,SAAxC,CAXH;AAYA,0BAAW,MAAM;AAChB,QAAK,CAAEL,GAAF,IAAS,CAAEE,YAAhB,EAA+B;AAC9B;AACAG,MAAAA,SAAS,CAAE,KAAF,CAAT;AACA;AACD,GALD,EAKG,CAAE,CAAEL,GAAF,IAAS,CAAEE,YAAb,EAA2BG,SAA3B,CALH;AAMA,SAAOD,MAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport FastAverageColor from 'fast-average-color';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nfunction retrieveFastAverageColor() {\n\tif ( ! retrieveFastAverageColor.fastAverageColor ) {\n\t\tretrieveFastAverageColor.fastAverageColor = new FastAverageColor();\n\t}\n\treturn retrieveFastAverageColor.fastAverageColor;\n}\n\n/**\n * useCoverIsDark is a hook that returns a boolean variable specifying if the cover\n * background is dark or not.\n *\n * @param {?string} url          Url of the media background.\n * @param {?number} dimRatio     Transparency of the overlay color. If an image and\n *                               color are set, dimRatio is used to decide what is used\n *                               for background darkness checking purposes.\n * @param {?string} overlayColor String containing the overlay color value if one exists.\n * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a\n *                               dom element that renders that media.\n *\n * @return {boolean} True if the cover background is considered \"dark\" and false otherwise.\n */\nexport default function useCoverIsDark(\n\turl,\n\tdimRatio = 50,\n\toverlayColor,\n\telementRef\n) {\n\tconst [ isDark, setIsDark ] = useState( false );\n\tuseEffect( () => {\n\t\t// If opacity is lower than 50 the dominant color is the image or video color,\n\t\t// so use that color for the dark mode computation.\n\t\tif ( url && dimRatio <= 50 && elementRef.current ) {\n\t\t\tretrieveFastAverageColor().getColorAsync(\n\t\t\t\telementRef.current,\n\t\t\t\t( color ) => {\n\t\t\t\t\tsetIsDark( color.isDark );\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );\n\tuseEffect( () => {\n\t\t// If opacity is greater than 50 the dominant color is the overlay color,\n\t\t// so use that color for the dark mode computation.\n\t\tif ( dimRatio > 50 || ! url ) {\n\t\t\tif ( ! overlayColor ) {\n\t\t\t\t// If no overlay color exists the overlay color is black (isDark )\n\t\t\t\tsetIsDark( true );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsDark( colord( overlayColor ).isDark() );\n\t\t}\n\t}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );\n\tuseEffect( () => {\n\t\tif ( ! url && ! overlayColor ) {\n\t\t\t// Reset isDark.\n\t\t\tsetIsDark( false );\n\t\t}\n\t}, [ ! url && ! overlayColor, setIsDark ] );\n\treturn isDark;\n}\n"]}

package/build/cover/edit.native.js

@@ -15,6 +15,8 @@ var _reactNative = require("react-native");
 
 var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
 
+var _dedupe = _interopRequireDefault(require("classnames/dedupe"));
+
 var _reactNativeBridge = require("@wordpress/react-native-bridge");
 
 var _i18n = require("@wordpress/i18n");
@@ -39,6 +41,8 @@ var _shared = require("./shared");
 
 var _controls = _interopRequireDefault(require("./controls"));
 
+var _useCoverIsDark = _interopRequireDefault(require("./use-cover-is-dark"));
+
 /**
  * External dependencies
  */
@@ -89,7 +93,8 @@ const Cover = _ref => {
     templateLock,
     customGradient,
     gradient,
-    overlayColor
+    overlayColor,
+    isDark
   } = attributes;
   const [isScreenReaderEnabled, setIsScreenReaderEnabled] = (0, _element.useState)(false);
   (0, _element.useEffect)(() => {
@@ -125,20 +130,7 @@ const Cover = _ref => {
   const hasBackground = !!(url || style && style.color && style.color.background || attributes.overlayColor || overlayColorValue.color || customOverlayColor || gradientValue);
   const hasOnlyColorBackground = !url && (hasBackground || hasInnerBlocks);
   const [isCustomColorPickerShowing, setCustomColorPickerShowing] = (0, _element.useState)(false);
-  const openMediaOptionsRef = (0, _element.useRef)(); // Used to set a default color for its InnerBlocks
-  // since there's no system to inherit styles yet
-  // the RichText component will check if there are
-  // parent styles for the current block. If there are,
-  // it will use that color instead.
-
-  (0, _element.useEffect)(() => {
-    // While we don't support theme colors.
-    if (!attributes.overlayColor || !attributes.overlay && url) {
-      setAttributes({
-        childrenStyles: _style.default.defaultColor
-      });
-    }
-  }, [setAttributes]); // Initialize uploading flag to false, awaiting sync.
+  const openMediaOptionsRef = (0, _element.useRef)(); // Initialize uploading flag to false, awaiting sync.
 
   const [isUploadInProgress, setIsUploadInProgress] = (0, _element.useState)(false); // Initialize upload failure flag to true if url is local.
 
@@ -201,6 +193,35 @@ const Cover = _ref => {
     openGeneralSidebar();
   }
 
+  const {
+    __unstableMarkNextChangeAsNotPersistent
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  const isCoverDark = (0, _useCoverIsDark.default)(isDark, url, dimRatio, overlayColorValue === null || overlayColorValue === void 0 ? void 0 : overlayColorValue.color);
+  (0, _element.useEffect)(() => {
+    var _attributes$className;
+
+    // This side-effect should not create an undo level.
+    __unstableMarkNextChangeAsNotPersistent(); // Used to set a default color for its InnerBlocks
+    // since there's no system to inherit styles yet
+    // the RichText component will check if there are
+    // parent styles for the current block. If there are,
+    // it will use that color instead.
+
+
+    setAttributes({
+      isDark: isCoverDark,
+      childrenStyles: isCoverDark ? _style.default.defaultColor : _style.default.defaultColorLightMode
+    }); // Ensure that "is-light" is removed from "className" attribute if cover background is dark.
+
+    if (isCoverDark && (_attributes$className = attributes.className) !== null && _attributes$className !== void 0 && _attributes$className.includes('is-light')) {
+      const className = (0, _dedupe.default)(attributes.className, {
+        'is-light': false
+      });
+      setAttributes({
+        className: className !== '' ? className : undefined
+      });
+    }
+  }, [isCoverDark]);
   const backgroundColor = getStylesFromColorScheme(_style.default.backgroundSolid, _style.default.backgroundSolidDark);
   const overlayStyles = [_style.default.overlay, url && {
     opacity: dimRatio / 100
@@ -271,7 +292,6 @@ const Cover = _ref => {
     return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
       accessible: !isParentSelected,
       onPress: onMediaPressed,
-      onLongPress: openMediaOptionsRef.current,
       disabled: !isParentSelected
     }, (0, _element.createElement)(_reactNative.View, {
       style: [_style.default.background, backgroundColor]