@wordpress/block-editor 12.22.0 → 12.24.0

package/build/hooks/background.js

@@ -6,32 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BACKGROUND_SUPPORT_KEY = void 0;
 exports.BackgroundImagePanel = BackgroundImagePanel;
-exports.default = exports.coordsToBackgroundPosition = exports.backgroundPositionToCoords = exports.IMAGE_BACKGROUND_TYPE = void 0;
+exports.default = void 0;
 exports.getBackgroundImageClasses = getBackgroundImageClasses;
-exports.hasBackgroundImageValue = hasBackgroundImageValue;
-exports.hasBackgroundSizeValue = hasBackgroundSizeValue;
 exports.hasBackgroundSupport = hasBackgroundSupport;
-exports.resetBackgroundImage = resetBackgroundImage;
+exports.setBackgroundStyleDefaults = setBackgroundStyleDefaults;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _blob = require("@wordpress/blob");
 var _blocks = require("@wordpress/blocks");
-var _dom = require("@wordpress/dom");
-var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
-var _i18n = require("@wordpress/i18n");
-var _notices = require("@wordpress/notices");
-var _url = require("@wordpress/url");
 var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
-var _mediaReplaceFlow = _interopRequireDefault(require("../components/media-replace-flow"));
-var _useSettings = require("../components/use-settings");
 var _utils = require("./utils");
 var _store = require("../store");
