@wordpress/block-library 9.19.2 → 9.21.0

package/build/image/image.js

@@ -217,18 +217,29 @@ function Image({
     lightbox,
     metadata
   } = attributes;
-
-  // The only supported unit is px, so we can parseInt to strip the px here.
-  const numericWidth = width ? parseInt(width, 10) : undefined;
-  const numericHeight = height ? parseInt(height, 10) : undefined;
-  const imageRef = (0, _element.useRef)();
+  const [imageElement, setImageElement] = (0, _element.useState)();
+  const [resizeDelta, setResizeDelta] = (0, _element.useState)(null);
+  const [pixelSize, setPixelSize] = (0, _element.useState)({});
+  const [offsetTop, setOffsetTop] = (0, _element.useState)(0);
+  const setResizeObserved = (0, _compose.useResizeObserver)(([entry]) => {
+    if (!resizeDelta) {
+      const [box] = entry.borderBoxSize;
+      setPixelSize({
+        width: box.inlineSize,
+        height: box.blockSize
+      });
+    }
+    // This is usually 0 unless the image height is less than the line-height.
+    setOffsetTop(entry.target.offsetTop);
+  });
+  const effectResizeableBoxPlacement = (0, _element.useCallback)(() => {
+    var _imageElement$offsetT;
+    setOffsetTop((_imageElement$offsetT = imageElement?.offsetTop) !== null && _imageElement$offsetT !== void 0 ? _imageElement$offsetT : 0);
+  }, [imageElement]);
+  const setRefs = (0, _compose.useMergeRefs)([setImageElement, setResizeObserved]);
   const {
     allowResize = true
   } = context;
-  const {
-    getBlock,
-    getSettings
-  } = (0, _data.useSelect)(_blockEditor.store);
   const image = (0, _data.useSelect)(select => id && isSingleSelected ? select(_coreData.store).getMedia(id, {
     context: 'view'
   }) : null, [id, isSingleSelected]);
@@ -240,7 +251,8 @@ function Image({
   } = (0, _data.useSelect)(select => {
     const {
       getBlockRootClientId,
-      canInsertBlockType
+      canInsertBlockType,
+      getSettings
     } = select(_blockEditor.store);
     const rootClientId = getBlockRootClientId(clientId);
     const settings = getSettings();
@@ -251,6 +263,10 @@ function Image({
       canInsertCover: canInsertBlockType('core/cover', rootClientId)
     };
   }, [clientId]);
+  const {
+    getBlock,
+    getSettings
+  } = (0, _data.useSelect)(_blockEditor.store);
   const {
     replaceBlocks,
     toggleSelection
@@ -259,6 +275,9 @@ function Image({
     createErrorNotice,
     createSuccessNotice
   } = (0, _data.useDispatch)(_notices.store);
+  const {
+    editEntityRecord
+  } = (0, _data.useDispatch)(_coreData.store);
   const isLargeViewport = (0, _compose.useViewportMatch)('medium');
   const isWideAligned = ['wide', 'full'].includes(align);
   const [{
@@ -297,9 +316,9 @@ function Image({
     .fetch(url.includes('?') ? url : url + '?').then(response => response.blob()).then(blob => setExternalBlob(blob))
     // Do nothing, cannot upload.
     .catch(() => {});
-  }, [id, url, isSingleSelected, externalBlob]);
+  }, [id, url, isSingleSelected, externalBlob, getSettings]);
 
-  // Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
+  // Get naturalWidth and naturalHeight from image, and fall back to loaded natural
   // width and height. This resolves an issue in Safari where the loaded natural
   // width and height is otherwise lost when switching between alignments.
   // See: https://github.com/WordPress/gutenberg/pull/37210.
@@ -308,16 +327,10 @@ function Image({
     naturalHeight
   } = (0, _element.useMemo)(() => {
     return {
-      naturalWidth: imageRef.current?.naturalWidth || loadedNaturalWidth || undefined,
-      naturalHeight: imageRef.current?.naturalHeight || loadedNaturalHeight || undefined
+      naturalWidth: imageElement?.naturalWidth || loadedNaturalWidth || undefined,
+      naturalHeight: imageElement?.naturalHeight || loadedNaturalHeight || undefined
     };
-  }, [loadedNaturalWidth, loadedNaturalHeight, imageRef.current?.complete]);
-  function onResizeStart() {
-    toggleSelection(false);
-  }
-  function onResizeStop() {
-    toggleSelection(true);
-  }
+  }, [loadedNaturalWidth, loadedNaturalHeight, imageElement?.complete]);
   function onImageError() {
     setHasImageErrored(true);
 
@@ -451,7 +464,21 @@ function Image({
   !!lightbox && lightbox?.enabled !== lightboxSetting?.enabled || lightboxSetting?.allowEditing;
   const lightboxChecked = !!lightbox?.enabled || !lightbox && !!lightboxSetting?.enabled;
   const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
-  const dimensionsControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionsTool, {
+  const dimensionsControl = isResizable && (_constants.SIZED_LAYOUTS.includes(parentLayoutType) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionsTool, {
+    value: {
+      aspectRatio
+    },
+    onChange: ({
+      aspectRatio: newAspectRatio
+    }) => {
+      setAttributes({
+        aspectRatio: newAspectRatio,
+        scale: 'cover'
+      });
+    },
+    defaultAspectRatio: "auto",
+    tools: ['aspectRatio']
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionsTool, {
     value: {
       width,
       height,
@@ -482,22 +509,7 @@ function Image({
     defaultAspectRatio: "auto",
     scaleOptions: scaleOptions,
     unitsOptions: dimensionsUnitsOptions
-  });
-  const aspectRatioControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionsTool, {
-    value: {
-      aspectRatio
-    },
-    onChange: ({
-      aspectRatio: newAspectRatio
-    }) => {
-      setAttributes({
-        aspectRatio: newAspectRatio,
-        scale: 'cover'
-      });
-    },
-    defaultAspectRatio: "auto",
-    tools: ['aspectRatio']
-  });
+  }));
   const resetAll = () => {
     setAttributes({
       alt: undefined,
@@ -513,7 +525,7 @@ function Image({
       label: (0, _i18n.__)('Settings'),
       resetAll: resetAll,
       dropdownMenuProps: dropdownMenuProps,
-      children: isResizable && (parentLayoutType === 'grid' ? aspectRatioControl : dimensionsControl)
+      children: dimensionsControl
     })
   });
   const arePatternOverridesEnabled = metadata?.bindings?.__default?.source === 'core/pattern-overrides';
@@ -665,7 +677,7 @@ function Image({
             }),
             __nextHasNoMarginBottom: true
           })
-        }), isResizable && (parentLayoutType === 'grid' ? aspectRatioControl : dimensionsControl), !!imageSizeOptions.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResolutionTool, {
+        }), dimensionsControl, !!imageSizeOptions.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(ResolutionTool, {
           value: sizeSlug,
           onChange: updateImage,
           options: imageSizeOptions
@@ -710,7 +722,6 @@ function Image({
     queryId
   } = context;
   const isDescendentOfQueryLoop = Number.isFinite(queryId);
-  const [, setFeaturedImage] = (0, _coreData.useEntityProp)('postType', postType, 'featured_media', postId);
   let img = temporaryURL && hasImageErrored ?
   /*#__PURE__*/
   // Show a placeholder during upload when the blob URL can't be loaded. This can
@@ -730,11 +741,19 @@ function Image({
       alt: defaultedAlt,
       onError: onImageError,
       onLoad: onImageLoad,
-      ref: imageRef,
+      ref: setRefs,
       className: borderProps.className,
+      width: naturalWidth,
+      height: naturalHeight,
       style: {
-        width: width && height || aspectRatio ? '100%' : undefined,
-        height: width && height || aspectRatio ? '100%' : undefined,
+        aspectRatio,
+        ...(resizeDelta ? {
+          width: pixelSize.width + resizeDelta.width,
+          height: pixelSize.height + resizeDelta.height
+        } : {
+          width,
+          height
+        }),
         objectFit: scale,
         ...borderProps.style,
         ...shadowProps.style
@@ -748,8 +767,7 @@ function Image({
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalImageEditor, {
         id: id,
         url: url,
-        width: numericWidth,
-        height: numericHeight,
+        ...pixelSize,
         naturalHeight: naturalHeight,
         naturalWidth: naturalWidth,
         onSaveImage: imageAttributes => setAttributes(imageAttributes),
@@ -759,25 +777,18 @@ function Image({
         borderProps: isRounded ? undefined : borderProps
       })
     });
-  } else if (!isResizable || parentLayoutType === 'grid') {
-    img = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        width,
-        height,
-        aspectRatio
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageWrapper, {
-        href: href,
-        children: img
-      })
-    });
   } else {
+    img = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageWrapper, {
+      href: href,
+      children: img
+    });
+  }
+  let resizableBox;
+  if (isResizable && isSingleSelected && !isEditingImage && !_constants.SIZED_LAYOUTS.includes(parentLayoutType)) {
     const numericRatio = aspectRatio && (0, _utils.evalAspectRatio)(aspectRatio);
-    const customRatio = numericWidth / numericHeight;
+    const customRatio = pixelSize.width / pixelSize.height;
     const naturalRatio = naturalWidth / naturalHeight;
     const ratio = numericRatio || customRatio || naturalRatio || 1;
-    const currentWidth = !numericWidth && numericHeight ? numericHeight * ratio : numericWidth;
-    const currentHeight = !numericHeight && numericWidth ? numericWidth / ratio : numericHeight;
     const minWidth = naturalWidth < naturalHeight ? _constants.MIN_SIZE : _constants.MIN_SIZE * ratio;
     const minHeight = naturalHeight < naturalWidth ? _constants.MIN_SIZE : _constants.MIN_SIZE / ratio;
 
@@ -820,17 +831,16 @@ function Image({
       }
     }
     /* eslint-enable no-lonely-if */
-    img = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
+    resizableBox = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
+      ref: effectResizeableBoxPlacement,
       style: {
-        display: 'block',
-        objectFit: scale,
-        aspectRatio: !width && !height && aspectRatio ? aspectRatio : undefined
+        position: 'absolute',
+        // To match the vertical-align: bottom of the img (from style.scss)
+        // syncs the top with the img. This matters when the img height is
+        // less than the line-height.
+        inset: `${offsetTop}px 0 0 0`
       },
-      size: {
-        width: currentWidth !== null && currentWidth !== void 0 ? currentWidth : 'auto',
-        height: currentHeight !== null && currentHeight !== void 0 ? currentHeight : 'auto'
-      },
-      showHandle: isSingleSelected,
+      size: pixelSize,
       minWidth: minWidth,
       maxWidth: maxResizeWidth,
       minHeight: minHeight,
@@ -842,9 +852,19 @@ function Image({
         bottom: true,
         left: showLeftHandle
       },
-      onResizeStart: onResizeStart,
-      onResizeStop: (event, direction, elt) => {
-        onResizeStop();
+      onResizeStart: () => {
+        toggleSelection(false);
+      },
+      onResize: (event, direction, elt, delta) => {
+        setResizeDelta(delta);
+      },
+      onResizeStop: (event, direction, elt, delta) => {
+        toggleSelection(true);
+        setResizeDelta(null);
+        setPixelSize(current => ({
+          width: current.width + delta.width,
+          height: current.height + delta.height
+        }));
 
         // Clear hardcoded width if the resized width is close to the max-content width.
         if (maxContentWidth &&
@@ -868,11 +888,7 @@ function Image({
           aspectRatio: ratio === naturalRatio ? undefined : String(ratio)
         });
       },
-      resizeRatio: align === 'center' ? 2 : 1,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageWrapper, {
-        href: href,
-        children: img
-      })
+      resizeRatio: align === 'center' ? 2 : 1
     });
   }
   if (!url && !temporaryURL) {
@@ -885,7 +901,9 @@ function Image({
    * Set the post's featured image with the current image.
    */
   const setPostFeatureImage = () => {
-    setFeaturedImage(id);
+    editEntityRecord('postType', postType, postId, {
+      featured_media: id
+    });
     createSuccessNotice((0, _i18n.__)('Post featured image updated.'), {
       type: 'snackbar'
     });
@@ -899,7 +917,7 @@ function Image({
     })
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [mediaReplaceFlow, controls, featuredImageControl, img, /*#__PURE__*/(0, _jsxRuntime.jsx)(_caption.Caption, {
+    children: [mediaReplaceFlow, controls, featuredImageControl, img, resizableBox, /*#__PURE__*/(0, _jsxRuntime.jsx)(_caption.Caption, {
       attributes: attributes,
       setAttributes: setAttributes,
       isSelected: isSingleSelected,