@wordpress/block-library 9.19.1 → 9.20.0

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

@@ -1 +1 @@
-{"version":3,"names":["__","cover","icon","initBlock","deprecated","edit","metadata","$schema","apiVersion","name","title","category","description","textdomain","attributes","url","type","useFeaturedImage","id","alt","hasParallax","isRepeated","dimRatio","overlayColor","customOverlayColor","isUserOverlayColor","backgroundType","focalPoint","minHeight","minHeightUnit","gradient","customGradient","contentPosition","isDark","allowedBlocks","templateLock","tagName","sizeSlug","usesContext","supports","anchor","align","html","shadow","spacing","padding","margin","blockGap","__experimentalDefaultControls","__experimentalBorder","color","radius","style","width","__experimentalDuotone","heading","text","background","__experimentalSkipSerialization","enableContrastChecker","dimensions","aspectRatio","typography","fontSize","lineHeight","__experimentalFontFamily","__experimentalFontWeight","__experimentalFontStyle","__experimentalTextTransform","__experimentalTextDecoration","__experimentalLetterSpacing","layout","allowJustification","interactivity","clientNavigation","editorStyle","save","transforms","variations","settings","example","innerBlocks","content","init"],"sources":["@wordpress/block-library/src/cover/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cover as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport deprecated from './deprecated';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\nimport variations from './variations';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\tcustomOverlayColor: '#065174',\n\t\t\tdimRatio: 40,\n\t\t\turl: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',\n\t\t\tstyle: {\n\t\t\t\ttypography: {\n\t\t\t\t\tfontSize: 48,\n\t\t\t\t},\n\t\t\t\tcolor: {\n\t\t\t\t\ttext: 'white',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcontent: __( '<strong>Snow Patrol</strong>' ),\n\t\t\t\t\talign: 'center',\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t},\n\ttransforms,\n\tsave,\n\tedit,\n\tdeprecated,\n\tvariations,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__","cover","icon","initBlock","deprecated","edit","metadata","$schema","apiVersion","name","title","category","description","textdomain","attributes","url","type","useFeaturedImage","id","alt","hasParallax","isRepeated","dimRatio","overlayColor","customOverlayColor","isUserOverlayColor","backgroundType","focalPoint","minHeight","minHeightUnit","gradient","customGradient","contentPosition","isDark","allowedBlocks","templateLock","tagName","sizeSlug","usesContext","supports","anchor","align","html","shadow","spacing","padding","margin","blockGap","__experimentalDefaultControls","__experimentalBorder","color","radius","style","width","heading","text","background","__experimentalSkipSerialization","enableContrastChecker","dimensions","aspectRatio","typography","fontSize","lineHeight","__experimentalFontFamily","__experimentalFontWeight","__experimentalFontStyle","__experimentalTextTransform","__experimentalTextDecoration","__experimentalLetterSpacing","layout","allowJustification","interactivity","clientNavigation","filter","duotone","selectors","editorStyle","save","transforms","variations","settings","example","innerBlocks","content","init"],"sources":["@wordpress/block-library/src/cover/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cover as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport deprecated from './deprecated';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\nimport variations from './variations';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\tcustomOverlayColor: '#065174',\n\t\t\tdimRatio: 40,\n\t\t\turl: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',\n\t\t\tstyle: {\n\t\t\t\ttypography: {\n\t\t\t\t\tfontSize: 48,\n\t\t\t\t},\n\t\t\t\tcolor: {\n\t\t\t\t\ttext: 'white',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcontent: __( '<strong>Snow Patrol</strong>' ),\n\t\t\t\t\talign: 'center',\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t},\n\ttransforms,\n\tsave,\n\tedit,\n\tdeprecated,\n\tvariations,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],"mappings":"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","ignoreList":[]}

package/build-module/image/constants.js

@@ -6,4 +6,5 @@ export const LINK_DESTINATION_CUSTOM = 'custom';
 export const NEW_TAB_REL = ['noreferrer', 'noopener'];
 export const ALLOWED_MEDIA_TYPES = ['image'];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
+export const SIZED_LAYOUTS = ['flex', 'grid'];
 //# sourceMappingURL=constants.js.map

package/build-module/image/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["MIN_SIZE","LINK_DESTINATION_NONE","LINK_DESTINATION_MEDIA","LINK_DESTINATION_ATTACHMENT","LINK_DESTINATION_CUSTOM","NEW_TAB_REL","ALLOWED_MEDIA_TYPES","MEDIA_ID_NO_FEATURED_IMAGE_SET"],"sources":["@wordpress/block-library/src/image/constants.js"],"sourcesContent":["export const MIN_SIZE = 20;\nexport const LINK_DESTINATION_NONE = 'none';\nexport const LINK_DESTINATION_MEDIA = 'media';\nexport const LINK_DESTINATION_ATTACHMENT = 'attachment';\nexport const LINK_DESTINATION_CUSTOM = 'custom';\nexport const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];\nexport const ALLOWED_MEDIA_TYPES = [ 'image' ];\nexport const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;\n"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,GAAG,EAAE;AAC1B,OAAO,MAAMC,qBAAqB,GAAG,MAAM;AAC3C,OAAO,MAAMC,sBAAsB,GAAG,OAAO;AAC7C,OAAO,MAAMC,2BAA2B,GAAG,YAAY;AACvD,OAAO,MAAMC,uBAAuB,GAAG,QAAQ;AAC/C,OAAO,MAAMC,WAAW,GAAG,CAAE,YAAY,EAAE,UAAU,CAAE;AACvD,OAAO,MAAMC,mBAAmB,GAAG,CAAE,OAAO,CAAE;AAC9C,OAAO,MAAMC,8BAA8B,GAAG,CAAC","ignoreList":[]}
+{"version":3,"names":["MIN_SIZE","LINK_DESTINATION_NONE","LINK_DESTINATION_MEDIA","LINK_DESTINATION_ATTACHMENT","LINK_DESTINATION_CUSTOM","NEW_TAB_REL","ALLOWED_MEDIA_TYPES","MEDIA_ID_NO_FEATURED_IMAGE_SET","SIZED_LAYOUTS"],"sources":["@wordpress/block-library/src/image/constants.js"],"sourcesContent":["export const MIN_SIZE = 20;\nexport const LINK_DESTINATION_NONE = 'none';\nexport const LINK_DESTINATION_MEDIA = 'media';\nexport const LINK_DESTINATION_ATTACHMENT = 'attachment';\nexport const LINK_DESTINATION_CUSTOM = 'custom';\nexport const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];\nexport const ALLOWED_MEDIA_TYPES = [ 'image' ];\nexport const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;\nexport const SIZED_LAYOUTS = [ 'flex', 'grid' ];\n"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,GAAG,EAAE;AAC1B,OAAO,MAAMC,qBAAqB,GAAG,MAAM;AAC3C,OAAO,MAAMC,sBAAsB,GAAG,OAAO;AAC7C,OAAO,MAAMC,2BAA2B,GAAG,YAAY;AACvD,OAAO,MAAMC,uBAAuB,GAAG,QAAQ;AAC/C,OAAO,MAAMC,WAAW,GAAG,CAAE,YAAY,EAAE,UAAU,CAAE;AACvD,OAAO,MAAMC,mBAAmB,GAAG,CAAE,OAAO,CAAE;AAC9C,OAAO,MAAMC,8BAA8B,GAAG,CAAC;AAC/C,OAAO,MAAMC,aAAa,GAAG,CAAE,MAAM,EAAE,MAAM,CAAE","ignoreList":[]}

package/build-module/image/image.js

@@ -3,10 +3,10 @@
  */
 import { isBlobURL } from '@wordpress/blob';
 import { ExternalLink, ResizableBox, Spinner, TextareaControl, TextControl, ToolbarButton, ToolbarGroup, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUseCustomUnits as useCustomUnits, Placeholder, MenuItem, ToolbarItem, DropdownMenu, Popover } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
+import { useMergeRefs, useResizeObserver, useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { BlockControls, InspectorControls, __experimentalImageURLInputUI as ImageURLInputUI, MediaReplaceFlow, store as blockEditorStore, useSettings, __experimentalImageEditor as ImageEditor, __experimentalUseBorderProps as useBorderProps, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, privateApis as blockEditorPrivateApis, BlockSettingsMenuControls } from '@wordpress/block-editor';
-import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
@@ -26,7 +26,7 @@ import { Caption } from '../utils/caption';
  * Module constants
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
+import { MIN_SIZE, ALLOWED_MEDIA_TYPES, SIZED_LAYOUTS } from './constants';
 import { evalAspectRatio } from './utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
@@ -210,11 +210,26 @@ export default 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 = useRef();
+  const [imageElement, setImageElement] = useState();
+  const [resizeDelta, setResizeDelta] = useState(null);
+  const [pixelSize, setPixelSize] = useState({});
+  const [offsetTop, setOffsetTop] = useState(0);
+  const setResizeObserved = 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 = useCallback(() => {
+    var _imageElement$offsetT;
+    setOffsetTop((_imageElement$offsetT = imageElement?.offsetTop) !== null && _imageElement$offsetT !== void 0 ? _imageElement$offsetT : 0);
+  }, [imageElement]);
+  const setRefs = useMergeRefs([setImageElement, setResizeObserved]);
   const {
     allowResize = true
   } = context;
@@ -292,7 +307,7 @@ export default function Image({
     .catch(() => {});
   }, [id, url, isSingleSelected, externalBlob]);
 
-  // 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.
@@ -301,16 +316,10 @@ export default function Image({
     naturalHeight
   } = 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);
 
@@ -444,7 +453,21 @@ export default function Image({
   !!lightbox && lightbox?.enabled !== lightboxSetting?.enabled || lightboxSetting?.allowEditing;
   const lightboxChecked = !!lightbox?.enabled || !lightbox && !!lightboxSetting?.enabled;
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-  const dimensionsControl = /*#__PURE__*/_jsx(DimensionsTool, {
+  const dimensionsControl = isResizable && (SIZED_LAYOUTS.includes(parentLayoutType) ? /*#__PURE__*/_jsx(DimensionsTool, {
+    value: {
+      aspectRatio
+    },
+    onChange: ({
+      aspectRatio: newAspectRatio
+    }) => {
+      setAttributes({
+        aspectRatio: newAspectRatio,
+        scale: 'cover'
+      });
+    },
+    defaultAspectRatio: "auto",
+    tools: ['aspectRatio']
+  }) : /*#__PURE__*/_jsx(DimensionsTool, {
     value: {
       width,
       height,
@@ -475,22 +498,7 @@ export default function Image({
     defaultAspectRatio: "auto",
     scaleOptions: scaleOptions,
     unitsOptions: dimensionsUnitsOptions
-  });
-  const aspectRatioControl = /*#__PURE__*/_jsx(DimensionsTool, {
-    value: {
-      aspectRatio
-    },
-    onChange: ({
-      aspectRatio: newAspectRatio
-    }) => {
-      setAttributes({
-        aspectRatio: newAspectRatio,
-        scale: 'cover'
-      });
-    },
-    defaultAspectRatio: "auto",
-    tools: ['aspectRatio']
-  });
+  }));
   const resetAll = () => {
     setAttributes({
       alt: undefined,
@@ -506,7 +514,7 @@ export default function Image({
       label: __('Settings'),
       resetAll: resetAll,
       dropdownMenuProps: dropdownMenuProps,
-      children: isResizable && (parentLayoutType === 'grid' ? aspectRatioControl : dimensionsControl)
+      children: dimensionsControl
     })
   });
   const arePatternOverridesEnabled = metadata?.bindings?.__default?.source === 'core/pattern-overrides';
@@ -658,7 +666,7 @@ export default function Image({
             }),
             __nextHasNoMarginBottom: true
           })
-        }), isResizable && (parentLayoutType === 'grid' ? aspectRatioControl : dimensionsControl), !!imageSizeOptions.length && /*#__PURE__*/_jsx(ResolutionTool, {
+        }), dimensionsControl, !!imageSizeOptions.length && /*#__PURE__*/_jsx(ResolutionTool, {
           value: sizeSlug,
           onChange: updateImage,
           options: imageSizeOptions
@@ -723,11 +731,19 @@ export default 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
@@ -741,8 +757,7 @@ export default function Image({
       children: /*#__PURE__*/_jsx(ImageEditor, {
         id: id,
         url: url,
-        width: numericWidth,
-        height: numericHeight,
+        ...pixelSize,
         naturalHeight: naturalHeight,
         naturalWidth: naturalWidth,
         onSaveImage: imageAttributes => setAttributes(imageAttributes),
@@ -752,25 +767,18 @@ export default function Image({
         borderProps: isRounded ? undefined : borderProps
       })
     });
-  } else if (!isResizable || parentLayoutType === 'grid') {
-    img = /*#__PURE__*/_jsx("div", {
-      style: {
-        width,
-        height,
-        aspectRatio
-      },
-      children: /*#__PURE__*/_jsx(ImageWrapper, {
-        href: href,
-        children: img
-      })
-    });
   } else {
+    img = /*#__PURE__*/_jsx(ImageWrapper, {
+      href: href,
+      children: img
+    });
+  }
+  let resizableBox;
+  if (isResizable && isSingleSelected && !isEditingImage && !SIZED_LAYOUTS.includes(parentLayoutType)) {
     const numericRatio = aspectRatio && 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 ? MIN_SIZE : MIN_SIZE * ratio;
     const minHeight = naturalHeight < naturalWidth ? MIN_SIZE : MIN_SIZE / ratio;
 
@@ -813,17 +821,16 @@ export default function Image({
       }
     }
     /* eslint-enable no-lonely-if */
-    img = /*#__PURE__*/_jsx(ResizableBox, {
+    resizableBox = /*#__PURE__*/_jsx(ResizableBox, {
+      ref: effectResizeableBoxPlacement,
       style: {
-        display: 'block',
-        objectFit: scale,
-        aspectRatio: !width && !height && aspectRatio ? aspectRatio : undefined
-      },
-      size: {
-        width: currentWidth !== null && currentWidth !== void 0 ? currentWidth : 'auto',
-        height: currentHeight !== null && currentHeight !== void 0 ? currentHeight : 'auto'
+        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`
       },
-      showHandle: isSingleSelected,
+      size: pixelSize,
       minWidth: minWidth,
       maxWidth: maxResizeWidth,
       minHeight: minHeight,
@@ -835,9 +842,19 @@ export default 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 &&
@@ -861,11 +878,7 @@ export default function Image({
           aspectRatio: ratio === naturalRatio ? undefined : String(ratio)
         });
       },
-      resizeRatio: align === 'center' ? 2 : 1,
-      children: /*#__PURE__*/_jsx(ImageWrapper, {
-        href: href,
-        children: img
-      })
+      resizeRatio: align === 'center' ? 2 : 1
     });
   }
   if (!url && !temporaryURL) {
@@ -892,7 +905,7 @@ export default function Image({
     })
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [mediaReplaceFlow, controls, featuredImageControl, img, /*#__PURE__*/_jsx(Caption, {
+    children: [mediaReplaceFlow, controls, featuredImageControl, img, resizableBox, /*#__PURE__*/_jsx(Caption, {
       attributes: attributes,
       setAttributes: setAttributes,
       isSelected: isSingleSelected,