-/**
- * External dependencies
- */
-
+var _backgroundPanel = _interopRequireWildcard(require("../components/global-styles/background-panel"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * WordPress dependencies
  */
@@ -41,31 +29,11 @@ var _store = require("../store");
  */
 
 const BACKGROUND_SUPPORT_KEY = exports.BACKGROUND_SUPPORT_KEY = 'background';
-const IMAGE_BACKGROUND_TYPE = exports.IMAGE_BACKGROUND_TYPE = 'image';
 
-/**
- * Checks if there is a current value in the background image block support
- * attributes.
- *
- * @param {Object} style Style attribute.
- * @return {boolean}     Whether or not the block has a background image value set.
- */
-function hasBackgroundImageValue(style) {
-  const hasValue = !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url;
-  return hasValue;
-}
-
-/**
- * Checks if there is a current value in the background size block support
- * attributes. Background size values include background size as well
- * as background position.
- *
- * @param {Object} style Style attribute.
- * @return {boolean}     Whether or not the block has a background size value set.
- */
-function hasBackgroundSizeValue(style) {
-  return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
-}
+// Initial control values where no block style is set.
+const BACKGROUND_DEFAULT_VALUES = {
+  backgroundSize: 'cover'
+};
 
 /**
  * Determine whether there is block support for background.
@@ -76,9 +44,6 @@ function hasBackgroundSizeValue(style) {
  * @return {boolean} Whether there is support.
  */
 function hasBackgroundSupport(blockName, feature = 'any') {
-  if (_element.Platform.OS !== 'web') {
-    return false;
-  }
   const support = (0, _blocks.getBlockSupport)(blockName, BACKGROUND_SUPPORT_KEY);
   if (support === true) {
     return true;
@@ -88,77 +53,44 @@ function hasBackgroundSupport(blockName, feature = 'any') {
   }
   return !!support?.[feature];
 }
-function useBlockProps({
-  name,
-  style
-}) {
-  if (!hasBackgroundSupport(name) || !style?.background?.backgroundImage) {
+function setBackgroundStyleDefaults(backgroundStyle) {
+  if (!backgroundStyle) {
     return;
   }
-  const backgroundImage = style?.background?.backgroundImage;
-  let props;
+  const backgroundImage = backgroundStyle?.backgroundImage;
+  let backgroundStylesWithDefaults;
 
   // Set block background defaults.
   if (backgroundImage?.source === 'file' && !!backgroundImage?.url) {
-    if (!style?.background?.backgroundSize) {
-      props = {
-        style: {
-          backgroundSize: 'cover'
-        }
+    if (!backgroundStyle?.backgroundSize) {
+      backgroundStylesWithDefaults = {
+        backgroundSize: 'cover'
       };
     }
-    if ('contain' === style?.background?.backgroundSize && !style?.background?.backgroundPosition) {
-      props = {
-        style: {
-          backgroundPosition: 'center'
-        }
+    if ('contain' === backgroundStyle?.backgroundSize && !backgroundStyle?.backgroundPosition) {
+      backgroundStylesWithDefaults = {
+        backgroundPosition: 'center'
       };
     }
   }
-  if (!props) {
+  return backgroundStylesWithDefaults;
+}
+function useBlockProps({
+  name,
+  style
+}) {
+  if (!hasBackgroundSupport(name) || !style?.background?.backgroundImage) {
     return;
   }
-  return props;
-}
-
-/**
- * Resets the background image block support attributes. This can be used when disabling
- * the background image controls for a block via a `ToolsPanel`.
- *
- * @param {Object}   style         Style attribute.
- * @param {Function} setAttributes Function to set block's attributes.
- */
-function resetBackgroundImage(style = {}, setAttributes) {
-  setAttributes({
-    style: (0, _utils.cleanEmptyObject)({
-      ...style,
-      background: {
-        ...style?.background,
-        backgroundImage: undefined
-      }
-    })
-  });
-}
-
-/**
- * Resets the background size block support attributes. This can be used when disabling
- * the background size controls for a block via a `ToolsPanel`.
- *
- * @param {Object}   style         Style attribute.
- * @param {Function} setAttributes Function to set block's attributes.
- */
-function resetBackgroundSize(style = {}, setAttributes) {
-  setAttributes({
-    style: (0, _utils.cleanEmptyObject)({
-      ...style,
-      background: {
-        ...style?.background,
-        backgroundPosition: undefined,
-        backgroundRepeat: undefined,
-        backgroundSize: undefined
-      }
-    })
-  });
+  const backgroundStyles = setBackgroundStyleDefaults(style?.background);
+  if (!backgroundStyles) {
+    return;
+  }
+  return {
+    style: {
+      ...backgroundStyles
+    }
+  };
 }
 
 /**
@@ -169,343 +101,57 @@ function resetBackgroundSize(style = {}, setAttributes) {
  * @return {string} CSS class name.
  */
 function getBackgroundImageClasses(style) {
-  return hasBackgroundImageValue(style) ? 'has-background' : '';
+  return (0, _backgroundPanel.hasBackgroundImageValue)(style) ? 'has-background' : '';
 }
-function InspectorImagePreview({
-  label,
-  filename,
-  url: imgUrl
+function BackgroundInspectorControl({
+  children
 }) {
-  const imgLabel = label || (0, _url.getFilename)(imgUrl);
-  return (0, _react.createElement)(_components.__experimentalItemGroup, {
-    as: "span"
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "flex-start",
-    as: "span"
-  }, (0, _react.createElement)("span", {
-    className: (0, _classnames.default)('block-editor-hooks__background__inspector-image-indicator-wrapper', {
-      'has-image': imgUrl
-    }),
-    "aria-hidden": true
-  }, imgUrl && (0, _react.createElement)("span", {
-    className: "block-editor-hooks__background__inspector-image-indicator",
-    style: {
-      backgroundImage: `url(${imgUrl})`
-    }
-  })), (0, _react.createElement)(_components.FlexItem, {
-    as: "span"
-  }, (0, _react.createElement)(_components.__experimentalTruncate, {
-    numberOfLines: 1,
-    className: "block-editor-hooks__background__inspector-media-replace-title"
-  }, imgLabel), (0, _react.createElement)(_components.VisuallyHidden, {
-    as: "span"
-  }, filename ? (0, _i18n.sprintf)( /* translators: %s: file name */
-  (0, _i18n.__)('Selected image: %s'), filename) : (0, _i18n.__)('No image selected')))));
-}
-function BackgroundImagePanelItem({
-  clientId,
-  isShownByDefault,
-  setAttributes
-}) {
-  const {
-    style,
-    mediaUpload
-  } = (0, _data.useSelect)(select => {
-    const {
-      getBlockAttributes,
-      getSettings
-    } = select(_store.store);
-    return {
-      style: getBlockAttributes(clientId)?.style,
-      mediaUpload: getSettings().mediaUpload
-    };
-  }, [clientId]);
-  const {
-    id,
-    title,
-    url
-  } = style?.background?.backgroundImage || {};
-  const replaceContainerRef = (0, _element.useRef)();
-  const {
-    createErrorNotice
-  } = (0, _data.useDispatch)(_notices.store);
-  const onUploadError = message => {
-    createErrorNotice(message, {
-      type: 'snackbar'
-    });
-  };
-  const onSelectMedia = media => {
-    if (!media || !media.url) {
-      const newStyle = {
-        ...style,
-        background: {
-          ...style?.background,
-          backgroundImage: undefined
-        }
-      };
-      const newAttributes = {
-        style: (0, _utils.cleanEmptyObject)(newStyle)
-      };
-      setAttributes(newAttributes);
-      return;
-    }
-    if ((0, _blob.isBlobURL)(media.url)) {
-      return;
-    }
-
-    // For media selections originated from a file upload.
-    if (media.media_type && media.media_type !== IMAGE_BACKGROUND_TYPE || !media.media_type && media.type && media.type !== IMAGE_BACKGROUND_TYPE) {
-      onUploadError((0, _i18n.__)('Only images can be used as a background image.'));
-      return;
-    }
-    const newStyle = {
-      ...style,
-      background: {
-        ...style?.background,
-        backgroundImage: {
-          url: media.url,
-          id: media.id,
-          source: 'file',
-          title: media.title || undefined
-        }
-      }
-    };
-    const newAttributes = {
-      style: (0, _utils.cleanEmptyObject)(newStyle)
-    };
-    setAttributes(newAttributes);
-  };
-  const onFilesDrop = filesList => {
-    mediaUpload({
-      allowedTypes: ['image'],
-      filesList,
-      onFileChange([image]) {
-        if ((0, _blob.isBlobURL)(image?.url)) {
-          return;
-        }
-        onSelectMedia(image);
-      },
-      onError: onUploadError
-    });
-  };
-  const resetAllFilter = (0, _element.useCallback)(previousValue => {
+  const resetAllFilter = (0, _element.useCallback)(attributes => {
     return {
-      ...previousValue,
+      ...attributes,
       style: {
-        ...previousValue.style,
+        ...attributes.style,
         background: undefined
       }
     };
   }, []);
-  const hasValue = hasBackgroundImageValue(style);
-  return (0, _react.createElement)(_components.__experimentalToolsPanelItem, {
-    className: "single-column",
-    hasValue: () => hasValue,
-    label: (0, _i18n.__)('Background image'),
-    onDeselect: () => resetBackgroundImage(style, setAttributes),
-    isShownByDefault: isShownByDefault,
-    resetAllFilter: resetAllFilter,
-    panelId: clientId
-  }, (0, _react.createElement)("div", {
-    className: "block-editor-hooks__background__inspector-media-replace-container",
-    ref: replaceContainerRef
-  }, (0, _react.createElement)(_mediaReplaceFlow.default, {
-    mediaId: id,
-    mediaURL: url,
-    allowedTypes: [IMAGE_BACKGROUND_TYPE],
-    accept: "image/*",
-    onSelect: onSelectMedia,
-    name: (0, _react.createElement)(InspectorImagePreview, {
-      label: (0, _i18n.__)('Background image'),
-      filename: title,
-      url: url
-    }),
-    variant: "secondary"
-  }, hasValue && (0, _react.createElement)(_components.MenuItem, {
-    onClick: () => {
-      const [toggleButton] = _dom.focus.tabbable.find(replaceContainerRef.current);
-      // Focus the toggle button and close the dropdown menu.
-      // This ensures similar behaviour as to selecting an image, where the dropdown is
-      // closed and focus is redirected to the dropdown toggle button.
-      toggleButton?.focus();
-      toggleButton?.click();
-      resetBackgroundImage(style, setAttributes);
-    }
-  }, (0, _i18n.__)('Reset '))), (0, _react.createElement)(_components.DropZone, {
-    onFilesDrop: onFilesDrop,
-    label: (0, _i18n.__)('Drop to upload')
-  })));
-}
-function backgroundSizeHelpText(value) {
-  if (value === 'cover' || value === undefined) {
-    return (0, _i18n.__)('Image covers the space evenly.');
-  }
-  if (value === 'contain') {
-    return (0, _i18n.__)('Image is contained without distortion.');
-  }
-  return (0, _i18n.__)('Specify a fixed width.');
+  return (0, _react.createElement)(_inspectorControls.default, {
+    group: "background",
+    resetAllFilter: resetAllFilter
+  }, children);
 }
-const coordsToBackgroundPosition = value => {
-  if (!value || isNaN(value.x) && isNaN(value.y)) {
-    return undefined;
-  }
-  const x = isNaN(value.x) ? 0.5 : value.x;
-  const y = isNaN(value.y) ? 0.5 : value.y;
-  return `${x * 100}% ${y * 100}%`;
-};
-exports.coordsToBackgroundPosition = coordsToBackgroundPosition;
-const backgroundPositionToCoords = value => {
-  if (!value) {
-    return {
-      x: undefined,
-      y: undefined
-    };
-  }
-  let [x, y] = value.split(' ').map(v => parseFloat(v) / 100);
-  x = isNaN(x) ? undefined : x;
-  y = isNaN(y) ? x : y;
-  return {
-    x,
-    y
-  };
-};
-exports.backgroundPositionToCoords = backgroundPositionToCoords;
-function BackgroundSizePanelItem({
+function BackgroundImagePanel({
   clientId,
-  isShownByDefault,
-  setAttributes
+  name,
+  setAttributes,
+  settings
 }) {
   const style = (0, _data.useSelect)(select => select(_store.store).getBlockAttributes(clientId)?.style, [clientId]);
-  const sizeValue = style?.background?.backgroundSize;
-  const repeatValue = style?.background?.backgroundRepeat;
-
-  // An `undefined` value is treated as `cover` by the toggle group control.
-  // An empty string is treated as `auto` by the toggle group control. This
-  // allows a user to select "Size" and then enter a custom value, with an
-  // empty value being treated as `auto`.
-  const currentValueForToggle = sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' || sizeValue === '' ? 'auto' : sizeValue || 'cover';
-
-  // If the current value is `cover` and the repeat value is `undefined`, then
-  // the toggle should be unchecked as the default state. Otherwise, the toggle
-  // should reflect the current repeat value.
-  const repeatCheckedValue = !(repeatValue === 'no-repeat' || currentValueForToggle === 'cover' && repeatValue === undefined);
-  const hasValue = hasBackgroundSizeValue(style);
-  const resetAllFilter = (0, _element.useCallback)(previousValue => {
-    return {
-      ...previousValue,
-      style: {
-        ...previousValue.style,
-        background: {
-          ...previousValue.style?.background,
-          backgroundRepeat: undefined,
-          backgroundSize: undefined
-        }
-      }
-    };
-  }, []);
-  const updateBackgroundSize = next => {
-    // When switching to 'contain' toggle the repeat off.
-    let nextRepeat = repeatValue;
-    if (next === 'contain') {
-      nextRepeat = 'no-repeat';
-    }
-    if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
-      nextRepeat = undefined;
-    }
-    setAttributes({
-      style: (0, _utils.cleanEmptyObject)({
-        ...style,
-        background: {
-          ...style?.background,
-          backgroundRepeat: nextRepeat,
-          backgroundSize: next
-        }
-      })
-    });
-  };
-  const updateBackgroundPosition = next => {
+  if (!(0, _backgroundPanel.useHasBackgroundPanel)(settings) || !hasBackgroundSupport(name, 'backgroundImage')) {
+    return null;
+  }
+  const defaultControls = (0, _blocks.getBlockSupport)(name, [BACKGROUND_SUPPORT_KEY, '__experimentalDefaultControls']);
+  const onChange = newStyle => {
     setAttributes({
-      style: (0, _utils.cleanEmptyObject)({
-        ...style,
-        background: {
-          ...style?.background,
-          backgroundPosition: coordsToBackgroundPosition(next)
-        }
-      })
+      style: (0, _utils.cleanEmptyObject)(newStyle)
     });
   };
-  const toggleIsRepeated = () => {
-    setAttributes({
-      style: (0, _utils.cleanEmptyObject)({
-        ...style,
-        background: {
-          ...style?.background,
-          backgroundRepeat: repeatCheckedValue === true ? 'no-repeat' : undefined
-        }
-      })
-    });
+  const updatedSettings = {
+    ...settings,
+    background: {
+      ...settings.background,
+      backgroundSize: settings?.background?.backgroundSize && hasBackgroundSupport(name, 'backgroundSize')
+    }
   };
-  return (0, _react.createElement)(_components.__experimentalVStack, {
-    as: _components.__experimentalToolsPanelItem,
-    spacing: 2,
-    className: "single-column",
-    hasValue: () => hasValue,
-    label: (0, _i18n.__)('Size'),
-    onDeselect: () => resetBackgroundSize(style, setAttributes),
-    isShownByDefault: isShownByDefault,
-    resetAllFilter: resetAllFilter,
-    panelId: clientId
-  }, (0, _react.createElement)(_components.FocalPointPicker, {
-    __next40pxDefaultSize: true,
-    label: (0, _i18n.__)('Position'),
-    url: style?.background?.backgroundImage?.url,
-    value: backgroundPositionToCoords(style?.background?.backgroundPosition),
-    onChange: updateBackgroundPosition
-  }), (0, _react.createElement)(_components.__experimentalToggleGroupControl, {
-    size: '__unstable-large',
-    label: (0, _i18n.__)('Size'),
-    value: currentValueForToggle,
-    onChange: updateBackgroundSize,
-    isBlock: true,
-    help: backgroundSizeHelpText(sizeValue)
-  }, (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
-    key: 'cover',
-    value: 'cover',
-    label: (0, _i18n.__)('Cover')
-  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
-    key: 'contain',
-    value: 'contain',
-    label: (0, _i18n.__)('Contain')
-  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
-    key: 'fixed',
-    value: 'auto',
-    label: (0, _i18n.__)('Fixed')
-  })), sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' ? (0, _react.createElement)(_components.__experimentalUnitControl, {
-    size: '__unstable-large',
-    onChange: updateBackgroundSize,
-    value: sizeValue
-  }) : null, currentValueForToggle !== 'cover' && (0, _react.createElement)(_components.ToggleControl, {
-    label: (0, _i18n.__)('Repeat'),
-    checked: repeatCheckedValue,
-    onChange: toggleIsRepeated
-  }));
-}
-function BackgroundImagePanel(props) {
-  const [backgroundImage, backgroundSize] = (0, _useSettings.useSettings)('background.backgroundImage', 'background.backgroundSize');
-  if (!backgroundImage || !hasBackgroundSupport(props.name, 'backgroundImage')) {
-    return null;
-  }
-  const showBackgroundSize = !!(backgroundSize && hasBackgroundSupport(props.name, 'backgroundSize'));
-  const defaultControls = (0, _blocks.getBlockSupport)(props.name, [BACKGROUND_SUPPORT_KEY, '__experimentalDefaultControls']);
-  return (0, _react.createElement)(_inspectorControls.default, {
-    group: "background"
-  }, (0, _react.createElement)(BackgroundImagePanelItem, {
-    isShownByDefault: defaultControls?.backgroundImage,
-    ...props
-  }), showBackgroundSize && (0, _react.createElement)(BackgroundSizePanelItem, {
-    isShownByDefault: defaultControls?.backgroundSize,
-    ...props
-  }));
+  return (0, _react.createElement)(_backgroundPanel.default, {
+    as: BackgroundInspectorControl,
+    panelId: clientId,
+    defaultControls: defaultControls,
+    defaultValues: BACKGROUND_DEFAULT_VALUES,
+    settings: updatedSettings,
+    onChange: onChange,
+    value: style
+  });
 }
 var _default = exports.default = {
   useBlockProps,