@wordpress/block-library 9.19.0 → 9.20.0

package/build/cover/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_icons","_initBlock","_interopRequireDefault","_deprecated","_edit","_save","_transforms","_variations","metadata","exports","$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","settings","icon","example","innerBlocks","content","__","transforms","save","edit","deprecated","variations","init","initBlock"],"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":["_i18n","require","_icons","_initBlock","_interopRequireDefault","_deprecated","_edit","_save","_transforms","_variations","metadata","exports","$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","settings","icon","example","innerBlocks","content","__","transforms","save","edit","deprecated","variations","init","initBlock"],"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/image/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NEW_TAB_REL = exports.MIN_SIZE = exports.MEDIA_ID_NO_FEATURED_IMAGE_SET = exports.LINK_DESTINATION_NONE = exports.LINK_DESTINATION_MEDIA = exports.LINK_DESTINATION_CUSTOM = exports.LINK_DESTINATION_ATTACHMENT = exports.ALLOWED_MEDIA_TYPES = void 0;
+exports.SIZED_LAYOUTS = exports.NEW_TAB_REL = exports.MIN_SIZE = exports.MEDIA_ID_NO_FEATURED_IMAGE_SET = exports.LINK_DESTINATION_NONE = exports.LINK_DESTINATION_MEDIA = exports.LINK_DESTINATION_CUSTOM = exports.LINK_DESTINATION_ATTACHMENT = exports.ALLOWED_MEDIA_TYPES = void 0;
 const MIN_SIZE = exports.MIN_SIZE = 20;
 const LINK_DESTINATION_NONE = exports.LINK_DESTINATION_NONE = 'none';
 const LINK_DESTINATION_MEDIA = exports.LINK_DESTINATION_MEDIA = 'media';
@@ -12,4 +12,5 @@ const LINK_DESTINATION_CUSTOM = exports.LINK_DESTINATION_CUSTOM = 'custom';
 const NEW_TAB_REL = exports.NEW_TAB_REL = ['noreferrer', 'noopener'];
 const ALLOWED_MEDIA_TYPES = exports.ALLOWED_MEDIA_TYPES = ['image'];
 const MEDIA_ID_NO_FEATURED_IMAGE_SET = exports.MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
+const SIZED_LAYOUTS = exports.SIZED_LAYOUTS = ['flex', 'grid'];
 //# sourceMappingURL=constants.js.map

package/build/image/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["MIN_SIZE","exports","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":";;;;;;AAAO,MAAMA,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,EAAE;AACnB,MAAME,qBAAqB,GAAAD,OAAA,CAAAC,qBAAA,GAAG,MAAM;AACpC,MAAMC,sBAAsB,GAAAF,OAAA,CAAAE,sBAAA,GAAG,OAAO;AACtC,MAAMC,2BAA2B,GAAAH,OAAA,CAAAG,2BAAA,GAAG,YAAY;AAChD,MAAMC,uBAAuB,GAAAJ,OAAA,CAAAI,uBAAA,GAAG,QAAQ;AACxC,MAAMC,WAAW,GAAAL,OAAA,CAAAK,WAAA,GAAG,CAAE,YAAY,EAAE,UAAU,CAAE;AAChD,MAAMC,mBAAmB,GAAAN,OAAA,CAAAM,mBAAA,GAAG,CAAE,OAAO,CAAE;AACvC,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAG,CAAC","ignoreList":[]}
+{"version":3,"names":["MIN_SIZE","exports","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":";;;;;;AAAO,MAAMA,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,EAAE;AACnB,MAAME,qBAAqB,GAAAD,OAAA,CAAAC,qBAAA,GAAG,MAAM;AACpC,MAAMC,sBAAsB,GAAAF,OAAA,CAAAE,sBAAA,GAAG,OAAO;AACtC,MAAMC,2BAA2B,GAAAH,OAAA,CAAAG,2BAAA,GAAG,YAAY;AAChD,MAAMC,uBAAuB,GAAAJ,OAAA,CAAAI,uBAAA,GAAG,QAAQ;AACxC,MAAMC,WAAW,GAAAL,OAAA,CAAAK,WAAA,GAAG,CAAE,YAAY,EAAE,UAAU,CAAE;AAChD,MAAMC,mBAAmB,GAAAN,OAAA,CAAAM,mBAAA,GAAG,CAAE,OAAO,CAAE;AACvC,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAG,CAAC;AACxC,MAAMC,aAAa,GAAAR,OAAA,CAAAQ,aAAA,GAAG,CAAE,MAAM,EAAE,MAAM,CAAE","ignoreList":[]}

package/build/image/image.js

@@ -217,11 +217,26 @@ 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;
@@ -299,7 +314,7 @@ 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.
@@ -308,16 +323,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 +460,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 +505,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 +521,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 +673,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
@@ -730,11 +738,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 +764,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 +774,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 +828,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
-      },
-      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,
@@ -842,9 +849,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 +885,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) {
@@ -899,7 +912,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,