@wordpress/block-editor 11.2.0 → 11.3.0

package/build/components/image-editor/context.js

@@ -33,7 +33,6 @@ function ImageEditingProvider(_ref) {
     url,
     naturalWidth,
     naturalHeight,
-    isEditing,
     onFinishEditing,
     onSaveImage,
     children
@@ -42,7 +41,7 @@ function ImageEditingProvider(_ref) {
     url,
     naturalWidth,
     naturalHeight
-  }, isEditing);
+  });
   const saveImage = (0, _useSaveImage.default)({
     id,
     url,

package/build/components/image-editor/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/context.js"],"names":["ImageEditingContext","useImageEditingContext","ImageEditingProvider","id","url","naturalWidth","naturalHeight","isEditing","onFinishEditing","onSaveImage","children","transformImage","saveImage","providerValue"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,mBAAmB,GAAG,4BAAe,EAAf,CAA5B;;AAEO,MAAMC,sBAAsB,GAAG,MAAM,yBAAYD,mBAAZ,CAArC;;;;AAEQ,SAASE,oBAAT,OASX;AAAA,MAT0C;AAC7CC,IAAAA,EAD6C;AAE7CC,IAAAA,GAF6C;AAG7CC,IAAAA,YAH6C;AAI7CC,IAAAA,aAJ6C;AAK7CC,IAAAA,SAL6C;AAM7CC,IAAAA,eAN6C;AAO7CC,IAAAA,WAP6C;AAQ7CC,IAAAA;AAR6C,GAS1C;AACH,QAAMC,cAAc,GAAG,gCACtB;AACCP,IAAAA,GADD;AAECC,IAAAA,YAFD;AAGCC,IAAAA;AAHD,GADsB,EAMtBC,SANsB,CAAvB;AASA,QAAMK,SAAS,GAAG,2BAAc;AAC/BT,IAAAA,EAD+B;AAE/BC,IAAAA,GAF+B;AAG/BK,IAAAA,WAH+B;AAI/BD,IAAAA,eAJ+B;AAK/B,OAAGG;AAL4B,GAAd,CAAlB;AAQA,QAAME,aAAa,GAAG,sBACrB,OAAQ,EACP,GAAGF,cADI;AAEP,OAAGC;AAFI,GAAR,CADqB,EAKrB,CAAED,cAAF,EAAkBC,SAAlB,CALqB,CAAtB;AAQA,SACC,4BAAC,mBAAD,CAAqB,QAArB;AAA8B,IAAA,KAAK,EAAGC;AAAtC,KACGH,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSaveImage from './use-save-image';\nimport useTransformImage from './use-transform-image';\n\nconst ImageEditingContext = createContext( {} );\n\nexport const useImageEditingContext = () => useContext( ImageEditingContext );\n\nexport default function ImageEditingProvider( {\n\tid,\n\turl,\n\tnaturalWidth,\n\tnaturalHeight,\n\tisEditing,\n\tonFinishEditing,\n\tonSaveImage,\n\tchildren,\n} ) {\n\tconst transformImage = useTransformImage(\n\t\t{\n\t\t\turl,\n\t\t\tnaturalWidth,\n\t\t\tnaturalHeight,\n\t\t},\n\t\tisEditing\n\t);\n\n\tconst saveImage = useSaveImage( {\n\t\tid,\n\t\turl,\n\t\tonSaveImage,\n\t\tonFinishEditing,\n\t\t...transformImage,\n\t} );\n\n\tconst providerValue = useMemo(\n\t\t() => ( {\n\t\t\t...transformImage,\n\t\t\t...saveImage,\n\t\t} ),\n\t\t[ transformImage, saveImage ]\n\t);\n\n\treturn (\n\t\t<ImageEditingContext.Provider value={ providerValue }>\n\t\t\t{ children }\n\t\t</ImageEditingContext.Provider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/context.js"],"names":["ImageEditingContext","useImageEditingContext","ImageEditingProvider","id","url","naturalWidth","naturalHeight","onFinishEditing","onSaveImage","children","transformImage","saveImage","providerValue"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,mBAAmB,GAAG,4BAAe,EAAf,CAA5B;;AAEO,MAAMC,sBAAsB,GAAG,MAAM,yBAAYD,mBAAZ,CAArC;;;;AAEQ,SAASE,oBAAT,OAQX;AAAA,MAR0C;AAC7CC,IAAAA,EAD6C;AAE7CC,IAAAA,GAF6C;AAG7CC,IAAAA,YAH6C;AAI7CC,IAAAA,aAJ6C;AAK7CC,IAAAA,eAL6C;AAM7CC,IAAAA,WAN6C;AAO7CC,IAAAA;AAP6C,GAQ1C;AACH,QAAMC,cAAc,GAAG,gCAAmB;AACzCN,IAAAA,GADyC;AAEzCC,IAAAA,YAFyC;AAGzCC,IAAAA;AAHyC,GAAnB,CAAvB;AAMA,QAAMK,SAAS,GAAG,2BAAc;AAC/BR,IAAAA,EAD+B;AAE/BC,IAAAA,GAF+B;AAG/BI,IAAAA,WAH+B;AAI/BD,IAAAA,eAJ+B;AAK/B,OAAGG;AAL4B,GAAd,CAAlB;AAQA,QAAME,aAAa,GAAG,sBACrB,OAAQ,EACP,GAAGF,cADI;AAEP,OAAGC;AAFI,GAAR,CADqB,EAKrB,CAAED,cAAF,EAAkBC,SAAlB,CALqB,CAAtB;AAQA,SACC,4BAAC,mBAAD,CAAqB,QAArB;AAA8B,IAAA,KAAK,EAAGC;AAAtC,KACGH,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSaveImage from './use-save-image';\nimport useTransformImage from './use-transform-image';\n\nconst ImageEditingContext = createContext( {} );\n\nexport const useImageEditingContext = () => useContext( ImageEditingContext );\n\nexport default function ImageEditingProvider( {\n\tid,\n\turl,\n\tnaturalWidth,\n\tnaturalHeight,\n\tonFinishEditing,\n\tonSaveImage,\n\tchildren,\n} ) {\n\tconst transformImage = useTransformImage( {\n\t\turl,\n\t\tnaturalWidth,\n\t\tnaturalHeight,\n\t} );\n\n\tconst saveImage = useSaveImage( {\n\t\tid,\n\t\turl,\n\t\tonSaveImage,\n\t\tonFinishEditing,\n\t\t...transformImage,\n\t} );\n\n\tconst providerValue = useMemo(\n\t\t() => ( {\n\t\t\t...transformImage,\n\t\t\t...saveImage,\n\t\t} ),\n\t\t[ transformImage, saveImage ]\n\t);\n\n\treturn (\n\t\t<ImageEditingContext.Provider value={ providerValue }>\n\t\t\t{ children }\n\t\t</ImageEditingContext.Provider>\n\t);\n}\n"]}

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

@@ -73,7 +73,9 @@ function ImageCropper(_ref) {
     crop: position,
     zoom: zoom / 100,
     aspect: aspect,
-    onCropChange: setPosition,
+    onCropChange: pos => {
+      setPosition(pos);
+    },
     onCropComplete: newCropPercent => {
       setCrop(newCropPercent);
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/cropper.js"],"names":["ImageCropper","url","width","height","clientWidth","naturalHeight","naturalWidth","borderProps","isInProgress","editedUrl","position","zoom","aspect","setPosition","setCrop","setZoom","rotation","editedHeight","className","style","MIN_ZOOM","MAX_ZOOM","newCropPercent","newZoom"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAEA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,YAAT,OAQX;AAAA,MARkC;AACrCC,IAAAA,GADqC;AAErCC,IAAAA,KAFqC;AAGrCC,IAAAA,MAHqC;AAIrCC,IAAAA,WAJqC;AAKrCC,IAAAA,aALqC;AAMrCC,IAAAA,YANqC;AAOrCC,IAAAA;AAPqC,GAQlC;AACH,QAAM;AACLC,IAAAA,YADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,MALK;AAMLC,IAAAA,WANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,OARK;AASLC,IAAAA;AATK,MAUF,sCAVJ;AAYA,MAAIC,YAAY,GAAGd,MAAM,IAAMC,WAAW,GAAGC,aAAhB,GAAkCC,YAA/D;;AAEA,MAAKU,QAAQ,GAAG,GAAX,KAAmB,EAAxB,EAA6B;AAC5BC,IAAAA,YAAY,GAAKb,WAAW,GAAGE,YAAhB,GAAiCD,aAAhD;AACA;;AAED,SACC;AACC,IAAA,SAAS,EAAG,yBACX,2BADW,EAEXE,WAFW,aAEXA,WAFW,uBAEXA,WAAW,CAAEW,SAFF,EAGX;AACC,qBAAeV;AADhB,KAHW,CADb;AAQC,IAAA,KAAK,EAAG,EACP,IAAGD,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEY,KAAhB,CADO;AAEPjB,MAAAA,KAAK,EAAEA,KAAK,IAAIE,WAFT;AAGPD,MAAAA,MAAM,EAAEc;AAHD;AART,KAcC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGR,SAAS,IAAIR,GADtB;AAEC,IAAA,QAAQ,EAAGO,YAFZ;AAGC,IAAA,OAAO,EAAGY,sBAAW,GAHtB;AAIC,IAAA,OAAO,EAAGC,sBAAW,GAJtB;AAKC,IAAA,IAAI,EAAGX,QALR;AAMC,IAAA,IAAI,EAAGC,IAAI,GAAG,GANf;AAOC,IAAA,MAAM,EAAGC,MAPV;AAQC,IAAA,YAAY,EAAGC,WARhB;AASC,IAAA,cAAc,EAAKS,cAAF,IAAsB;AACtCR,MAAAA,OAAO,CAAEQ,cAAF,CAAP;AACA,KAXF;AAYC,IAAA,YAAY,EAAKC,OAAF,IAAe;AAC7BR,MAAAA,OAAO,CAAEQ,OAAO,GAAG,GAAZ,CAAP;AACA;AAdF,IAdD,EA8BGf,YAAY,IAAI,4BAAC,mBAAD,OA9BnB,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport Cropper from 'react-easy-crop';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\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\tclientWidth,\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\n\tlet editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;\n\n\tif ( rotation % 180 === 90 ) {\n\t\teditedHeight = ( clientWidth * naturalWidth ) / naturalHeight;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\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={ setPosition }\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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/cropper.js"],"names":["ImageCropper","url","width","height","clientWidth","naturalHeight","naturalWidth","borderProps","isInProgress","editedUrl","position","zoom","aspect","setPosition","setCrop","setZoom","rotation","editedHeight","className","style","MIN_ZOOM","MAX_ZOOM","pos","newCropPercent","newZoom"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAEA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,YAAT,OAQX;AAAA,MARkC;AACrCC,IAAAA,GADqC;AAErCC,IAAAA,KAFqC;AAGrCC,IAAAA,MAHqC;AAIrCC,IAAAA,WAJqC;AAKrCC,IAAAA,aALqC;AAMrCC,IAAAA,YANqC;AAOrCC,IAAAA;AAPqC,GAQlC;AACH,QAAM;AACLC,IAAAA,YADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,QAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,MALK;AAMLC,IAAAA,WANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,OARK;AASLC,IAAAA;AATK,MAUF,sCAVJ;AAYA,MAAIC,YAAY,GAAGd,MAAM,IAAMC,WAAW,GAAGC,aAAhB,GAAkCC,YAA/D;;AAEA,MAAKU,QAAQ,GAAG,GAAX,KAAmB,EAAxB,EAA6B;AAC5BC,IAAAA,YAAY,GAAKb,WAAW,GAAGE,YAAhB,GAAiCD,aAAhD;AACA;;AAED,SACC;AACC,IAAA,SAAS,EAAG,yBACX,2BADW,EAEXE,WAFW,aAEXA,WAFW,uBAEXA,WAAW,CAAEW,SAFF,EAGX;AACC,qBAAeV;AADhB,KAHW,CADb;AAQC,IAAA,KAAK,EAAG,EACP,IAAGD,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEY,KAAhB,CADO;AAEPjB,MAAAA,KAAK,EAAEA,KAAK,IAAIE,WAFT;AAGPD,MAAAA,MAAM,EAAEc;AAHD;AART,KAcC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGR,SAAS,IAAIR,GADtB;AAEC,IAAA,QAAQ,EAAGO,YAFZ;AAGC,IAAA,OAAO,EAAGY,sBAAW,GAHtB;AAIC,IAAA,OAAO,EAAGC,sBAAW,GAJtB;AAKC,IAAA,IAAI,EAAGX,QALR;AAMC,IAAA,IAAI,EAAGC,IAAI,GAAG,GANf;AAOC,IAAA,MAAM,EAAGC,MAPV;AAQC,IAAA,YAAY,EAAKU,GAAF,IAAW;AACzBT,MAAAA,WAAW,CAAES,GAAF,CAAX;AACA,KAVF;AAWC,IAAA,cAAc,EAAKC,cAAF,IAAsB;AACtCT,MAAAA,OAAO,CAAES,cAAF,CAAP;AACA,KAbF;AAcC,IAAA,YAAY,EAAKC,OAAF,IAAe;AAC7BT,MAAAA,OAAO,CAAES,OAAO,GAAG,GAAZ,CAAP;AACA;AAhBF,IAdD,EAgCGhB,YAAY,IAAI,4BAAC,mBAAD,OAhCnB,CADD;AAoCA","sourcesContent":["/**\n * External dependencies\n */\nimport Cropper from 'react-easy-crop';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner } from '@wordpress/components';\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\tclientWidth,\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\n\tlet editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;\n\n\tif ( rotation % 180 === 90 ) {\n\t\teditedHeight = ( clientWidth * naturalWidth ) / naturalHeight;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\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"]}

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

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ImageEditingProvider", {
-  enumerable: true,
-  get: function () {
-    return _context.default;
-  }
-});
 exports.default = ImageEditor;
 
 var _element = require("@wordpress/element");
@@ -19,6 +13,8 @@ var _components = require("@wordpress/components");
 
 var _blockControls = _interopRequireDefault(require("../block-controls"));
 
+var _context = _interopRequireDefault(require("./context"));
+
 var _cropper = _interopRequireDefault(require("./cropper"));
 
 var _zoomDropdown = _interopRequireDefault(require("./zoom-dropdown"));
@@ -29,8 +25,6 @@ var _rotationButton = _interopRequireDefault(require("./rotation-button"));
 
 var _formControls = _interopRequireDefault(require("./form-controls"));
 
-var _context = _interopRequireDefault(require("./context"));
-
 /**
  * WordPress dependencies
  */
@@ -40,15 +34,25 @@ var _context = _interopRequireDefault(require("./context"));
  */
 function ImageEditor(_ref) {
   let {
+    id,
     url,
     width,
     height,
     clientWidth,
     naturalHeight,
     naturalWidth,
+    onSaveImage,
+    onFinishEditing,
     borderProps
   } = _ref;
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_cropper.default, {
+  return (0, _element.createElement)(_context.default, {
+    id: id,
+    url: url,
+    naturalWidth: naturalWidth,
+    naturalHeight: naturalHeight,
+    onSaveImage: onSaveImage,
+    onFinishEditing: onFinishEditing
+  }, (0, _element.createElement)(_cropper.default, {
     borderProps: borderProps,
     url: url,
     width: width,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/index.js"],"names":["ImageEditor","url","width","height","clientWidth","naturalHeight","naturalWidth","borderProps","toggleProps"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAwCA;;AArDA;AACA;AACA;;AAGA;AACA;AACA;AAQe,SAASA,WAAT,OAQX;AAAA,MARiC;AACpCC,IAAAA,GADoC;AAEpCC,IAAAA,KAFoC;AAGpCC,IAAAA,MAHoC;AAIpCC,IAAAA,WAJoC;AAKpCC,IAAAA,aALoC;AAMpCC,IAAAA,YANoC;AAOpCC,IAAAA;AAPoC,GAQjC;AACH,SACC,qDACC,4BAAC,gBAAD;AACC,IAAA,WAAW,EAAGA,WADf;AAEC,IAAA,GAAG,EAAGN,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,MAAM,EAAGC,MAJV;AAKC,IAAA,WAAW,EAAGC,WALf;AAMC,IAAA,aAAa,EAAGC,aANjB;AAOC,IAAA,YAAY,EAAGC;AAPhB,IADD,EAUC,4BAAC,sBAAD,QACC,4BAAC,wBAAD,QACC,4BAAC,qBAAD,OADD,EAEC,4BAAC,uBAAD,QACKE,WAAF,IACD,4BAAC,4BAAD;AAAqB,IAAA,WAAW,EAAGA;AAAnC,IAFF,CAFD,EAOC,4BAAC,uBAAD,OAPD,CADD,EAUC,4BAAC,wBAAD,QACC,4BAAC,qBAAD,OADD,CAVD,CAVD,CADD;AA2BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockControls from '../block-controls';\nimport Cropper from './cropper';\nimport ZoomDropdown from './zoom-dropdown';\nimport AspectRatioDropdown from './aspect-ratio-dropdown';\nimport RotationButton from './rotation-button';\nimport FormControls from './form-controls';\n\nexport default function ImageEditor( {\n\turl,\n\twidth,\n\theight,\n\tclientWidth,\n\tnaturalHeight,\n\tnaturalWidth,\n\tborderProps,\n} ) {\n\treturn (\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\tclientWidth={ clientWidth }\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</>\n\t);\n}\n\nexport { default as ImageEditingProvider } from './context';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/index.js"],"names":["ImageEditor","id","url","width","height","clientWidth","naturalHeight","naturalWidth","onSaveImage","onFinishEditing","borderProps","toggleProps"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,WAAT,OAWX;AAAA,MAXiC;AACpCC,IAAAA,EADoC;AAEpCC,IAAAA,GAFoC;AAGpCC,IAAAA,KAHoC;AAIpCC,IAAAA,MAJoC;AAKpCC,IAAAA,WALoC;AAMpCC,IAAAA,aANoC;AAOpCC,IAAAA,YAPoC;AAQpCC,IAAAA,WARoC;AASpCC,IAAAA,eAToC;AAUpCC,IAAAA;AAVoC,GAWjC;AACH,SACC,4BAAC,gBAAD;AACC,IAAA,EAAE,EAAGT,EADN;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,YAAY,EAAGK,YAHhB;AAIC,IAAA,aAAa,EAAGD,aAJjB;AAKC,IAAA,WAAW,EAAGE,WALf;AAMC,IAAA,eAAe,EAAGC;AANnB,KAQC,4BAAC,gBAAD;AACC,IAAA,WAAW,EAAGC,WADf;AAEC,IAAA,GAAG,EAAGR,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,MAAM,EAAGC,MAJV;AAKC,IAAA,WAAW,EAAGC,WALf;AAMC,IAAA,aAAa,EAAGC,aANjB;AAOC,IAAA,YAAY,EAAGC;AAPhB,IARD,EAiBC,4BAAC,sBAAD,QACC,4BAAC,wBAAD,QACC,4BAAC,qBAAD,OADD,EAEC,4BAAC,uBAAD,QACKI,WAAF,IACD,4BAAC,4BAAD;AAAqB,IAAA,WAAW,EAAGA;AAAnC,IAFF,CAFD,EAOC,4BAAC,uBAAD,OAPD,CADD,EAUC,4BAAC,wBAAD,QACC,4BAAC,qBAAD,OADD,CAVD,CAjBD,CADD;AAkCA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockControls from '../block-controls';\nimport ImageEditingProvider from './context';\nimport Cropper from './cropper';\nimport ZoomDropdown from './zoom-dropdown';\nimport AspectRatioDropdown from './aspect-ratio-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\tclientWidth,\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\tclientWidth={ clientWidth }\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"]}

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

@@ -12,7 +12,7 @@ var _hooks = require("@wordpress/hooks");
 /**
  * WordPress dependencies
  */
-function useTransformState(_ref) {
+function useTransformImage(_ref) {
   let {
     url,
     naturalWidth,
@@ -24,32 +24,22 @@ function useTransformState(_ref) {
     x: 0,
     y: 0
   });
-  const [zoom, setZoom] = (0, _element.useState)();
-  const [rotation, setRotation] = (0, _element.useState)();
-  const [aspect, setAspect] = (0, _element.useState)();
-  const [defaultAspect, setDefaultAspect] = (0, _element.useState)();
-  const initializeTransformValues = (0, _element.useCallback)(() => {
-    setPosition({
-      x: 0,
-      y: 0
-    });
-    setZoom(100);
-    setRotation(0);
-    setAspect(naturalWidth / naturalHeight);
-    setDefaultAspect(naturalWidth / naturalHeight);
-  }, [naturalWidth, naturalHeight, setPosition, setZoom, setRotation, setAspect, setDefaultAspect]);
+  const [zoom, setZoom] = (0, _element.useState)(100);
+  const [rotation, setRotation] = (0, _element.useState)(0);
+  const defaultAspect = naturalWidth / naturalHeight;
+  const [aspect, setAspect] = (0, _element.useState)(defaultAspect);
   const rotateClockwise = (0, _element.useCallback)(() => {
     const angle = (rotation + 90) % 360;
-    let naturalAspectRatio = naturalWidth / naturalHeight;
+    let naturalAspectRatio = defaultAspect;
 
     if (rotation % 180 === 90) {
-      naturalAspectRatio = naturalHeight / naturalWidth;
+      naturalAspectRatio = 1 / defaultAspect;
     }
 
     if (angle === 0) {
       setEditedUrl();
       setRotation(angle);
-      setAspect(naturalWidth / naturalHeight);
+      setAspect(defaultAspect);
       setPosition({
         x: -(position.y * naturalAspectRatio),
         y: position.x * naturalAspectRatio
@@ -101,7 +91,7 @@ function useTransformState(_ref) {
     if (typeof imgCrossOrigin === 'string') {
       el.crossOrigin = imgCrossOrigin;
     }
-  }, [rotation, naturalWidth, naturalHeight, setEditedUrl, setRotation, setAspect, setPosition]);
+  }, [rotation, defaultAspect]);
   return (0, _element.useMemo)(() => ({
     editedUrl,
     setEditedUrl,
@@ -116,21 +106,7 @@ function useTransformState(_ref) {
     rotateClockwise,
     aspect,
     setAspect,
-    defaultAspect,
-    initializeTransformValues
-  }), [editedUrl, setEditedUrl, crop, setCrop, position, setPosition, zoom, setZoom, rotation, setRotation, rotateClockwise, aspect, setAspect, defaultAspect, initializeTransformValues]);
-}
-
-function useTransformImage(imageProperties, isEditing) {
-  const transformState = useTransformState(imageProperties);
-  const {
-    initializeTransformValues
-  } = transformState;
-  (0, _element.useEffect)(() => {
-    if (isEditing) {
-      initializeTransformValues();
-    }
-  }, [isEditing, initializeTransformValues]);
-  return transformState;
+    defaultAspect
+  }), [editedUrl, crop, position, zoom, rotation, rotateClockwise, aspect, defaultAspect]);
 }
 //# sourceMappingURL=use-transform-image.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/use-transform-image.js"],"names":["useTransformState","url","naturalWidth","naturalHeight","editedUrl","setEditedUrl","crop","setCrop","position","setPosition","x","y","zoom","setZoom","rotation","setRotation","aspect","setAspect","defaultAspect","setDefaultAspect","initializeTransformValues","rotateClockwise","angle","naturalAspectRatio","editImage","event","canvas","document","createElement","translateX","translateY","width","target","height","context","getContext","translate","rotate","Math","PI","drawImage","toBlob","blob","URL","createObjectURL","el","window","Image","src","onload","imgCrossOrigin","undefined","crossOrigin","useTransformImage","imageProperties","isEditing","transformState"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useMemo, useState } from '@wordpress/element';\nimport { applyFilters } from '@wordpress/hooks';\n\nfunction useTransformState( { url, naturalWidth, naturalHeight } ) {\n\tconst [ editedUrl, setEditedUrl ] = useState();\n\tconst [ crop, setCrop ] = useState();\n\tconst [ position, setPosition ] = useState( { x: 0, y: 0 } );\n\tconst [ zoom, setZoom ] = useState();\n\tconst [ rotation, setRotation ] = useState();\n\tconst [ aspect, setAspect ] = useState();\n\tconst [ defaultAspect, setDefaultAspect ] = useState();\n\n\tconst initializeTransformValues = useCallback( () => {\n\t\tsetPosition( { x: 0, y: 0 } );\n\t\tsetZoom( 100 );\n\t\tsetRotation( 0 );\n\t\tsetAspect( naturalWidth / naturalHeight );\n\t\tsetDefaultAspect( naturalWidth / naturalHeight );\n\t}, [\n\t\tnaturalWidth,\n\t\tnaturalHeight,\n\t\tsetPosition,\n\t\tsetZoom,\n\t\tsetRotation,\n\t\tsetAspect,\n\t\tsetDefaultAspect,\n\t] );\n\n\tconst rotateClockwise = useCallback( () => {\n\t\tconst angle = ( rotation + 90 ) % 360;\n\n\t\tlet naturalAspectRatio = naturalWidth / naturalHeight;\n\n\t\tif ( rotation % 180 === 90 ) {\n\t\t\tnaturalAspectRatio = naturalHeight / naturalWidth;\n\t\t}\n\n\t\tif ( angle === 0 ) {\n\t\t\tsetEditedUrl();\n\t\t\tsetRotation( angle );\n\t\t\tsetAspect( naturalWidth / naturalHeight );\n\t\t\tsetPosition( {\n\t\t\t\tx: -( position.y * naturalAspectRatio ),\n\t\t\t\ty: position.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( {\n\t\t\t\t\tx: -( position.y * naturalAspectRatio ),\n\t\t\t\t\ty: position.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}, [\n\t\trotation,\n\t\tnaturalWidth,\n\t\tnaturalHeight,\n\t\tsetEditedUrl,\n\t\tsetRotation,\n\t\tsetAspect,\n\t\tsetPosition,\n\t] );\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\tinitializeTransformValues,\n\t\t} ),\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\tinitializeTransformValues,\n\t\t]\n\t);\n}\n\nexport default function useTransformImage( imageProperties, isEditing ) {\n\tconst transformState = useTransformState( imageProperties );\n\tconst { initializeTransformValues } = transformState;\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tinitializeTransformValues();\n\t\t}\n\t}, [ isEditing, initializeTransformValues ] );\n\n\treturn transformState;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-editor/use-transform-image.js"],"names":["useTransformImage","url","naturalWidth","naturalHeight","editedUrl","setEditedUrl","crop","setCrop","position","setPosition","x","y","zoom","setZoom","rotation","setRotation","defaultAspect","aspect","setAspect","rotateClockwise","angle","naturalAspectRatio","editImage","event","canvas","document","createElement","translateX","translateY","width","target","height","context","getContext","translate","rotate","Math","PI","drawImage","toBlob","blob","URL","createObjectURL","el","window","Image","src","onload","imgCrossOrigin","undefined","crossOrigin"],"mappings":"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","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( {\n\t\t\t\tx: -( position.y * naturalAspectRatio ),\n\t\t\t\ty: position.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( {\n\t\t\t\t\tx: -( position.y * naturalAspectRatio ),\n\t\t\t\t\ty: position.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 ] );\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"]}

package/build/components/image-size-control/index.js

@@ -9,18 +9,12 @@ exports.default = ImageSizeControl;
 
 var _element = require("@wordpress/element");
 
-var _lodash = require("lodash");
-
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
 var _useDimensionHandler = _interopRequireDefault(require("./use-dimension-handler"));
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -51,7 +45,7 @@ function ImageSizeControl(_ref) {
     updateDimension,
     updateDimensions
   } = (0, _useDimensionHandler.default)(height, width, imageHeight, imageWidth, onChange);
-  return (0, _element.createElement)(_element.Fragment, null, !(0, _lodash.isEmpty)(imageSizeOptions) && (0, _element.createElement)(_components.SelectControl, {
+  return (0, _element.createElement)(_element.Fragment, null, imageSizeOptions && imageSizeOptions.length > 0 && (0, _element.createElement)(_components.SelectControl, {
     __nextHasNoMarginBottom: true,
     label: (0, _i18n.__)('Image size'),
     value: slug,

package/build/components/image-size-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/image-size-control/index.js"],"names":["IMAGE_SIZE_PRESETS","noop","ImageSizeControl","imageSizeHelp","imageWidth","imageHeight","imageSizeOptions","isResizable","slug","width","height","onChange","onChangeImage","currentHeight","currentWidth","updateDimension","updateDimensions","value","map","scale","scaledWidth","Math","round","scaledHeight","isCurrent","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tButtonGroup,\n\tSelectControl,\n\tTextControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useDimensionHandler from './use-dimension-handler';\n\nconst IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];\nconst noop = () => {};\n\nexport default function ImageSizeControl( {\n\timageSizeHelp,\n\timageWidth,\n\timageHeight,\n\timageSizeOptions = [],\n\tisResizable = true,\n\tslug,\n\twidth,\n\theight,\n\tonChange,\n\tonChangeImage = noop,\n} ) {\n\tconst { currentHeight, currentWidth, updateDimension, updateDimensions } =\n\t\tuseDimensionHandler( height, width, imageHeight, imageWidth, onChange );\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isEmpty( imageSizeOptions ) && (\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Image size' ) }\n\t\t\t\t\tvalue={ slug }\n\t\t\t\t\toptions={ imageSizeOptions }\n\t\t\t\t\tonChange={ onChangeImage }\n\t\t\t\t\thelp={ imageSizeHelp }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isResizable && (\n\t\t\t\t<div className=\"block-editor-image-size-control\">\n\t\t\t\t\t<p className=\"block-editor-image-size-control__row\">\n\t\t\t\t\t\t{ __( 'Image dimensions' ) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"block-editor-image-size-control__row\">\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclassName=\"block-editor-image-size-control__width\"\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tvalue={ currentWidth }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'width', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclassName=\"block-editor-image-size-control__height\"\n\t\t\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\t\t\tvalue={ currentHeight }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'height', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"block-editor-image-size-control__row\">\n\t\t\t\t\t\t<ButtonGroup aria-label={ __( 'Image size presets' ) }>\n\t\t\t\t\t\t\t{ IMAGE_SIZE_PRESETS.map( ( scale ) => {\n\t\t\t\t\t\t\t\tconst scaledWidth = Math.round(\n\t\t\t\t\t\t\t\t\timageWidth * ( scale / 100 )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tconst scaledHeight = Math.round(\n\t\t\t\t\t\t\t\t\timageHeight * ( scale / 100 )\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tconst isCurrent =\n\t\t\t\t\t\t\t\t\tcurrentWidth === scaledWidth &&\n\t\t\t\t\t\t\t\t\tcurrentHeight === scaledHeight;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={ scale }\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\tisCurrent ? 'primary' : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisPressed={ isCurrent }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tupdateDimensions(\n\t\t\t\t\t\t\t\t\t\t\t\tscaledHeight,\n\t\t\t\t\t\t\t\t\t\t\t\tscaledWidth\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ scale }%\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t<Button isSmall onClick={ () => updateDimensions() }>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/image-size-control/index.js"],"names":["IMAGE_SIZE_PRESETS","noop","ImageSizeControl","imageSizeHelp","imageWidth","imageHeight","imageSizeOptions","isResizable","slug","width","height","onChange","onChangeImage","currentHeight","currentWidth","updateDimension","updateDimensions","length","value","map","scale","scaledWidth","Math","round","scaledHeight","isCurrent","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tButtonGroup,\n\tSelectControl,\n\tTextControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useDimensionHandler from './use-dimension-handler';\n\nconst IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];\nconst noop = () => {};\n\nexport default function ImageSizeControl( {\n\timageSizeHelp,\n\timageWidth,\n\timageHeight,\n\timageSizeOptions = [],\n\tisResizable = true,\n\tslug,\n\twidth,\n\theight,\n\tonChange,\n\tonChangeImage = noop,\n} ) {\n\tconst { currentHeight, currentWidth, updateDimension, updateDimensions } =\n\t\tuseDimensionHandler( height, width, imageHeight, imageWidth, onChange );\n\n\treturn (\n\t\t<>\n\t\t\t{ imageSizeOptions && imageSizeOptions.length > 0 && (\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Image size' ) }\n\t\t\t\t\tvalue={ slug }\n\t\t\t\t\toptions={ imageSizeOptions }\n\t\t\t\t\tonChange={ onChangeImage }\n\t\t\t\t\thelp={ imageSizeHelp }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isResizable && (\n\t\t\t\t<div className=\"block-editor-image-size-control\">\n\t\t\t\t\t<p className=\"block-editor-image-size-control__row\">\n\t\t\t\t\t\t{ __( 'Image dimensions' ) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"block-editor-image-size-control__row\">\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclassName=\"block-editor-image-size-control__width\"\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tvalue={ currentWidth }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'width', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tclassName=\"block-editor-image-size-control__height\"\n\t\t\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\t\t\tvalue={ currentHeight }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tupdateDimension( 'height', value )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"block-editor-image-size-control__row\">\n\t\t\t\t\t\t<ButtonGroup aria-label={ __( 'Image size presets' ) }>\n\t\t\t\t\t\t\t{ IMAGE_SIZE_PRESETS.map( ( scale ) => {\n\t\t\t\t\t\t\t\tconst scaledWidth = Math.round(\n\t\t\t\t\t\t\t\t\timageWidth * ( scale / 100 )\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tconst scaledHeight = Math.round(\n\t\t\t\t\t\t\t\t\timageHeight * ( scale / 100 )\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tconst isCurrent =\n\t\t\t\t\t\t\t\t\tcurrentWidth === scaledWidth &&\n\t\t\t\t\t\t\t\t\tcurrentHeight === scaledHeight;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tkey={ scale }\n\t\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\tisCurrent ? 'primary' : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisPressed={ isCurrent }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tupdateDimensions(\n\t\t\t\t\t\t\t\t\t\t\t\tscaledHeight,\n\t\t\t\t\t\t\t\t\t\t\t\tscaledWidth\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ scale }%\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t<Button isSmall onClick={ () => updateDimensions() }>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/components/index.js

@@ -46,9 +46,8 @@ var _exportNames = {
   __experimentalColorGradientSettingsDropdown: true,
   __experimentalPanelColorGradientSettings: true,
   __experimentalUseMultipleOriginColorsAndGradients: true,
-  __experimentalHeightControl: true,
+  HeightControl: true,
   __experimentalImageEditor: true,
-  __experimentalImageEditingProvider: true,
   __experimentalImageSizeControl: true,
   InnerBlocks: true,
   useInnerBlocksProps: true,
@@ -62,7 +61,6 @@ var _exportNames = {
   __experimentalLinkControlSearchItem: true,
   LineHeightControl: true,
   __experimentalListView: true,
-  __experimentalOffCanvasEditor: true,
   MediaReplaceFlow: true,
   MediaPlaceholder: true,
   MediaUpload: true,
@@ -339,6 +337,12 @@ Object.defineProperty(exports, "DefaultBlockAppender", {
     return _defaultBlockAppender.default;
   }
 });
+Object.defineProperty(exports, "HeightControl", {
+  enumerable: true,
+  get: function () {
+    return _heightControl.default;
+  }
+});
 Object.defineProperty(exports, "InnerBlocks", {
   enumerable: true,
   get: function () {
@@ -579,18 +583,6 @@ Object.defineProperty(exports, "__experimentalFontFamilyControl", {
     return _fontFamily.default;
   }
 });
-Object.defineProperty(exports, "__experimentalHeightControl", {
-  enumerable: true,
-  get: function () {
-    return _heightControl.default;
-  }
-});
-Object.defineProperty(exports, "__experimentalImageEditingProvider", {
-  enumerable: true,
-  get: function () {
-    return _imageEditor.ImageEditingProvider;
-  }
-});
 Object.defineProperty(exports, "__experimentalImageEditor", {
   enumerable: true,
   get: function () {
@@ -663,12 +655,6 @@ Object.defineProperty(exports, "__experimentalListView", {
     return _listView.default;
   }
 });
-Object.defineProperty(exports, "__experimentalOffCanvasEditor", {
-  enumerable: true,
-  get: function () {
-    return _offCanvasEditor.default;
-  }
-});
 Object.defineProperty(exports, "__experimentalPanelColorGradientSettings", {
   enumerable: true,
   get: function () {
@@ -988,7 +974,7 @@ var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("./col
 
 var _heightControl = _interopRequireDefault(require("./height-control"));
 
-var _imageEditor = _interopRequireWildcard(require("./image-editor"));
+var _imageEditor = _interopRequireDefault(require("./image-editor"));
 
 var _imageSizeControl = _interopRequireDefault(require("./image-size-control"));
 
@@ -1010,8 +996,6 @@ var _lineHeightControl = _interopRequireDefault(require("./line-height-control")
 
 var _listView = _interopRequireDefault(require("./list-view"));
 
-var _offCanvasEditor = _interopRequireDefault(require("./off-canvas-editor"));
-
 var _mediaReplaceFlow = _interopRequireDefault(require("./media-replace-flow"));
 
 var _mediaPlaceholder = _interopRequireDefault(require("./media-placeholder"));

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AAMA;;AACA","sourcesContent":["/*\n * Block Creation Components\n */\n\nexport * from './colors';\nexport * from './gradients';\nexport * from './font-sizes';\nexport * from './duotone';\nexport { AlignmentControl, AlignmentToolbar } from './alignment-control';\nexport { default as Autocomplete } from './autocomplete';\nexport {\n\tBlockAlignmentControl,\n\tBlockAlignmentToolbar,\n} from './block-alignment-control';\nexport { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';\nexport { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';\nexport { default as BlockBreadcrumb } from './block-breadcrumb';\nexport { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';\nexport { BlockContextProvider } from './block-context';\nexport {\n\tdefault as BlockControls,\n\tBlockFormatControls,\n} from './block-controls';\nexport { default as BlockColorsStyleSelector } from './color-style-selector';\nexport { default as BlockEdit, useBlockEditContext } from './block-edit';\nexport { default as BlockIcon } from './block-icon';\nexport { default as BlockNavigationDropdown } from './block-navigation/dropdown';\nexport { default as BlockStyles } from './block-styles';\nexport { default as __experimentalBlockVariationPicker } from './block-variation-picker';\nexport { default as __experimentalBlockPatternSetup } from './block-pattern-setup';\nexport { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';\nexport {\n\tBlockVerticalAlignmentToolbar,\n\tBlockVerticalAlignmentControl,\n} from './block-vertical-alignment-control';\nexport { default as __experimentalBorderRadiusControl } from './border-radius-control';\nexport {\n\t// This is a typo, but kept here for back-compat.\n\tButtonBlockerAppender,\n\tdefault as ButtonBlockAppender,\n} from './button-block-appender';\nexport { default as ColorPalette } from './color-palette';\nexport { default as ColorPaletteControl } from './color-palette/control';\nexport { default as ContrastChecker } from './contrast-checker';\nexport { default as __experimentalDateFormatPicker } from './date-format-picker';\nexport { default as __experimentalDuotoneControl } from './duotone-control';\nexport { default as __experimentalFontAppearanceControl } from './font-appearance-control';\nexport { default as __experimentalFontFamilyControl } from './font-family';\nexport { default as __experimentalLetterSpacingControl } from './letter-spacing-control';\nexport { default as __experimentalTextDecorationControl } from './text-decoration-control';\nexport { default as __experimentalTextTransformControl } from './text-transform-control';\nexport { default as __experimentalColorGradientControl } from './colors-gradients/control';\nexport { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';\nexport { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';\nexport { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';\nexport { default as __experimentalHeightControl } from './height-control';\nexport {\n\tdefault as __experimentalImageEditor,\n\tImageEditingProvider as __experimentalImageEditingProvider,\n} from './image-editor';\nexport { default as __experimentalImageSizeControl } from './image-size-control';\nexport { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';\nexport {\n\tdefault as InspectorControls,\n\tInspectorAdvancedControls,\n} from './inspector-controls';\nexport {\n\tJustifyToolbar,\n\tJustifyContentControl,\n} from './justify-content-control';\nexport { default as __experimentalLinkControl } from './link-control';\nexport { default as __experimentalLinkControlSearchInput } from './link-control/search-input';\nexport { default as __experimentalLinkControlSearchResults } from './link-control/search-results';\nexport { default as __experimentalLinkControlSearchItem } from './link-control/search-item';\nexport { default as LineHeightControl } from './line-height-control';\nexport { default as __experimentalListView } from './list-view';\nexport { default as __experimentalOffCanvasEditor } from './off-canvas-editor';\nexport { default as MediaReplaceFlow } from './media-replace-flow';\nexport { default as MediaPlaceholder } from './media-placeholder';\nexport { default as MediaUpload } from './media-upload';\nexport { default as MediaUploadCheck } from './media-upload/check';\nexport { default as PanelColorSettings } from './panel-color-settings';\nexport { default as PlainText } from './plain-text';\nexport { default as __experimentalResponsiveBlockControl } from './responsive-block-control';\nexport {\n\tdefault as RichText,\n\tRichTextShortcut,\n\tRichTextToolbarButton,\n\t__unstableRichTextInputEvent,\n} from './rich-text';\nexport { default as ToolSelector } from './tool-selector';\nexport { default as __experimentalUnitControl } from './unit-control';\nexport { default as URLInput } from './url-input';\nexport { default as URLInputButton } from './url-input/button';\nexport { default as URLPopover } from './url-popover';\nexport { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';\nexport { default as withColorContext } from './color-palette/with-color-context';\nexport { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';\n\n/*\n * Content Related Components\n */\n\nexport { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';\nexport { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';\nexport { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';\nexport { default as __unstableInserterMenuExtension } from './inserter-menu-extension';\nexport { default as __experimentalPreviewOptions } from './preview-options';\nexport { default as __experimentalUseResizeCanvas } from './use-resize-canvas';\nexport { default as BlockInspector } from './block-inspector';\nexport { default as BlockList } from './block-list';\nexport { useBlockProps } from './block-list/use-block-props';\nexport { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';\nexport { default as BlockMover } from './block-mover';\nexport {\n\tdefault as BlockPreview,\n\tuseBlockPreview as __experimentalUseBlockPreview,\n} from './block-preview';\nexport {\n\tdefault as BlockSelectionClearer,\n\tuseBlockSelectionClearer as __unstableUseBlockSelectionClearer,\n} from './block-selection-clearer';\nexport { default as BlockSettingsMenu } from './block-settings-menu';\nexport { default as BlockSettingsMenuControls } from './block-settings-menu-controls';\nexport { default as BlockTitle } from './block-title';\nexport { default as BlockToolbar } from './block-toolbar';\nexport { default as BlockTools } from './block-tools';\nexport {\n\tdefault as CopyHandler,\n\tuseClipboardHandler as __unstableUseClipboardHandler,\n} from './copy-handler';\nexport { default as DefaultBlockAppender } from './default-block-appender';\nexport { default as __unstableEditorStyles } from './editor-styles';\nexport { default as Inserter } from './inserter';\nexport { default as __experimentalLibrary } from './inserter/library';\nexport { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';\nexport { MultiSelectScrollIntoView } from './selection-scroll-into-view';\nexport { default as NavigableToolbar } from './navigable-toolbar';\nexport {\n\tdefault as ObserveTyping,\n\tuseTypingObserver as __unstableUseTypingObserver,\n\tuseMouseMoveTypingReset as __unstableUseMouseMoveTypingReset,\n} from './observe-typing';\nexport { default as SkipToSelectedBlock } from './skip-to-selected-block';\nexport {\n\tdefault as Typewriter,\n\tuseTypewriter as __unstableUseTypewriter,\n} from './typewriter';\nexport { default as Warning } from './warning';\nexport { default as WritingFlow } from './writing-flow';\nexport { default as useBlockDisplayInformation } from './use-block-display-information';\nexport { default as __unstableIframe } from './iframe';\nexport {\n\tRecursionProvider as __experimentalRecursionProvider,\n\tuseHasRecursion as __experimentalUseHasRecursion,\n} from './recursion-provider';\nexport { default as __experimentalBlockPatternsList } from './block-patterns-list';\nexport { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';\nexport { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';\n\n/*\n * State Related Components\n */\n\nexport { default as BlockEditorProvider } from './provider';\nexport { default as useSetting } from './use-setting';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AAMA;;AACA","sourcesContent":["/*\n * Block Creation Components\n */\n\nexport * from './colors';\nexport * from './gradients';\nexport * from './font-sizes';\nexport * from './duotone';\nexport { AlignmentControl, AlignmentToolbar } from './alignment-control';\nexport { default as Autocomplete } from './autocomplete';\nexport {\n\tBlockAlignmentControl,\n\tBlockAlignmentToolbar,\n} from './block-alignment-control';\nexport { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control';\nexport { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control';\nexport { default as BlockBreadcrumb } from './block-breadcrumb';\nexport { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';\nexport { BlockContextProvider } from './block-context';\nexport {\n\tdefault as BlockControls,\n\tBlockFormatControls,\n} from './block-controls';\nexport { default as BlockColorsStyleSelector } from './color-style-selector';\nexport { default as BlockEdit, useBlockEditContext } from './block-edit';\nexport { default as BlockIcon } from './block-icon';\nexport { default as BlockNavigationDropdown } from './block-navigation/dropdown';\nexport { default as BlockStyles } from './block-styles';\nexport { default as __experimentalBlockVariationPicker } from './block-variation-picker';\nexport { default as __experimentalBlockPatternSetup } from './block-pattern-setup';\nexport { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';\nexport {\n\tBlockVerticalAlignmentToolbar,\n\tBlockVerticalAlignmentControl,\n} from './block-vertical-alignment-control';\nexport { default as __experimentalBorderRadiusControl } from './border-radius-control';\nexport {\n\t// This is a typo, but kept here for back-compat.\n\tButtonBlockerAppender,\n\tdefault as ButtonBlockAppender,\n} from './button-block-appender';\nexport { default as ColorPalette } from './color-palette';\nexport { default as ColorPaletteControl } from './color-palette/control';\nexport { default as ContrastChecker } from './contrast-checker';\nexport { default as __experimentalDateFormatPicker } from './date-format-picker';\nexport { default as __experimentalDuotoneControl } from './duotone-control';\nexport { default as __experimentalFontAppearanceControl } from './font-appearance-control';\nexport { default as __experimentalFontFamilyControl } from './font-family';\nexport { default as __experimentalLetterSpacingControl } from './letter-spacing-control';\nexport { default as __experimentalTextDecorationControl } from './text-decoration-control';\nexport { default as __experimentalTextTransformControl } from './text-transform-control';\nexport { default as __experimentalColorGradientControl } from './colors-gradients/control';\nexport { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';\nexport { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';\nexport { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';\nexport { default as HeightControl } from './height-control';\nexport { default as __experimentalImageEditor } from './image-editor';\nexport { default as __experimentalImageSizeControl } from './image-size-control';\nexport { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';\nexport {\n\tdefault as InspectorControls,\n\tInspectorAdvancedControls,\n} from './inspector-controls';\nexport {\n\tJustifyToolbar,\n\tJustifyContentControl,\n} from './justify-content-control';\nexport { default as __experimentalLinkControl } from './link-control';\nexport { default as __experimentalLinkControlSearchInput } from './link-control/search-input';\nexport { default as __experimentalLinkControlSearchResults } from './link-control/search-results';\nexport { default as __experimentalLinkControlSearchItem } from './link-control/search-item';\nexport { default as LineHeightControl } from './line-height-control';\nexport { default as __experimentalListView } from './list-view';\nexport { default as MediaReplaceFlow } from './media-replace-flow';\nexport { default as MediaPlaceholder } from './media-placeholder';\nexport { default as MediaUpload } from './media-upload';\nexport { default as MediaUploadCheck } from './media-upload/check';\nexport { default as PanelColorSettings } from './panel-color-settings';\nexport { default as PlainText } from './plain-text';\nexport { default as __experimentalResponsiveBlockControl } from './responsive-block-control';\nexport {\n\tdefault as RichText,\n\tRichTextShortcut,\n\tRichTextToolbarButton,\n\t__unstableRichTextInputEvent,\n} from './rich-text';\nexport { default as ToolSelector } from './tool-selector';\nexport { default as __experimentalUnitControl } from './unit-control';\nexport { default as URLInput } from './url-input';\nexport { default as URLInputButton } from './url-input/button';\nexport { default as URLPopover } from './url-popover';\nexport { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';\nexport { default as withColorContext } from './color-palette/with-color-context';\nexport { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';\n\n/*\n * Content Related Components\n */\n\nexport { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';\nexport { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';\nexport { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';\nexport { default as __unstableInserterMenuExtension } from './inserter-menu-extension';\nexport { default as __experimentalPreviewOptions } from './preview-options';\nexport { default as __experimentalUseResizeCanvas } from './use-resize-canvas';\nexport { default as BlockInspector } from './block-inspector';\nexport { default as BlockList } from './block-list';\nexport { useBlockProps } from './block-list/use-block-props';\nexport { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';\nexport { default as BlockMover } from './block-mover';\nexport {\n\tdefault as BlockPreview,\n\tuseBlockPreview as __experimentalUseBlockPreview,\n} from './block-preview';\nexport {\n\tdefault as BlockSelectionClearer,\n\tuseBlockSelectionClearer as __unstableUseBlockSelectionClearer,\n} from './block-selection-clearer';\nexport { default as BlockSettingsMenu } from './block-settings-menu';\nexport { default as BlockSettingsMenuControls } from './block-settings-menu-controls';\nexport { default as BlockTitle } from './block-title';\nexport { default as BlockToolbar } from './block-toolbar';\nexport { default as BlockTools } from './block-tools';\nexport {\n\tdefault as CopyHandler,\n\tuseClipboardHandler as __unstableUseClipboardHandler,\n} from './copy-handler';\nexport { default as DefaultBlockAppender } from './default-block-appender';\nexport { default as __unstableEditorStyles } from './editor-styles';\nexport { default as Inserter } from './inserter';\nexport { default as __experimentalLibrary } from './inserter/library';\nexport { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';\nexport { MultiSelectScrollIntoView } from './selection-scroll-into-view';\nexport { default as NavigableToolbar } from './navigable-toolbar';\nexport {\n\tdefault as ObserveTyping,\n\tuseTypingObserver as __unstableUseTypingObserver,\n\tuseMouseMoveTypingReset as __unstableUseMouseMoveTypingReset,\n} from './observe-typing';\nexport { default as SkipToSelectedBlock } from './skip-to-selected-block';\nexport {\n\tdefault as Typewriter,\n\tuseTypewriter as __unstableUseTypewriter,\n} from './typewriter';\nexport { default as Warning } from './warning';\nexport { default as WritingFlow } from './writing-flow';\nexport { default as useBlockDisplayInformation } from './use-block-display-information';\nexport { default as __unstableIframe } from './iframe';\nexport {\n\tRecursionProvider as __experimentalRecursionProvider,\n\tuseHasRecursion as __experimentalUseHasRecursion,\n} from './recursion-provider';\nexport { default as __experimentalBlockPatternsList } from './block-patterns-list';\nexport { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';\nexport { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';\n\n/*\n * State Related Components\n */\n\nexport { default as BlockEditorProvider } from './provider';\nexport { default as useSetting } from './use-setting';\n"]}

package/build/components/inner-blocks/index.js

@@ -28,7 +28,7 @@ var _useNestedSettingsUpdate = _interopRequireDefault(require("./use-nested-sett
 
 var _useInnerBlockTemplateSync = _interopRequireDefault(require("./use-inner-block-template-sync"));
 
-var _getBlockContext = _interopRequireDefault(require("./get-block-context"));
+var _useBlockContext = _interopRequireDefault(require("./use-block-context"));
 
 var _blockList = require("../block-list");
 
@@ -42,6 +42,8 @@ var _store = require("../../store");
 
 var _useBlockDropZone = _interopRequireDefault(require("../use-block-drop-zone"));
 
+var _useSetting = _interopRequireDefault(require("../use-setting"));
+
 /**
  * External dependencies
  */
@@ -53,7 +55,7 @@ var _useBlockDropZone = _interopRequireDefault(require("../use-block-drop-zone")
 /**
  * Internal dependencies
  */
-
+const EMPTY_OBJECT = {};
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
  * as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -62,6 +64,7 @@ var _useBlockDropZone = _interopRequireDefault(require("../use-block-drop-zone")
  *
  * @param {Object} props The component props.
  */
+
 function UncontrolledInnerBlocks(props) {
   const {
     clientId,
@@ -77,44 +80,29 @@ function UncontrolledInnerBlocks(props) {
     renderAppender,
     orientation,
     placeholder,
-    __experimentalLayout
+    layout
   } = props;
-  (0, _useNestedSettingsUpdate.default)(clientId, allowedBlocks, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, captureToolbars, orientation, __experimentalLayout);
+  (0, _useNestedSettingsUpdate.default)(clientId, allowedBlocks, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, captureToolbars, orientation, layout);
   (0, _useInnerBlockTemplateSync.default)(clientId, template, templateLock, templateInsertUpdatesSelection);
-  const {
-    context,
-    name
-  } = (0, _data.useSelect)(select => {
-    var _blockType$providesCo;
-
-    const block = select(_store.store).getBlock(clientId); // This check is here to avoid the Redux zombie bug where a child subscription
-    // is called before a parent, causing potential JS errors when the child has been removed.
-
-    if (!block) {
-      return {};
-    }
+  const context = (0, _useBlockContext.default)(clientId);
+  const name = (0, _data.useSelect)(select => {
+    var _select$getBlock;
 
-    const blockType = (0, _blocks.getBlockType)(block.name);
-
-    if (Object.keys((_blockType$providesCo = blockType === null || blockType === void 0 ? void 0 : blockType.providesContext) !== null && _blockType$providesCo !== void 0 ? _blockType$providesCo : {}).length === 0) {
-      return {
-        name: block.name
-      };
-    }
-
-    return {
-      context: (0, _getBlockContext.default)(block.attributes, blockType),
-      name: block.name
-    };
+    return (_select$getBlock = select(_store.store).getBlock(clientId)) === null || _select$getBlock === void 0 ? void 0 : _select$getBlock.name;
   }, [clientId]);
+  const defaultLayoutBlockSupport = (0, _blocks.getBlockSupport)(name, '__experimentalLayout') || EMPTY_OBJECT;
   const {
     allowSizingOnChildren = false
-  } = (0, _blocks.getBlockSupport)(name, '__experimentalLayout') || {};
-  const layout = (0, _element.useMemo)(() => ({ ...__experimentalLayout,
+  } = defaultLayoutBlockSupport;
+  const defaultLayout = (0, _useSetting.default)('layout') || EMPTY_OBJECT;
+  const usedLayout = layout || defaultLayoutBlockSupport;
+  const memoedLayout = (0, _element.useMemo)(() => ({ // Default layout will know about any content/wide size defined by the theme.
+    ...defaultLayout,
+    ...usedLayout,
     ...(allowSizingOnChildren && {
       allowSizingOnChildren: true
     })
-  }), [__experimentalLayout, allowSizingOnChildren]); // This component needs to always be synchronous as it's the one changing
+  }), [defaultLayout, usedLayout, allowSizingOnChildren]); // This component needs to always be synchronous as it's the one changing
   // the async mode depending on the block selection.
 
   return (0, _element.createElement)(_blockContext.BlockContextProvider, {
@@ -123,7 +111,7 @@ function UncontrolledInnerBlocks(props) {
     rootClientId: clientId,
     renderAppender: renderAppender,
     __experimentalAppenderTagName: __experimentalAppenderTagName,
-    __experimentalLayout: layout,
+    __experimentalLayout: memoedLayout,
     wrapperRef: wrapperRef,
     placeholder: placeholder
   }));
@@ -177,6 +165,7 @@ function useInnerBlocksProps() {
   } = options;
   const {
     clientId,
+    layout = null,
     __unstableLayoutClassNames: layoutClassNames = ''
   } = (0, _context.useBlockEditContext)();
   const isSmallScreen = (0, _compose.useViewportMatch)('medium', '<');
@@ -207,6 +196,7 @@ function useInnerBlocksProps() {
   const ref = (0, _compose.useMergeRefs)([props.ref, __unstableDisableDropZone ? null : blockDropZoneRef]);
   const innerBlocksProps = {
     __experimentalCaptureToolbars,
+    layout,
     ...options
   };
   const InnerBlocks = innerBlocksProps.value && innerBlocksProps.onChange ? ControlledInnerBlocks : UncontrolledInnerBlocks;