@wordpress/block-editor 15.9.0 → 15.9.1-next.6deb34194.0

package/build-module/components/image-editor/cropper.js

@@ -1,9 +1,8 @@
 // packages/block-editor/src/components/image-editor/cropper.js
-import Cropper from "react-easy-crop";
 import clsx from "clsx";
 import { Spinner } from "@wordpress/components";
 import { useResizeObserver } from "@wordpress/compose";
-import { MIN_ZOOM, MAX_ZOOM } from "./constants";
+import { ImageCropper as ImageCropperComponent } from "@wordpress/image-cropper";
 import { useImageEditingContext } from "./context";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ImageCropper({
@@ -14,17 +13,7 @@ function ImageCropper({
   naturalWidth,
   borderProps
 }) {
-  const {
-    isInProgress,
-    editedUrl,
-    position,
-    zoom,
-    aspect,
-    setPosition,
-    setCrop,
-    setZoom,
-    rotation
-  } = useImageEditingContext();
+  const { isInProgress, editedUrl, rotation } = useImageEditingContext();
   const [contentResizeListener, { width: clientWidth }] = useResizeObserver();
   let editedHeight = height || clientWidth * naturalHeight / naturalWidth;
   if (rotation % 180 === 90) {
@@ -46,27 +35,7 @@ function ImageCropper({
         height: editedHeight
       },
       children: [
-        /* @__PURE__ */ jsx(
-          Cropper,
-          {
-            image: editedUrl || url,
-            disabled: isInProgress,
-            minZoom: MIN_ZOOM / 100,
-            maxZoom: MAX_ZOOM / 100,
-            crop: position,
-            zoom: zoom / 100,
-            aspect,
-            onCropChange: (pos) => {
-              setPosition(pos);
-            },
-            onCropComplete: (newCropPercent) => {
-              setCrop(newCropPercent);
-            },
-            onZoomChange: (newZoom) => {
-              setZoom(newZoom * 100);
-            }
-          }
-        ),
+        /* @__PURE__ */ jsx(ImageCropperComponent, { src: editedUrl || url }),
         isInProgress && /* @__PURE__ */ jsx(Spinner, {})
       ]
     }

package/build-module/components/image-editor/cropper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image-editor/cropper.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport Cropper from 'react-easy-crop';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { MIN_ZOOM, MAX_ZOOM } from './constants';\n\nimport { useImageEditingContext } from './context';\n\nexport default function ImageCropper( {\n\turl,\n\twidth,\n\theight,\n\tnaturalHeight,\n\tnaturalWidth,\n\tborderProps,\n} ) {\n\tconst {\n\t\tisInProgress,\n\t\teditedUrl,\n\t\tposition,\n\t\tzoom,\n\t\taspect,\n\t\tsetPosition,\n\t\tsetCrop,\n\t\tsetZoom,\n\t\trotation,\n\t} = useImageEditingContext();\n\tconst [ contentResizeListener, { width: clientWidth } ] =\n\t\tuseResizeObserver();\n\n\tlet editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;\n\n\tif ( rotation % 180 === 90 ) {\n\t\teditedHeight = ( clientWidth * naturalWidth ) / naturalHeight;\n\t}\n\n\tconst area = (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'wp-block-image__crop-area',\n\t\t\t\tborderProps?.className,\n\t\t\t\t{\n\t\t\t\t\t'is-applying': isInProgress,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\t...borderProps?.style,\n\t\t\t\twidth: width || clientWidth,\n\t\t\t\theight: editedHeight,\n\t\t\t} }\n\t\t>\n\t\t\t<Cropper\n\t\t\t\timage={ editedUrl || url }\n\t\t\t\tdisabled={ isInProgress }\n\t\t\t\tminZoom={ MIN_ZOOM / 100 }\n\t\t\t\tmaxZoom={ MAX_ZOOM / 100 }\n\t\t\t\tcrop={ position }\n\t\t\t\tzoom={ zoom / 100 }\n\t\t\t\taspect={ aspect }\n\t\t\t\tonCropChange={ ( pos ) => {\n\t\t\t\t\tsetPosition( pos );\n\t\t\t\t} }\n\t\t\t\tonCropComplete={ ( newCropPercent ) => {\n\t\t\t\t\tsetCrop( newCropPercent );\n\t\t\t\t} }\n\t\t\t\tonZoomChange={ ( newZoom ) => {\n\t\t\t\t\tsetZoom( newZoom * 100 );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isInProgress && <Spinner /> }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ contentResizeListener }\n\t\t\t{ area }\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,aAAa;AACpB,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAKlC,SAAS,UAAU,gBAAgB;AAEnC,SAAS,8BAA8B;AA+BrC,SAqCA,UAvBC,KAdD;AA7Ba,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,uBAAuB;AAC3B,QAAM,CAAE,uBAAuB,EAAE,OAAO,YAAY,CAAE,IACrD,kBAAkB;AAEnB,MAAI,eAAe,UAAY,cAAc,gBAAkB;AAE/D,MAAK,WAAW,QAAQ,IAAK;AAC5B,mBAAiB,cAAc,eAAiB;AAAA,EACjD;AAEA,QAAM,OACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA,aAAa;AAAA,QACb;AAAA,UACC,eAAe;AAAA,QAChB;AAAA,MACD;AAAA,MACA,OAAQ;AAAA,QACP,GAAG,aAAa;AAAA,QAChB,OAAO,SAAS;AAAA,QAChB,QAAQ;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,aAAa;AAAA,YACrB,UAAW;AAAA,YACX,SAAU,WAAW;AAAA,YACrB,SAAU,WAAW;AAAA,YACrB,MAAO;AAAA,YACP,MAAO,OAAO;AAAA,YACd;AAAA,YACA,cAAe,CAAE,QAAS;AACzB,0BAAa,GAAI;AAAA,YAClB;AAAA,YACA,gBAAiB,CAAE,mBAAoB;AACtC,sBAAS,cAAe;AAAA,YACzB;AAAA,YACA,cAAe,CAAE,YAAa;AAC7B,sBAAS,UAAU,GAAI;AAAA,YACxB;AAAA;AAAA,QACD;AAAA,QACE,gBAAgB,oBAAC,WAAQ;AAAA;AAAA;AAAA,EAC5B;AAGD,SACC,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { ImageCropper as ImageCropperComponent } from '@wordpress/image-cropper';\n\n/**\n * Internal dependencies\n */\nimport { useImageEditingContext } from './context';\n\nexport default function ImageCropper( {\n\turl,\n\twidth,\n\theight,\n\tnaturalHeight,\n\tnaturalWidth,\n\tborderProps,\n} ) {\n\tconst { isInProgress, editedUrl, rotation } = useImageEditingContext();\n\tconst [ contentResizeListener, { width: clientWidth } ] =\n\t\tuseResizeObserver();\n\n\tlet editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;\n\n\tif ( rotation % 180 === 90 ) {\n\t\teditedHeight = ( clientWidth * naturalWidth ) / naturalHeight;\n\t}\n\n\tconst area = (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'wp-block-image__crop-area',\n\t\t\t\tborderProps?.className,\n\t\t\t\t{\n\t\t\t\t\t'is-applying': isInProgress,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\t...borderProps?.style,\n\t\t\t\twidth: width || clientWidth,\n\t\t\t\theight: editedHeight,\n\t\t\t} }\n\t\t>\n\t\t\t<ImageCropperComponent src={ editedUrl || url } />\n\t\t\t{ isInProgress && <Spinner /> }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ contentResizeListener }\n\t\t\t{ area }\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,gBAAgB,6BAA6B;AAKtD,SAAS,8BAA8B;AAqBrC,SAoBA,UANC,KAdD;AAnBa,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,EAAE,cAAc,WAAW,SAAS,IAAI,uBAAuB;AACrE,QAAM,CAAE,uBAAuB,EAAE,OAAO,YAAY,CAAE,IACrD,kBAAkB;AAEnB,MAAI,eAAe,UAAY,cAAc,gBAAkB;AAE/D,MAAK,WAAW,QAAQ,IAAK;AAC5B,mBAAiB,cAAc,eAAiB;AAAA,EACjD;AAEA,QAAM,OACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA,aAAa;AAAA,QACb;AAAA,UACC,eAAe;AAAA,QAChB;AAAA,MACD;AAAA,MACA,OAAQ;AAAA,QACP,GAAG,aAAa;AAAA,QAChB,OAAO,SAAS;AAAA,QAChB,QAAQ;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,yBAAsB,KAAM,aAAa,KAAM;AAAA,QAC9C,gBAAgB,oBAAC,WAAQ;AAAA;AAAA;AAAA,EAC5B;AAGD,SACC,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAEF;",
   "names": []
 }

package/build-module/components/image-editor/index.js

@@ -1,5 +1,6 @@
 // packages/block-editor/src/components/image-editor/index.js
 import { ToolbarGroup, ToolbarItem } from "@wordpress/components";
+import { ImageCropperProvider } from "@wordpress/image-cropper";
 import AspectRatioDropdown from "./aspect-ratio-dropdown";
 import BlockControls from "../block-controls";
 import ImageEditingProvider from "./context";
@@ -19,7 +20,7 @@ function ImageEditor({
   onFinishEditing,
   borderProps
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ImageCropperProvider, { children: /* @__PURE__ */ jsxs(
     ImageEditingProvider,
     {
       id,
@@ -43,14 +44,19 @@ function ImageEditor({
         /* @__PURE__ */ jsxs(BlockControls, { children: [
           /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
             /* @__PURE__ */ jsx(ZoomDropdown, {}),
-            /* @__PURE__ */ jsx(ToolbarItem, { children: (toggleProps) => /* @__PURE__ */ jsx(AspectRatioDropdown, { toggleProps }) }),
+            /* @__PURE__ */ jsx(ToolbarItem, { children: (toggleProps) => /* @__PURE__ */ jsx(
+              AspectRatioDropdown,
+              {
+                toggleProps
+              }
+            ) }),
             /* @__PURE__ */ jsx(RotationButton, {})
           ] }),
           /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(FormControls, {}) })
         ] })
       ]
     }
-  );
+  ) });
 }
 export {
   ImageEditor as default

package/build-module/components/image-editor/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image-editor/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport AspectRatioDropdown from './aspect-ratio-dropdown';\nimport BlockControls from '../block-controls';\nimport ImageEditingProvider from './context';\nimport Cropper from './cropper';\nimport ZoomDropdown from './zoom-dropdown';\nimport RotationButton from './rotation-button';\nimport FormControls from './form-controls';\n\nexport default function ImageEditor( {\n\tid,\n\turl,\n\twidth,\n\theight,\n\tnaturalHeight,\n\tnaturalWidth,\n\tonSaveImage,\n\tonFinishEditing,\n\tborderProps,\n} ) {\n\treturn (\n\t\t<ImageEditingProvider\n\t\t\tid={ id }\n\t\t\turl={ url }\n\t\t\tnaturalWidth={ naturalWidth }\n\t\t\tnaturalHeight={ naturalHeight }\n\t\t\tonSaveImage={ onSaveImage }\n\t\t\tonFinishEditing={ onFinishEditing }\n\t\t>\n\t\t\t<Cropper\n\t\t\t\tborderProps={ borderProps }\n\t\t\t\turl={ url }\n\t\t\t\twidth={ width }\n\t\t\t\theight={ height }\n\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t/>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ZoomDropdown />\n\t\t\t\t\t<ToolbarItem>\n\t\t\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t\t\t<AspectRatioDropdown toggleProps={ toggleProps } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToolbarItem>\n\t\t\t\t\t<RotationButton />\n\t\t\t\t</ToolbarGroup>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<FormControls />\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t</ImageEditingProvider>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,cAAc,mBAAmB;AAK1C,OAAO,yBAAyB;AAChC,OAAO,mBAAmB;AAC1B,OAAO,0BAA0B;AACjC,OAAO,aAAa;AACpB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,kBAAkB;AAsBtB,cASC,YATD;AApBY,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,iBACA;AAAA,+BAAC,gBACA;AAAA,gCAAC,gBAAa;AAAA,YACd,oBAAC,eACE,WAAE,gBACH,oBAAC,uBAAoB,aAA4B,GAEnD;AAAA,YACA,oBAAC,kBAAe;AAAA,aACjB;AAAA,UACA,oBAAC,gBACA,8BAAC,gBAAa,GACf;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarItem } from '@wordpress/components';\nimport { ImageCropperProvider } from '@wordpress/image-cropper';\n\n/**\n * Internal dependencies\n */\nimport AspectRatioDropdown from './aspect-ratio-dropdown';\nimport BlockControls from '../block-controls';\nimport ImageEditingProvider from './context';\nimport Cropper from './cropper';\nimport ZoomDropdown from './zoom-dropdown';\nimport RotationButton from './rotation-button';\nimport FormControls from './form-controls';\n\nexport default function ImageEditor( {\n\tid,\n\turl,\n\twidth,\n\theight,\n\tnaturalHeight,\n\tnaturalWidth,\n\tonSaveImage,\n\tonFinishEditing,\n\tborderProps,\n} ) {\n\treturn (\n\t\t<ImageCropperProvider>\n\t\t\t<ImageEditingProvider\n\t\t\t\tid={ id }\n\t\t\t\turl={ url }\n\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\tonSaveImage={ onSaveImage }\n\t\t\t\tonFinishEditing={ onFinishEditing }\n\t\t\t>\n\t\t\t\t<Cropper\n\t\t\t\t\tborderProps={ borderProps }\n\t\t\t\t\turl={ url }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height }\n\t\t\t\t\tnaturalHeight={ naturalHeight }\n\t\t\t\t\tnaturalWidth={ naturalWidth }\n\t\t\t\t/>\n\t\t\t\t<BlockControls>\n\t\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t\t<ZoomDropdown />\n\t\t\t\t\t\t<ToolbarItem>\n\t\t\t\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t\t\t\t<AspectRatioDropdown\n\t\t\t\t\t\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</ToolbarItem>\n\t\t\t\t\t\t<RotationButton />\n\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t\t<FormControls />\n\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t</BlockControls>\n\t\t\t</ImageEditingProvider>\n\t\t</ImageCropperProvider>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,cAAc,mBAAmB;AAC1C,SAAS,4BAA4B;AAKrC,OAAO,yBAAyB;AAChC,OAAO,mBAAmB;AAC1B,OAAO,0BAA0B;AACjC,OAAO,aAAa;AACpB,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,kBAAkB;AAuBrB,cASC,YATD;AArBW,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,oBAAC,wBACA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,iBACA;AAAA,+BAAC,gBACA;AAAA,gCAAC,gBAAa;AAAA,YACd,oBAAC,eACE,WAAE,gBACH;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA;AAAA,YACD,GAEF;AAAA,YACA,oBAAC,kBAAe;AAAA,aACjB;AAAA,UACA,oBAAC,gBACA,8BAAC,gBAAa,GACf;AAAA,WACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;",
   "names": []
 }

package/build-module/components/image-editor/use-transform-image.js

@@ -1,32 +1,52 @@
 // packages/block-editor/src/components/image-editor/use-transform-image.js
-import { useCallback, useMemo, useState } from "@wordpress/element";
+import { useCallback, useEffect, useMemo, useState } from "@wordpress/element";
 import { applyFilters } from "@wordpress/hooks";
+import { useImageCropper } from "@wordpress/image-cropper";
 function useTransformImage({
   url,
   naturalWidth,
   naturalHeight
 }) {
   const [editedUrl, setEditedUrl] = useState();
-  const [crop, setCrop] = useState();
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(100);
-  const [rotation, setRotation] = useState(0);
+  const { cropperState, setCropperState } = useImageCropper();
+  const { zoom, aspectRatio, crop, croppedArea } = cropperState;
+  const setZoom = useCallback(
+    (newZoom) => {
+      setCropperState({ zoom: newZoom });
+    },
+    [setCropperState]
+  );
+  const setAspectRatio = useCallback(
+    (newAspect) => {
+      setCropperState({ aspectRatio: newAspect });
+    },
+    [setCropperState]
+  );
   const defaultAspect = naturalWidth / naturalHeight;
-  const [aspect, setAspect] = useState(defaultAspect);
+  const rotatedAspect = naturalHeight / naturalWidth;
+  useEffect(() => {
+    setAspectRatio(defaultAspect);
+  }, []);
+  const [internalRotation, setInternalRotation] = useState(0);
   const rotateClockwise = useCallback(() => {
-    const angle = (rotation + 90) % 360;
+    const angle = (internalRotation + 90) % 360;
     let naturalAspectRatio = defaultAspect;
-    if (rotation % 180 === 90) {
+    const isDefaultAspect = defaultAspect === aspectRatio || rotatedAspect === aspectRatio;
+    const shouldResetAspect = zoom !== 1 || !isDefaultAspect;
+    if (internalRotation % 180 === 90) {
       naturalAspectRatio = 1 / defaultAspect;
     }
     if (angle === 0) {
       setEditedUrl();
-      setRotation(angle);
-      setAspect(defaultAspect);
-      setPosition((prevPosition) => ({
-        x: -(prevPosition.y * naturalAspectRatio),
-        y: prevPosition.x * naturalAspectRatio
-      }));
+      setInternalRotation(angle);
+      const newAspectRatio = shouldResetAspect ? aspectRatio : defaultAspect;
+      setCropperState({
+        aspectRatio: newAspectRatio,
+        crop: {
+          x: -(crop.y * naturalAspectRatio),
+          y: crop.x * naturalAspectRatio
+        }
+      });
       return;
     }
     function editImage(event) {
@@ -52,12 +72,15 @@ function useTransformImage({
       context.drawImage(event.target, 0, 0);
       canvas.toBlob((blob) => {
         setEditedUrl(URL.createObjectURL(blob));
-        setRotation(angle);
-        setAspect(canvas.width / canvas.height);
-        setPosition((prevPosition) => ({
-          x: -(prevPosition.y * naturalAspectRatio),
-          y: prevPosition.x * naturalAspectRatio
-        }));
+        setInternalRotation(angle);
+        const newAspectRatio = shouldResetAspect ? aspectRatio : canvas.width / canvas.height;
+        setCropperState({
+          aspectRatio: newAspectRatio,
+          crop: {
+            x: -(crop.y * naturalAspectRatio),
+            y: crop.x * naturalAspectRatio
+          }
+        });
       });
     }
     const el = new window.Image();
@@ -71,32 +94,39 @@ function useTransformImage({
     if (typeof imgCrossOrigin === "string") {
       el.crossOrigin = imgCrossOrigin;
     }
-  }, [rotation, defaultAspect, url]);
+  }, [
+    internalRotation,
+    defaultAspect,
+    url,
+    setCropperState,
+    crop,
+    zoom,
+    aspectRatio,
+    rotatedAspect,
+    setInternalRotation
+  ]);
   return useMemo(
     () => ({
       editedUrl,
       setEditedUrl,
-      crop,
-      setCrop,
-      position,
-      setPosition,
+      crop: croppedArea,
       zoom,
       setZoom,
-      rotation,
-      setRotation,
+      rotation: internalRotation,
       rotateClockwise,
-      aspect,
-      setAspect,
+      aspect: aspectRatio,
+      setAspect: setAspectRatio,
       defaultAspect
     }),
     [
       editedUrl,
-      crop,
-      position,
+      croppedArea,
       zoom,
-      rotation,
+      setZoom,
+      internalRotation,
       rotateClockwise,
-      aspect,
+      aspectRatio,
+      setAspectRatio,
       defaultAspect
     ]
   );

package/build-module/components/image-editor/use-transform-image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image-editor/use-transform-image.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { applyFilters } from '@wordpress/hooks';\n\nexport default function useTransformImage( {\n\turl,\n\tnaturalWidth,\n\tnaturalHeight,\n} ) {\n\tconst [ editedUrl, setEditedUrl ] = useState();\n\tconst [ crop, setCrop ] = useState();\n\tconst [ position, setPosition ] = useState( { x: 0, y: 0 } );\n\tconst [ zoom, setZoom ] = useState( 100 );\n\tconst [ rotation, setRotation ] = useState( 0 );\n\tconst defaultAspect = naturalWidth / naturalHeight;\n\tconst [ aspect, setAspect ] = useState( defaultAspect );\n\n\tconst rotateClockwise = useCallback( () => {\n\t\tconst angle = ( rotation + 90 ) % 360;\n\n\t\tlet naturalAspectRatio = defaultAspect;\n\n\t\tif ( rotation % 180 === 90 ) {\n\t\t\tnaturalAspectRatio = 1 / defaultAspect;\n\t\t}\n\n\t\tif ( angle === 0 ) {\n\t\t\tsetEditedUrl();\n\t\t\tsetRotation( angle );\n\t\t\tsetAspect( defaultAspect );\n\t\t\tsetPosition( ( prevPosition ) => ( {\n\t\t\t\tx: -( prevPosition.y * naturalAspectRatio ),\n\t\t\t\ty: prevPosition.x * naturalAspectRatio,\n\t\t\t} ) );\n\t\t\treturn;\n\t\t}\n\n\t\tfunction editImage( event ) {\n\t\t\tconst canvas = document.createElement( 'canvas' );\n\n\t\t\tlet translateX = 0;\n\t\t\tlet translateY = 0;\n\n\t\t\tif ( angle % 180 ) {\n\t\t\t\tcanvas.width = event.target.height;\n\t\t\t\tcanvas.height = event.target.width;\n\t\t\t} else {\n\t\t\t\tcanvas.width = event.target.width;\n\t\t\t\tcanvas.height = event.target.height;\n\t\t\t}\n\n\t\t\tif ( angle === 90 || angle === 180 ) {\n\t\t\t\ttranslateX = canvas.width;\n\t\t\t}\n\n\t\t\tif ( angle === 270 || angle === 180 ) {\n\t\t\t\ttranslateY = canvas.height;\n\t\t\t}\n\n\t\t\tconst context = canvas.getContext( '2d' );\n\n\t\t\tcontext.translate( translateX, translateY );\n\t\t\tcontext.rotate( ( angle * Math.PI ) / 180 );\n\t\t\tcontext.drawImage( event.target, 0, 0 );\n\n\t\t\tcanvas.toBlob( ( blob ) => {\n\t\t\t\tsetEditedUrl( URL.createObjectURL( blob ) );\n\t\t\t\tsetRotation( angle );\n\t\t\t\tsetAspect( canvas.width / canvas.height );\n\t\t\t\tsetPosition( ( prevPosition ) => ( {\n\t\t\t\t\tx: -( prevPosition.y * naturalAspectRatio ),\n\t\t\t\t\ty: prevPosition.x * naturalAspectRatio,\n\t\t\t\t} ) );\n\t\t\t} );\n\t\t}\n\n\t\tconst el = new window.Image();\n\t\tel.src = url;\n\t\tel.onload = editImage;\n\n\t\tconst imgCrossOrigin = applyFilters(\n\t\t\t'media.crossOrigin',\n\t\t\tundefined,\n\t\t\turl\n\t\t);\n\t\tif ( typeof imgCrossOrigin === 'string' ) {\n\t\t\tel.crossOrigin = imgCrossOrigin;\n\t\t}\n\t}, [ rotation, defaultAspect, url ] );\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\teditedUrl,\n\t\t\tsetEditedUrl,\n\t\t\tcrop,\n\t\t\tsetCrop,\n\t\t\tposition,\n\t\t\tsetPosition,\n\t\t\tzoom,\n\t\t\tsetZoom,\n\t\t\trotation,\n\t\t\tsetRotation,\n\t\t\trotateClockwise,\n\t\t\taspect,\n\t\t\tsetAspect,\n\t\t\tdefaultAspect,\n\t\t} ),\n\t\t[\n\t\t\teditedUrl,\n\t\t\tcrop,\n\t\t\tposition,\n\t\t\tzoom,\n\t\t\trotation,\n\t\t\trotateClockwise,\n\t\t\taspect,\n\t\t\tdefaultAspect,\n\t\t]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,aAAa,SAAS,gBAAgB;AAC/C,SAAS,oBAAoB;AAEd,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,WAAW,YAAa,IAAI,SAAS;AAC7C,QAAM,CAAE,MAAM,OAAQ,IAAI,SAAS;AACnC,QAAM,CAAE,UAAU,WAAY,IAAI,SAAU,EAAE,GAAG,GAAG,GAAG,EAAE,CAAE;AAC3D,QAAM,CAAE,MAAM,OAAQ,IAAI,SAAU,GAAI;AACxC,QAAM,CAAE,UAAU,WAAY,IAAI,SAAU,CAAE;AAC9C,QAAM,gBAAgB,eAAe;AACrC,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAU,aAAc;AAEtD,QAAM,kBAAkB,YAAa,MAAM;AAC1C,UAAM,SAAU,WAAW,MAAO;AAElC,QAAI,qBAAqB;AAEzB,QAAK,WAAW,QAAQ,IAAK;AAC5B,2BAAqB,IAAI;AAAA,IAC1B;AAEA,QAAK,UAAU,GAAI;AAClB,mBAAa;AACb,kBAAa,KAAM;AACnB,gBAAW,aAAc;AACzB,kBAAa,CAAE,kBAAoB;AAAA,QAClC,GAAG,EAAG,aAAa,IAAI;AAAA,QACvB,GAAG,aAAa,IAAI;AAAA,MACrB,EAAI;AACJ;AAAA,IACD;AAEA,aAAS,UAAW,OAAQ;AAC3B,YAAM,SAAS,SAAS,cAAe,QAAS;AAEhD,UAAI,aAAa;AACjB,UAAI,aAAa;AAEjB,UAAK,QAAQ,KAAM;AAClB,eAAO,QAAQ,MAAM,OAAO;AAC5B,eAAO,SAAS,MAAM,OAAO;AAAA,MAC9B,OAAO;AACN,eAAO,QAAQ,MAAM,OAAO;AAC5B,eAAO,SAAS,MAAM,OAAO;AAAA,MAC9B;AAEA,UAAK,UAAU,MAAM,UAAU,KAAM;AACpC,qBAAa,OAAO;AAAA,MACrB;AAEA,UAAK,UAAU,OAAO,UAAU,KAAM;AACrC,qBAAa,OAAO;AAAA,MACrB;AAEA,YAAM,UAAU,OAAO,WAAY,IAAK;AAExC,cAAQ,UAAW,YAAY,UAAW;AAC1C,cAAQ,OAAU,QAAQ,KAAK,KAAO,GAAI;AAC1C,cAAQ,UAAW,MAAM,QAAQ,GAAG,CAAE;AAEtC,aAAO,OAAQ,CAAE,SAAU;AAC1B,qBAAc,IAAI,gBAAiB,IAAK,CAAE;AAC1C,oBAAa,KAAM;AACnB,kBAAW,OAAO,QAAQ,OAAO,MAAO;AACxC,oBAAa,CAAE,kBAAoB;AAAA,UAClC,GAAG,EAAG,aAAa,IAAI;AAAA,UACvB,GAAG,aAAa,IAAI;AAAA,QACrB,EAAI;AAAA,MACL,CAAE;AAAA,IACH;AAEA,UAAM,KAAK,IAAI,OAAO,MAAM;AAC5B,OAAG,MAAM;AACT,OAAG,SAAS;AAEZ,UAAM,iBAAiB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AACA,QAAK,OAAO,mBAAmB,UAAW;AACzC,SAAG,cAAc;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,UAAU,eAAe,GAAI,CAAE;AAEpC,SAAO;AAAA,IACN,OAAQ;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useMemo, useState } from '@wordpress/element';\nimport { applyFilters } from '@wordpress/hooks';\nimport { useImageCropper } from '@wordpress/image-cropper';\n\nexport default function useTransformImage( {\n\turl,\n\tnaturalWidth,\n\tnaturalHeight,\n} ) {\n\tconst [ editedUrl, setEditedUrl ] = useState();\n\tconst { cropperState, setCropperState } = useImageCropper();\n\tconst { zoom, aspectRatio, crop, croppedArea } = cropperState;\n\n\tconst setZoom = useCallback(\n\t\t( newZoom ) => {\n\t\t\tsetCropperState( { zoom: newZoom } );\n\t\t},\n\t\t[ setCropperState ]\n\t);\n\n\tconst setAspectRatio = useCallback(\n\t\t( newAspect ) => {\n\t\t\tsetCropperState( { aspectRatio: newAspect } );\n\t\t},\n\t\t[ setCropperState ]\n\t);\n\n\tconst defaultAspect = naturalWidth / naturalHeight;\n\tconst rotatedAspect = naturalHeight / naturalWidth;\n\n\t// Initialize aspect ratio on mount or when defaultAspect changes\n\tuseEffect( () => {\n\t\tsetAspectRatio( defaultAspect );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t/**\n\t * rotateClockwise rotates the image by 90\u00B0 clockwise by drawing the original image onto a canvas with rotation applied,\n\t * then saves it as a new blob URL (editedUrl).\n\t * This creates a new rotated image file, bypassing the image-cropper\u2019s CSS transform rotation.\n\t * It's a bespoke solution to ensure that the rotated image fills the content width.\n\t */\n\tconst [ internalRotation, setInternalRotation ] = useState( 0 );\n\tconst rotateClockwise = useCallback( () => {\n\t\tconst angle = ( internalRotation + 90 ) % 360;\n\n\t\tlet naturalAspectRatio = defaultAspect;\n\t\tconst isDefaultAspect =\n\t\t\tdefaultAspect === aspectRatio || rotatedAspect === aspectRatio;\n\t\tconst shouldResetAspect = zoom !== 1 || ! isDefaultAspect;\n\n\t\tif ( internalRotation % 180 === 90 ) {\n\t\t\tnaturalAspectRatio = 1 / defaultAspect;\n\t\t}\n\n\t\tif ( angle === 0 ) {\n\t\t\tsetEditedUrl();\n\t\t\tsetInternalRotation( angle );\n\t\t\tconst newAspectRatio = shouldResetAspect\n\t\t\t\t? aspectRatio\n\t\t\t\t: defaultAspect;\n\t\t\tsetCropperState( {\n\t\t\t\taspectRatio: newAspectRatio,\n\t\t\t\tcrop: {\n\t\t\t\t\tx: -( crop.y * naturalAspectRatio ),\n\t\t\t\t\ty: crop.x * naturalAspectRatio,\n\t\t\t\t},\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\tfunction editImage( event ) {\n\t\t\tconst canvas = document.createElement( 'canvas' );\n\n\t\t\tlet translateX = 0;\n\t\t\tlet translateY = 0;\n\n\t\t\tif ( angle % 180 ) {\n\t\t\t\tcanvas.width = event.target.height;\n\t\t\t\tcanvas.height = event.target.width;\n\t\t\t} else {\n\t\t\t\tcanvas.width = event.target.width;\n\t\t\t\tcanvas.height = event.target.height;\n\t\t\t}\n\n\t\t\tif ( angle === 90 || angle === 180 ) {\n\t\t\t\ttranslateX = canvas.width;\n\t\t\t}\n\n\t\t\tif ( angle === 270 || angle === 180 ) {\n\t\t\t\ttranslateY = canvas.height;\n\t\t\t}\n\n\t\t\tconst context = canvas.getContext( '2d' );\n\n\t\t\tcontext.translate( translateX, translateY );\n\t\t\tcontext.rotate( ( angle * Math.PI ) / 180 );\n\t\t\tcontext.drawImage( event.target, 0, 0 );\n\n\t\t\tcanvas.toBlob( ( blob ) => {\n\t\t\t\tsetEditedUrl( URL.createObjectURL( blob ) );\n\t\t\t\tsetInternalRotation( angle );\n\t\t\t\tconst newAspectRatio = shouldResetAspect\n\t\t\t\t\t? aspectRatio\n\t\t\t\t\t: canvas.width / canvas.height;\n\t\t\t\tsetCropperState( {\n\t\t\t\t\taspectRatio: newAspectRatio,\n\t\t\t\t\tcrop: {\n\t\t\t\t\t\tx: -( crop.y * naturalAspectRatio ),\n\t\t\t\t\t\ty: crop.x * naturalAspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\n\t\tconst el = new window.Image();\n\t\tel.src = url;\n\t\tel.onload = editImage;\n\n\t\tconst imgCrossOrigin = applyFilters(\n\t\t\t'media.crossOrigin',\n\t\t\tundefined,\n\t\t\turl\n\t\t);\n\t\tif ( typeof imgCrossOrigin === 'string' ) {\n\t\t\tel.crossOrigin = imgCrossOrigin;\n\t\t}\n\t}, [\n\t\tinternalRotation,\n\t\tdefaultAspect,\n\t\turl,\n\t\tsetCropperState,\n\t\tcrop,\n\t\tzoom,\n\t\taspectRatio,\n\t\trotatedAspect,\n\t\tsetInternalRotation,\n\t] );\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\teditedUrl,\n\t\t\tsetEditedUrl,\n\t\t\tcrop: croppedArea,\n\t\t\tzoom,\n\t\t\tsetZoom,\n\t\t\trotation: internalRotation,\n\t\t\trotateClockwise,\n\t\t\taspect: aspectRatio,\n\t\t\tsetAspect: setAspectRatio,\n\t\t\tdefaultAspect,\n\t\t} ),\n\t\t[\n\t\t\teditedUrl,\n\t\t\tcroppedArea,\n\t\t\tzoom,\n\t\t\tsetZoom,\n\t\t\tinternalRotation,\n\t\t\trotateClockwise,\n\t\t\taspectRatio,\n\t\t\tsetAspectRatio,\n\t\t\tdefaultAspect,\n\t\t]\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/image-editor/zoom-dropdown.js

@@ -35,8 +35,8 @@ function ZoomDropdown() {
           label: __("Zoom"),
           min: MIN_ZOOM,
           max: MAX_ZOOM,
-          value: Math.round(zoom),
-          onChange: setZoom
+          value: Math.round(zoom * 100),
+          onChange: (newZoom) => setZoom(newZoom / 100)
         }
       ) })
     }

package/build-module/components/image-editor/zoom-dropdown.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image-editor/zoom-dropdown.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tRangeControl,\n\tDropdown,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { search } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { MIN_ZOOM, MAX_ZOOM, POPOVER_PROPS } from './constants';\nimport { useImageEditingContext } from './context';\n\nexport default function ZoomDropdown() {\n\tconst { isInProgress, zoom, setZoom } = useImageEditingContext();\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"wp-block-image__zoom\"\n\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ search }\n\t\t\t\t\tlabel={ __( 'Zoom' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\tdisabled={ isInProgress }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Zoom' ) }\n\t\t\t\t\t\tmin={ MIN_ZOOM }\n\t\t\t\t\t\tmax={ MAX_ZOOM }\n\t\t\t\t\t\tvalue={ Math.round( zoom ) }\n\t\t\t\t\t\tonChange={ setZoom }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,wCAAwC;AAAA,OAClC;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAKvB,SAAS,UAAU,UAAU,qBAAqB;AAClD,SAAS,8BAA8B;AASnC;AAPW,SAAR,eAAgC;AACtC,QAAM,EAAE,cAAc,MAAM,QAAQ,IAAI,uBAAuB;AAC/D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAiB;AAAA,MACjB,cAAe;AAAA,MACf,cAAe,CAAE,EAAE,QAAQ,SAAS,MACnC;AAAA,QAAC;AAAA;AAAA,UACA,MAAO;AAAA,UACP,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA,UACV,iBAAgB;AAAA,UAChB,UAAW;AAAA;AAAA,MACZ;AAAA,MAED,eAAgB,MACf,oBAAC,0BAAuB,aAAY,UACnC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,yBAAuB;AAAA,UACvB,OAAQ,GAAI,MAAO;AAAA,UACnB,KAAM;AAAA,UACN,KAAM;AAAA,UACN,OAAQ,KAAK,MAAO,IAAK;AAAA,UACzB,UAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tRangeControl,\n\tDropdown,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { search } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { MIN_ZOOM, MAX_ZOOM, POPOVER_PROPS } from './constants';\nimport { useImageEditingContext } from './context';\n\nexport default function ZoomDropdown() {\n\tconst { isInProgress, zoom, setZoom } = useImageEditingContext();\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"wp-block-image__zoom\"\n\t\t\tpopoverProps={ POPOVER_PROPS }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ search }\n\t\t\t\t\tlabel={ __( 'Zoom' ) }\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\tdisabled={ isInProgress }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"medium\">\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Zoom' ) }\n\t\t\t\t\t\tmin={ MIN_ZOOM }\n\t\t\t\t\t\tmax={ MAX_ZOOM }\n\t\t\t\t\t\tvalue={ Math.round( zoom * 100 ) }\n\t\t\t\t\t\tonChange={ ( newZoom ) => setZoom( newZoom / 100 ) }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,wCAAwC;AAAA,OAClC;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAKvB,SAAS,UAAU,UAAU,qBAAqB;AAClD,SAAS,8BAA8B;AASnC;AAPW,SAAR,eAAgC;AACtC,QAAM,EAAE,cAAc,MAAM,QAAQ,IAAI,uBAAuB;AAC/D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAiB;AAAA,MACjB,cAAe;AAAA,MACf,cAAe,CAAE,EAAE,QAAQ,SAAS,MACnC;AAAA,QAAC;AAAA;AAAA,UACA,MAAO;AAAA,UACP,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA,UACV,iBAAgB;AAAA,UAChB,UAAW;AAAA;AAAA,MACZ;AAAA,MAED,eAAgB,MACf,oBAAC,0BAAuB,aAAY,UACnC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,yBAAuB;AAAA,UACvB,OAAQ,GAAI,MAAO;AAAA,UACnB,KAAM;AAAA,UACN,KAAM;AAAA,UACN,OAAQ,KAAK,MAAO,OAAO,GAAI;AAAA,UAC/B,UAAW,CAAE,YAAa,QAAS,UAAU,GAAI;AAAA;AAAA,MAClD,GACD;AAAA;AAAA,EAEF;AAEF;",
   "names": []
 }

package/build-module/components/index.js

@@ -8,6 +8,11 @@ import {
   BlockAlignmentControl,
   BlockAlignmentToolbar
 } from "./block-alignment-control";
+import {
+  BlockBindingsAttributeControl,
+  BlockBindingsSourceFieldsList,
+  useBlockBindingsUtils
+} from "./block-bindings";
 import { default as default3 } from "./block-full-height-alignment-control";
 import { default as default4 } from "./block-alignment-matrix-control";
 import { default as default5 } from "./block-breadcrumb";
@@ -99,95 +104,97 @@ import {
 } from "./spacing-sizes-control/utils";
 import { default as default57 } from "./block-settings-menu/block-settings-menu-first-item";
 import { default as default58 } from "./block-toolbar/block-toolbar-last-item";
-import { default as default59 } from "./block-toolbar/block-name-context";
-import { default as default60 } from "./inserter-menu-extension";
-import { default as default61 } from "./preview-options";
-import { default as default62 } from "./use-resize-canvas";
-import { default as default63 } from "./block-inspector";
-import { default as default64 } from "./block-list";
+import { default as default59 } from "./inserter-menu-extension";
+import { default as default60 } from "./preview-options";
+import { default as default61 } from "./use-resize-canvas";
+import { default as default62 } from "./block-inspector";
+import { default as default63 } from "./block-list";
 import { useBlockProps } from "./block-list/use-block-props";
-import { default as default65 } from "./block-mover";
+import { default as default64 } from "./block-mover";
 import {
-  default as default66,
+  default as default65,
   useBlockPreview
 } from "./block-preview";
 import {
-  default as default67,
+  default as default66,
   useBlockSelectionClearer
 } from "./block-selection-clearer";
-import { default as default68 } from "./block-settings-menu";
-import { default as default69 } from "./block-settings-menu-controls";
-import { default as default70 } from "./block-title";
-import { default as default71 } from "./block-toolbar";
-import { default as default72 } from "./block-tools";
+import { default as default67 } from "./block-settings-menu";
+import { default as default68 } from "./block-settings-menu-controls";
+import { default as default69 } from "./block-title";
+import { default as default70 } from "./block-toolbar";
+import { default as default71 } from "./block-tools";
 import {
-  default as default73,
+  default as default72,
   __unstableUseClipboardHandler
 } from "./copy-handler";
-import { default as default74 } from "./default-block-appender";
-import { default as default75 } from "./editor-styles";
-import { default as default76 } from "./inserter";
-import { default as default77 } from "./inserter/library";
-import { default as default78 } from "./keyboard-shortcuts";
+import { default as default73 } from "./default-block-appender";
+import { default as default74 } from "./editor-styles";
+import { default as default75 } from "./inserter";
+import { default as default76 } from "./inserter/library";
+import { default as default77 } from "./keyboard-shortcuts";
 import { MultiSelectScrollIntoView } from "./selection-scroll-into-view";
-import { default as default79 } from "./navigable-toolbar";
+import { default as default78 } from "./navigable-toolbar";
 import {
-  default as default80,
+  default as default79,
   useTypingObserver,
   useMouseMoveTypingReset
 } from "./observe-typing";
-import { default as default81 } from "./skip-to-selected-block";
+import { default as default80 } from "./skip-to-selected-block";
 import {
-  default as default82,
+  default as default81,
   useTypewriter
 } from "./typewriter";
-import { default as default83 } from "./warning";
-import { default as default84 } from "./writing-flow";
-import { default as default85 } from "./use-block-display-information";
-import { default as default86 } from "./iframe";
+import { default as default82 } from "./warning";
+import { default as default83 } from "./writing-flow";
+import { default as default84 } from "./use-block-display-information";
+import { default as default85 } from "./iframe";
 import {
   RecursionProvider,
   DeprecatedExperimentalRecursionProvider,
   useHasRecursion,
   DeprecatedExperimentalUseHasRecursion
 } from "./recursion-provider";
-import { default as default87 } from "./block-patterns-list";
-import { default as default88 } from "./publish-date-time-picker";
-import { default as default89 } from "./inspector-popover-header";
-import { default as default90 } from "./block-popover";
+import { default as default86 } from "./block-patterns-list";
+import { default as default87 } from "./publish-date-time-picker";
+import { default as default88 } from "./inspector-popover-header";
+import { default as default89 } from "./block-popover";
 import { useBlockEditingMode } from "./block-editing-mode";
-import { default as default91 } from "./provider";
+import { default as default90 } from "./provider";
 import { useSettings, useSetting } from "./use-settings";
 import { useBlockCommands } from "./use-block-commands";
+import { default as default91 } from "./tool-selector";
 export {
   AlignmentControl,
   AlignmentToolbar,
   default2 as Autocomplete,
   BlockAlignmentControl,
   BlockAlignmentToolbar,
+  BlockBindingsAttributeControl,
+  BlockBindingsSourceFieldsList,
   default5 as BlockBreadcrumb,
   default7 as BlockCanvas,
   default9 as BlockColorsStyleSelector,
   BlockContextProvider,
   default8 as BlockControls,
   default10 as BlockEdit,
-  default78 as BlockEditorKeyboardShortcuts,
-  default91 as BlockEditorProvider,
+  default77 as BlockEditorKeyboardShortcuts,
+  default90 as BlockEditorProvider,
   BlockFormatControls,
   default11 as BlockIcon,
-  default63 as BlockInspector,
-  default64 as BlockList,
-  default65 as BlockMover,
+  default62 as BlockInspector,
+  default63 as BlockList,
+  default64 as BlockMover,
   default12 as BlockNavigationDropdown,
-  default90 as BlockPopover,
-  default66 as BlockPreview,
-  default67 as BlockSelectionClearer,
-  default68 as BlockSettingsMenu,
-  default69 as BlockSettingsMenuControls,
+  default89 as BlockPopover,
+  default65 as BlockPreview,
+  default66 as BlockSelectionClearer,
+  default67 as BlockSettingsMenu,
+  default68 as BlockSettingsMenuControls,
   default13 as BlockStyles,
-  default70 as BlockTitle,
-  default71 as BlockToolbar,
-  default72 as BlockTools,
+  default69 as BlockTitle,
+  default70 as BlockToolbar,
+  default71 as BlockTools,
   BlockVerticalAlignmentControl,
   BlockVerticalAlignmentToolbar,
   default19 as ButtonBlockAppender,
@@ -195,12 +202,12 @@ export {
   default20 as ColorPalette,
   default21 as ColorPaletteControl,
   default22 as ContrastChecker,
-  default73 as CopyHandler,
-  default74 as DefaultBlockAppender,
+  default72 as CopyHandler,
+  default73 as DefaultBlockAppender,
   default14 as HeadingLevelDropdown,
   default35 as HeightControl,
   default38 as InnerBlocks,
-  default76 as Inserter,
+  default75 as Inserter,
   InspectorAdvancedControls,
   default39 as InspectorControls,
   JustifyContentControl,
@@ -212,25 +219,26 @@ export {
   default45 as MediaUpload,
   default46 as MediaUploadCheck,
   MultiSelectScrollIntoView,
-  default79 as NavigableToolbar,
-  default80 as ObserveTyping,
+  default78 as NavigableToolbar,
+  default79 as ObserveTyping,
   default47 as PanelColorSettings,
   default48 as PlainText,
   RecursionProvider,
   default50 as RichText,
   RichTextShortcut,
   RichTextToolbarButton,
-  default81 as SkipToSelectedBlock,
-  default82 as Typewriter,
+  default80 as SkipToSelectedBlock,
+  default91 as ToolSelector,
+  default81 as Typewriter,
   default52 as URLInput,
   default53 as URLInputButton,
   default54 as URLPopover,
-  default83 as Warning,
-  default84 as WritingFlow,
+  default82 as Warning,
+  default83 as WritingFlow,
   default4 as __experimentalBlockAlignmentMatrixControl,
   default3 as __experimentalBlockFullHeightAligmentControl,
   default16 as __experimentalBlockPatternSetup,
-  default87 as __experimentalBlockPatternsList,
+  default86 as __experimentalBlockPatternsList,
   default15 as __experimentalBlockVariationPicker,
   default17 as __experimentalBlockVariationTransforms,
   default18 as __experimentalBorderRadiusControl,
@@ -243,17 +251,17 @@ export {
   default36 as __experimentalImageEditor,
   default37 as __experimentalImageSizeControl,
   __experimentalImageURLInputUI,
-  default89 as __experimentalInspectorPopoverHeader,
+  default88 as __experimentalInspectorPopoverHeader,
   default27 as __experimentalLetterSpacingControl,
-  default77 as __experimentalLibrary,
+  default76 as __experimentalLibrary,
   DeprecatedExperimentalLinkControl as __experimentalLinkControl,
   __experimentalLinkControlSearchInput,
   __experimentalLinkControlSearchItem,
   __experimentalLinkControlSearchResults,
   default42 as __experimentalListView,
   default33 as __experimentalPanelColorGradientSettings,
-  default61 as __experimentalPreviewOptions,
-  default88 as __experimentalPublishDateTimePicker,
+  default60 as __experimentalPreviewOptions,
+  default87 as __experimentalPublishDateTimePicker,
   DeprecatedExperimentalRecursionProvider as __experimentalRecursionProvider,
   default49 as __experimentalResponsiveBlockControl,
   default56 as __experimentalSpacingSizesControl,
@@ -264,14 +272,13 @@ export {
   useBlockPreview as __experimentalUseBlockPreview,
   DeprecatedExperimentalUseHasRecursion as __experimentalUseHasRecursion,
   default34 as __experimentalUseMultipleOriginColorsAndGradients,
-  default62 as __experimentalUseResizeCanvas,
+  default61 as __experimentalUseResizeCanvas,
   default30 as __experimentalWritingModeControl,
-  default59 as __unstableBlockNameContext,
   default57 as __unstableBlockSettingsMenuFirstItem,
   default58 as __unstableBlockToolbarLastItem,
-  default75 as __unstableEditorStyles,
-  default86 as __unstableIframe,
-  default60 as __unstableInserterMenuExtension,
+  default74 as __unstableEditorStyles,
+  default85 as __unstableIframe,
+  default59 as __unstableInserterMenuExtension,
   __unstableRichTextInputEvent,
   useBlockSelectionClearer as __unstableUseBlockSelectionClearer,
   __unstableUseClipboardHandler,
@@ -281,8 +288,9 @@ export {
   getCustomValueFromPreset,
   getSpacingPresetCssVar,
   isValueSpacingPreset,
+  useBlockBindingsUtils,
   useBlockCommands,
-  default85 as useBlockDisplayInformation,
+  default84 as useBlockDisplayInformation,
   useBlockEditContext,
   useBlockEditingMode,
   useBlockProps,