@wordpress/block-editor 15.9.1-next.8b30e05b0.0 → 15.10.0

package/build-module/components/content-only-controls/rich-text/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/content-only-controls/rich-text/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BaseControl, useBaseControlProps } from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useRegistry } from '@wordpress/data';\nimport { useRef, useState } from '@wordpress/element';\nimport {\n\t__unstableUseRichText as useRichText,\n\tremoveFormat,\n} from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { useFormatTypes } from '../../rich-text/use-format-types';\nimport { getAllowedFormats } from '../../rich-text/utils';\nimport { useEventListeners } from '../../rich-text/event-listeners';\nimport FormatEdit from '../../rich-text/format-edit';\nimport { keyboardShortcutContext, inputEventContext } from '../../rich-text';\n\nexport default function RichTextControl( {\n\tdata,\n\tfield,\n\thideLabelFromVision,\n\tconfig = {},\n} ) {\n\tconst registry = useRegistry();\n\tconst attrValue = field.getValue( { item: data } );\n\tconst fieldConfig = field.config || {};\n\tconst { clientId, updateBlockAttributes } = config;\n\tconst updateAttributes = ( html ) => {\n\t\tconst mappedChanges = field.setValue( { item: data, value: html } );\n\t\tupdateBlockAttributes( clientId, mappedChanges );\n\t};\n\tconst [ selection, setSelection ] = useState( {\n\t\tstart: undefined,\n\t\tend: undefined,\n\t} );\n\tconst [ isSelected, setIsSelected ] = useState( false );\n\tconst anchorRef = useRef();\n\tconst inputEvents = useRef( new Set() );\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tconst adjustedAllowedFormats = getAllowedFormats( {\n\t\tallowedFormats: fieldConfig?.allowedFormats,\n\t\tdisableFormats: fieldConfig?.disableFormats,\n\t} );\n\n\tconst {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t} = useFormatTypes( {\n\t\tclientId,\n\t\tidentifier: field.id,\n\t\tallowedFormats: adjustedAllowedFormats,\n\t\twithoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,\n\t\tdisableNoneEssentialFormatting: true,\n\t} );\n\n\tfunction addEditorOnlyFormats( value ) {\n\t\treturn valueHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction removeEditorOnlyFormats( value ) {\n\t\tformatTypes.forEach( ( formatType ) => {\n\t\t\t// Remove formats created by prepareEditableTree, because they are editor only.\n\t\t\tif ( formatType.__experimentalCreatePrepareEditableTree ) {\n\t\t\t\tvalue = removeFormat(\n\t\t\t\t\tvalue,\n\t\t\t\t\tformatType.name,\n\t\t\t\t\t0,\n\t\t\t\t\tvalue.text.length\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn value.formats;\n\t}\n\n\tfunction addInvisibleFormats( value ) {\n\t\treturn prepareHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction onFocus() {\n\t\tanchorRef.current?.focus();\n\t}\n\n\tconst {\n\t\tvalue,\n\t\tgetValue,\n\t\tonChange: onRichTextChange,\n\t\tref: richTextRef,\n\t} = useRichText( {\n\t\tvalue: attrValue,\n\t\tonChange( html, { __unstableFormats, __unstableText } ) {\n\t\t\tupdateAttributes( html );\n\t\t\tObject.values( changeHandlers ).forEach( ( changeHandler ) => {\n\t\t\t\tchangeHandler( __unstableFormats, __unstableText );\n\t\t\t} );\n\t\t},\n\t\tselectionStart: selection.start,\n\t\tselectionEnd: selection.end,\n\t\tonSelectionChange: ( start, end ) => setSelection( { start, end } ),\n\t\t__unstableIsSelected: isSelected,\n\t\tpreserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,\n\t\tplaceholder: fieldConfig?.placeholder,\n\t\t__unstableDisableFormats: fieldConfig?.disableFormats,\n\t\t__unstableDependencies: dependencies,\n\t\t__unstableAfterParse: addEditorOnlyFormats,\n\t\t__unstableBeforeSerialize: removeEditorOnlyFormats,\n\t\t__unstableAddInvisibleFormats: addInvisibleFormats,\n\t} );\n\n\tconst { baseControlProps, controlProps } = useBaseControlProps( {\n\t\thideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,\n\t\tlabel: field.label,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ isSelected && (\n\t\t\t\t<keyboardShortcutContext.Provider value={ keyboardShortcuts }>\n\t\t\t\t\t<inputEventContext.Provider value={ inputEvents }>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<FormatEdit\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ onRichTextChange }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tformatTypes={ formatTypes }\n\t\t\t\t\t\t\t\tforwardedRef={ anchorRef }\n\t\t\t\t\t\t\t\tisVisible={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</inputEventContext.Provider>\n\t\t\t\t</keyboardShortcutContext.Provider>\n\t\t\t) }\n\t\t\t<BaseControl __nextHasNoMarginBottom { ...baseControlProps }>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__rich-text\"\n\t\t\t\t\trole=\"textbox\"\n\t\t\t\t\taria-multiline={ ! fieldConfig?.disableLineBreaks }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\trichTextRef,\n\t\t\t\t\t\tuseEventListeners( {\n\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\tgetValue,\n\t\t\t\t\t\t\tonChange: onRichTextChange,\n\t\t\t\t\t\t\tformatTypes,\n\t\t\t\t\t\t\tselectionChange: setSelection,\n\t\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\t\tdisableFormats: fieldConfig?.disableFormats,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\ttagName: 'div',\n\t\t\t\t\t\t\tremoveEditorOnlyFormats,\n\t\t\t\t\t\t\tdisableLineBreaks: fieldConfig?.disableLineBreaks,\n\t\t\t\t\t\t\tkeyboardShortcuts,\n\t\t\t\t\t\t\tinputEvents,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t\tanchorRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\tonFocus={ () => setIsSelected( true ) }\n\t\t\t\t\tonBlur={ () => setIsSelected( false ) }\n\t\t\t\t\tcontentEditable\n\t\t\t\t\t{ ...controlProps }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BaseControl, useBaseControlProps } from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useRegistry } from '@wordpress/data';\nimport { useRef, useState } from '@wordpress/element';\nimport {\n\t__unstableUseRichText as useRichText,\n\tremoveFormat,\n} from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { useFormatTypes } from '../../rich-text/use-format-types';\nimport { getAllowedFormats } from '../../rich-text/utils';\nimport { useEventListeners } from '../../rich-text/event-listeners';\nimport FormatEdit from '../../rich-text/format-edit';\nimport { keyboardShortcutContext, inputEventContext } from '../../rich-text';\n\nexport default function RichTextControl( {\n\tdata,\n\tfield,\n\thideLabelFromVision,\n\tonChange,\n\tconfig = {},\n} ) {\n\tconst registry = useRegistry();\n\tconst attrValue = field.getValue( { item: data } );\n\tconst fieldConfig = field.config || {};\n\tconst { clientId } = config;\n\tconst updateAttributes = ( html ) => {\n\t\tconst mappedChanges = field.setValue( { item: data, value: html } );\n\t\tonChange( mappedChanges );\n\t};\n\tconst [ selection, setSelection ] = useState( {\n\t\tstart: undefined,\n\t\tend: undefined,\n\t} );\n\tconst [ isSelected, setIsSelected ] = useState( false );\n\tconst anchorRef = useRef();\n\tconst inputEvents = useRef( new Set() );\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tconst adjustedAllowedFormats = getAllowedFormats( {\n\t\tallowedFormats: fieldConfig?.allowedFormats,\n\t\tdisableFormats: fieldConfig?.disableFormats,\n\t} );\n\n\tconst {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t} = useFormatTypes( {\n\t\tclientId,\n\t\tidentifier: field.id,\n\t\tallowedFormats: adjustedAllowedFormats,\n\t\twithoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,\n\t\tdisableNoneEssentialFormatting: true,\n\t} );\n\n\tfunction addEditorOnlyFormats( value ) {\n\t\treturn valueHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction removeEditorOnlyFormats( value ) {\n\t\tformatTypes.forEach( ( formatType ) => {\n\t\t\t// Remove formats created by prepareEditableTree, because they are editor only.\n\t\t\tif ( formatType.__experimentalCreatePrepareEditableTree ) {\n\t\t\t\tvalue = removeFormat(\n\t\t\t\t\tvalue,\n\t\t\t\t\tformatType.name,\n\t\t\t\t\t0,\n\t\t\t\t\tvalue.text.length\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn value.formats;\n\t}\n\n\tfunction addInvisibleFormats( value ) {\n\t\treturn prepareHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction onFocus() {\n\t\tanchorRef.current?.focus();\n\t}\n\n\tconst {\n\t\tvalue,\n\t\tgetValue,\n\t\tonChange: onRichTextChange,\n\t\tref: richTextRef,\n\t} = useRichText( {\n\t\tvalue: attrValue,\n\t\tonChange( html, { __unstableFormats, __unstableText } ) {\n\t\t\tupdateAttributes( html );\n\t\t\tObject.values( changeHandlers ).forEach( ( changeHandler ) => {\n\t\t\t\tchangeHandler( __unstableFormats, __unstableText );\n\t\t\t} );\n\t\t},\n\t\tselectionStart: selection.start,\n\t\tselectionEnd: selection.end,\n\t\tonSelectionChange: ( start, end ) => setSelection( { start, end } ),\n\t\t__unstableIsSelected: isSelected,\n\t\tpreserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,\n\t\tplaceholder: fieldConfig?.placeholder,\n\t\t__unstableDisableFormats: fieldConfig?.disableFormats,\n\t\t__unstableDependencies: dependencies,\n\t\t__unstableAfterParse: addEditorOnlyFormats,\n\t\t__unstableBeforeSerialize: removeEditorOnlyFormats,\n\t\t__unstableAddInvisibleFormats: addInvisibleFormats,\n\t} );\n\n\tconst { baseControlProps, controlProps } = useBaseControlProps( {\n\t\thideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,\n\t\tlabel: field.label,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ isSelected && (\n\t\t\t\t<keyboardShortcutContext.Provider value={ keyboardShortcuts }>\n\t\t\t\t\t<inputEventContext.Provider value={ inputEvents }>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<FormatEdit\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ onRichTextChange }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tformatTypes={ formatTypes }\n\t\t\t\t\t\t\t\tforwardedRef={ anchorRef }\n\t\t\t\t\t\t\t\tisVisible={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</inputEventContext.Provider>\n\t\t\t\t</keyboardShortcutContext.Provider>\n\t\t\t) }\n\t\t\t<BaseControl __nextHasNoMarginBottom { ...baseControlProps }>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__rich-text\"\n\t\t\t\t\trole=\"textbox\"\n\t\t\t\t\taria-multiline={ ! fieldConfig?.disableLineBreaks }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\trichTextRef,\n\t\t\t\t\t\tuseEventListeners( {\n\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\tgetValue,\n\t\t\t\t\t\t\tonChange: onRichTextChange,\n\t\t\t\t\t\t\tformatTypes,\n\t\t\t\t\t\t\tselectionChange: setSelection,\n\t\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\t\tdisableFormats: fieldConfig?.disableFormats,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\ttagName: 'div',\n\t\t\t\t\t\t\tremoveEditorOnlyFormats,\n\t\t\t\t\t\t\tdisableLineBreaks: fieldConfig?.disableLineBreaks,\n\t\t\t\t\t\t\tkeyboardShortcuts,\n\t\t\t\t\t\t\tinputEvents,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t\tanchorRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\tonFocus={ () => setIsSelected( true ) }\n\t\t\t\t\tonBlur={ () => setIsSelected( false ) }\n\t\t\t\t\tcontentEditable\n\t\t\t\t\t{ ...controlProps }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["value"]
 }

package/build-module/components/dimensions-tool/width-height-tool.js

@@ -1,14 +1,10 @@
 // packages/block-editor/src/components/dimensions-tool/width-height-tool.js
-import styled from "@emotion/styled";
 import {
   __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalUnitControl as UnitControl
 } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SingleColumnToolsPanelItem = styled(ToolsPanelItem)`
-	grid-column: span 1;
-`;
 function WidthHeightTool({
   panelId,
   value = {},
@@ -30,8 +26,9 @@ function WidthHeightTool({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SingleColumnToolsPanelItem,
+      ToolsPanelItem,
       {
+        style: { gridColumn: "span 1" },
         label: __("Width"),
         isShownByDefault,
         hasValue: () => width !== "",
@@ -53,8 +50,9 @@ function WidthHeightTool({
       }
     ),
     /* @__PURE__ */ jsx(
-      SingleColumnToolsPanelItem,
+      ToolsPanelItem,
       {
+        style: { gridColumn: "span 1" },
         label: __("Height"),
         isShownByDefault,
         hasValue: () => height !== "",

package/build-module/components/dimensions-tool/width-height-tool.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/width-height-tool.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst SingleColumnToolsPanelItem = styled( ToolsPanelItem )`\n\tgrid-column: span 1;\n`;\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} WidthHeightToolValue\n * @property {string} [width]  Width CSS value.\n * @property {string} [height] Height CSS value.\n */\n\n/**\n * @callback WidthHeightToolOnChange\n * @param {WidthHeightToolValue} nextValue Next dimensions value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} WidthHeightToolProps\n * @property {string}                  [panelId]          ID of the panel that contains the controls.\n * @property {WidthHeightToolValue}    [value]            Current dimensions values.\n * @property {WidthHeightToolOnChange} [onChange]         Callback to update the dimensions values.\n * @property {WPUnitControlUnit[]}     [units]            Units options.\n * @property {boolean}                 [isShownByDefault] Whether the panel is shown by default.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {WidthHeightToolProps} props The component props.\n *\n * @return {import('react').ReactElement} The width and height tool.\n */\nexport default function WidthHeightTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\tunits,\n\tisShownByDefault = true,\n} ) {\n\t// null, undefined, and 'auto' all represent the default value.\n\tconst width = value.width === 'auto' ? '' : value.width ?? '';\n\tconst height = value.height === 'auto' ? '' : value.height ?? '';\n\n\tconst onDimensionChange = ( dimension ) => ( nextDimension ) => {\n\t\tconst nextValue = { ...value };\n\t\t// Empty strings or undefined may be passed and both represent removing the value.\n\t\tif ( ! nextDimension ) {\n\t\t\tdelete nextValue[ dimension ];\n\t\t} else {\n\t\t\tnextValue[ dimension ] = nextDimension;\n\t\t}\n\t\tonChange( nextValue );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SingleColumnToolsPanelItem\n\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\thasValue={ () => width !== '' }\n\t\t\t\tonDeselect={ onDimensionChange( 'width' ) }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tvalue={ width }\n\t\t\t\t\tonChange={ onDimensionChange( 'width' ) }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t</SingleColumnToolsPanelItem>\n\t\t\t<SingleColumnToolsPanelItem\n\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\thasValue={ () => height !== '' }\n\t\t\t\tonDeselect={ onDimensionChange( 'height' ) }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tvalue={ height }\n\t\t\t\t\tonChange={ onDimensionChange( 'height' ) }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t</SingleColumnToolsPanelItem>\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,YAAY;AAKnB;AAAA,EACC,gCAAgC;AAAA,EAChC,6BAA6B;AAAA,OACvB;AACP,SAAS,UAAU;AA6DjB,mBAQE,KARF;AA3DF,IAAM,6BAA6B,OAAQ,cAAe;AAAA;AAAA;AAoC3C,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,mBAAmB;AACpB,GAAI;AAEH,QAAM,QAAQ,MAAM,UAAU,SAAS,KAAK,MAAM,SAAS;AAC3D,QAAM,SAAS,MAAM,WAAW,SAAS,KAAK,MAAM,UAAU;AAE9D,QAAM,oBAAoB,CAAE,cAAe,CAAE,kBAAmB;AAC/D,UAAM,YAAY,EAAE,GAAG,MAAM;AAE7B,QAAK,CAAE,eAAgB;AACtB,aAAO,UAAW,SAAU;AAAA,IAC7B,OAAO;AACN,gBAAW,SAAU,IAAI;AAAA,IAC1B;AACA,aAAU,SAAU;AAAA,EACrB;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,OAAQ;AAAA,QACpB;AAAA,QACA,UAAW,MAAM,UAAU;AAAA,QAC3B,YAAa,kBAAmB,OAAQ;AAAA,QACxC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,OAAQ;AAAA,YACpB,aAAc,GAAI,MAAO;AAAA,YACzB,eAAc;AAAA,YACd;AAAA,YACA,KAAM;AAAA,YACN,OAAQ;AAAA,YACR,UAAW,kBAAmB,OAAQ;AAAA,YACtC,MAAK;AAAA;AAAA,QACN;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,QAAS;AAAA,QACrB;AAAA,QACA,UAAW,MAAM,WAAW;AAAA,QAC5B,YAAa,kBAAmB,QAAS;AAAA,QACzC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,QAAS;AAAA,YACrB,aAAc,GAAI,MAAO;AAAA,YACzB,eAAc;AAAA,YACd;AAAA,YACA,KAAM;AAAA,YACN,OAAQ;AAAA,YACR,UAAW,kBAAmB,QAAS;AAAA,YACvC,MAAK;AAAA;AAAA,QACN;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} WidthHeightToolValue\n * @property {string} [width]  Width CSS value.\n * @property {string} [height] Height CSS value.\n */\n\n/**\n * @callback WidthHeightToolOnChange\n * @param {WidthHeightToolValue} nextValue Next dimensions value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} WidthHeightToolProps\n * @property {string}                  [panelId]          ID of the panel that contains the controls.\n * @property {WidthHeightToolValue}    [value]            Current dimensions values.\n * @property {WidthHeightToolOnChange} [onChange]         Callback to update the dimensions values.\n * @property {WPUnitControlUnit[]}     [units]            Units options.\n * @property {boolean}                 [isShownByDefault] Whether the panel is shown by default.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {WidthHeightToolProps} props The component props.\n *\n * @return {import('react').ReactElement} The width and height tool.\n */\nexport default function WidthHeightTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\tunits,\n\tisShownByDefault = true,\n} ) {\n\t// null, undefined, and 'auto' all represent the default value.\n\tconst width = value.width === 'auto' ? '' : value.width ?? '';\n\tconst height = value.height === 'auto' ? '' : value.height ?? '';\n\n\tconst onDimensionChange = ( dimension ) => ( nextDimension ) => {\n\t\tconst nextValue = { ...value };\n\t\t// Empty strings or undefined may be passed and both represent removing the value.\n\t\tif ( ! nextDimension ) {\n\t\t\tdelete nextValue[ dimension ];\n\t\t} else {\n\t\t\tnextValue[ dimension ] = nextDimension;\n\t\t}\n\t\tonChange( nextValue );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ToolsPanelItem\n\t\t\t\tstyle={ { gridColumn: 'span 1' } }\n\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\thasValue={ () => width !== '' }\n\t\t\t\tonDeselect={ onDimensionChange( 'width' ) }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tvalue={ width }\n\t\t\t\t\tonChange={ onDimensionChange( 'width' ) }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t\t<ToolsPanelItem\n\t\t\t\tstyle={ { gridColumn: 'span 1' } }\n\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\thasValue={ () => height !== '' }\n\t\t\t\tonDeselect={ onDimensionChange( 'height' ) }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tvalue={ height }\n\t\t\t\t\tonChange={ onDimensionChange( 'height' ) }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,gCAAgC;AAAA,EAChC,6BAA6B;AAAA,OACvB;AACP,SAAS,UAAU;AAyDjB,mBASE,KATF;AAvBa,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,mBAAmB;AACpB,GAAI;AAEH,QAAM,QAAQ,MAAM,UAAU,SAAS,KAAK,MAAM,SAAS;AAC3D,QAAM,SAAS,MAAM,WAAW,SAAS,KAAK,MAAM,UAAU;AAE9D,QAAM,oBAAoB,CAAE,cAAe,CAAE,kBAAmB;AAC/D,UAAM,YAAY,EAAE,GAAG,MAAM;AAE7B,QAAK,CAAE,eAAgB;AACtB,aAAO,UAAW,SAAU;AAAA,IAC7B,OAAO;AACN,gBAAW,SAAU,IAAI;AAAA,IAC1B;AACA,aAAU,SAAU;AAAA,EACrB;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,EAAE,YAAY,SAAS;AAAA,QAC/B,OAAQ,GAAI,OAAQ;AAAA,QACpB;AAAA,QACA,UAAW,MAAM,UAAU;AAAA,QAC3B,YAAa,kBAAmB,OAAQ;AAAA,QACxC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,OAAQ;AAAA,YACpB,aAAc,GAAI,MAAO;AAAA,YACzB,eAAc;AAAA,YACd;AAAA,YACA,KAAM;AAAA,YACN,OAAQ;AAAA,YACR,UAAW,kBAAmB,OAAQ;AAAA,YACtC,MAAK;AAAA;AAAA,QACN;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,EAAE,YAAY,SAAS;AAAA,QAC/B,OAAQ,GAAI,QAAS;AAAA,QACrB;AAAA,QACA,UAAW,MAAM,WAAW;AAAA,QAC5B,YAAa,kBAAmB,QAAS;AAAA,QACzC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,QAAS;AAAA,YACrB,aAAc,GAAI,MAAO;AAAA,YACzB,eAAc;AAAA,YACd;AAAA,YACA,KAAM;AAAA,YACN,OAAQ;AAAA,YACR,UAAW,kBAAmB,QAAS;AAAA,YACvC,MAAK;AAAA;AAAA,QACN;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
   "names": []
 }

package/build-module/components/grid/grid-item-resizer.js

@@ -48,16 +48,20 @@ function GridItemResizerInner({
     const observer = new window.ResizeObserver(() => {
       const blockClientRect = blockElement.getBoundingClientRect();
       const rootBlockClientRect = rootBlockElement.getBoundingClientRect();
+      const topAvailable = blockClientRect.top > rootBlockClientRect.top;
+      const bottomAvailable = blockClientRect.bottom < rootBlockClientRect.bottom;
+      const leftAvailable = blockClientRect.left > rootBlockClientRect.left;
+      const rightAvailable = blockClientRect.right < rootBlockClientRect.right;
       setEnableSide({
-        top: blockClientRect.top > rootBlockClientRect.top,
-        bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
-        left: blockClientRect.left > rootBlockClientRect.left,
-        right: blockClientRect.right < rootBlockClientRect.right
+        top: !!isManualGrid ? topAvailable : !bottomAvailable && topAvailable,
+        bottom: bottomAvailable,
+        left: !!isManualGrid ? leftAvailable : !rightAvailable && leftAvailable,
+        right: rightAvailable
       });
     });
     observer.observe(blockElement);
     return () => observer.disconnect();
-  }, [blockElement, rootBlockElement]);
+  }, [blockElement, rootBlockElement, isManualGrid]);
   const justification = {
     right: "left",
     left: "right"

package/build-module/components/grid/grid-item-resizer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/grid/grid-item-resizer.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS, getGridTracks, getClosestTrack } from './utils';\n\nexport function GridItemResizer( {\n\tclientId,\n\tbounds,\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\tconst { isManualPlacement } = parentLayout;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t\tisManualGrid={\n\t\t\t\tisManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n\tisManualGrid,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: blockClientRect.top > rootBlockClientRect.top,\n\t\t\t\tbottom: blockClientRect.bottom < rootBlockClientRect.bottom,\n\t\t\t\tleft: blockClientRect.left > rootBlockClientRect.left,\n\t\t\t\tright: blockClientRect.right < rootBlockClientRect.right,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement ] );\n\n\tconst justification = {\n\t\tright: 'left',\n\t\tleft: 'right',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonPointerDown={ ( { target, pointerId } ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * Captures the pointer to avoid hiccups while dragging over objects\n\t\t\t\t\t * like iframes and ensures that the event to end the drag is\n\t\t\t\t\t * captured by the target (resize handle) whether or not it\u2019s under\n\t\t\t\t\t * the pointer.\n\t\t\t\t\t */\n\t\t\t\t\ttarget.setPointerCapture( pointerId );\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t\tcolumnStart: isManualGrid ? columnStart : undefined,\n\t\t\t\t\t\trowStart: isManualGrid ? rowStart : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ResizableBox } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport BlockPopoverCover from '../block-popover/cover';\nimport { getComputedCSS, getGridTracks, getClosestTrack } from './utils';\n\nexport function GridItemResizer( {\n\tclientId,\n\tbounds,\n\tonChange,\n\tparentLayout,\n} ) {\n\tconst blockElement = useBlockElement( clientId );\n\tconst rootBlockElement = blockElement?.parentElement;\n\tconst { isManualPlacement } = parentLayout;\n\n\tif ( ! blockElement || ! rootBlockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GridItemResizerInner\n\t\t\tclientId={ clientId }\n\t\t\tbounds={ bounds }\n\t\t\tblockElement={ blockElement }\n\t\t\trootBlockElement={ rootBlockElement }\n\t\t\tonChange={ onChange }\n\t\t\tisManualGrid={\n\t\t\t\tisManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction GridItemResizerInner( {\n\tclientId,\n\tbounds,\n\tblockElement,\n\trootBlockElement,\n\tonChange,\n\tisManualGrid,\n} ) {\n\tconst [ resizeDirection, setResizeDirection ] = useState( null );\n\tconst [ enableSide, setEnableSide ] = useState( {\n\t\ttop: false,\n\t\tbottom: false,\n\t\tleft: false,\n\t\tright: false,\n\t} );\n\n\tuseEffect( () => {\n\t\tconst observer = new window.ResizeObserver( () => {\n\t\t\tconst blockClientRect = blockElement.getBoundingClientRect();\n\t\t\tconst rootBlockClientRect =\n\t\t\t\trootBlockElement.getBoundingClientRect();\n\n\t\t\tconst topAvailable = blockClientRect.top > rootBlockClientRect.top;\n\t\t\tconst bottomAvailable =\n\t\t\t\tblockClientRect.bottom < rootBlockClientRect.bottom;\n\t\t\tconst leftAvailable =\n\t\t\t\tblockClientRect.left > rootBlockClientRect.left;\n\t\t\tconst rightAvailable =\n\t\t\t\tblockClientRect.right < rootBlockClientRect.right;\n\n\t\t\tsetEnableSide( {\n\t\t\t\ttop: !! isManualGrid\n\t\t\t\t\t? topAvailable\n\t\t\t\t\t: ! bottomAvailable && topAvailable,\n\t\t\t\tbottom: bottomAvailable,\n\t\t\t\tleft: !! isManualGrid\n\t\t\t\t\t? leftAvailable\n\t\t\t\t\t: ! rightAvailable && leftAvailable,\n\t\t\t\tright: rightAvailable,\n\t\t\t} );\n\t\t} );\n\t\tobserver.observe( blockElement );\n\t\treturn () => observer.disconnect();\n\t}, [ blockElement, rootBlockElement, isManualGrid ] );\n\n\tconst justification = {\n\t\tright: 'left',\n\t\tleft: 'right',\n\t};\n\n\tconst alignment = {\n\t\ttop: 'flex-end',\n\t\tbottom: 'flex-start',\n\t};\n\n\tconst styles = {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t\t...( justification[ resizeDirection ] && {\n\t\t\tjustifyContent: justification[ resizeDirection ],\n\t\t} ),\n\t\t...( alignment[ resizeDirection ] && {\n\t\t\talignItems: alignment[ resizeDirection ],\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<BlockPopoverCover\n\t\t\tclassName=\"block-editor-grid-item-resizer\"\n\t\t\tclientId={ clientId }\n\t\t\t__unstablePopoverSlot=\"__unstable-block-tools-after\"\n\t\t\tadditionalStyles={ styles }\n\t\t>\n\t\t\t<ResizableBox\n\t\t\t\tclassName=\"block-editor-grid-item-resizer__box\"\n\t\t\t\tsize={ {\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t} }\n\t\t\t\tenable={ {\n\t\t\t\t\tbottom: enableSide.bottom,\n\t\t\t\t\tbottomLeft: false,\n\t\t\t\t\tbottomRight: false,\n\t\t\t\t\tleft: enableSide.left,\n\t\t\t\t\tright: enableSide.right,\n\t\t\t\t\ttop: enableSide.top,\n\t\t\t\t\ttopLeft: false,\n\t\t\t\t\ttopRight: false,\n\t\t\t\t} }\n\t\t\t\tbounds={ bounds }\n\t\t\t\tboundsByDirection\n\t\t\t\tonPointerDown={ ( { target, pointerId } ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * Captures the pointer to avoid hiccups while dragging over objects\n\t\t\t\t\t * like iframes and ensures that the event to end the drag is\n\t\t\t\t\t * captured by the target (resize handle) whether or not it\u2019s under\n\t\t\t\t\t * the pointer.\n\t\t\t\t\t */\n\t\t\t\t\ttarget.setPointerCapture( pointerId );\n\t\t\t\t} }\n\t\t\t\tonResizeStart={ ( event, direction ) => {\n\t\t\t\t\t/*\n\t\t\t\t\t * The container justification and alignment need to be set\n\t\t\t\t\t * according to the direction the resizer is being dragged in,\n\t\t\t\t\t * so that it resizes in the right direction.\n\t\t\t\t\t */\n\t\t\t\t\tsetResizeDirection( direction );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, boxElement ) => {\n\t\t\t\t\tconst columnGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'column-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst rowGap = parseFloat(\n\t\t\t\t\t\tgetComputedCSS( rootBlockElement, 'row-gap' )\n\t\t\t\t\t);\n\t\t\t\t\tconst gridColumnTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-columns'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tcolumnGap\n\t\t\t\t\t);\n\t\t\t\t\tconst gridRowTracks = getGridTracks(\n\t\t\t\t\t\tgetComputedCSS(\n\t\t\t\t\t\t\trootBlockElement,\n\t\t\t\t\t\t\t'grid-template-rows'\n\t\t\t\t\t\t),\n\t\t\t\t\t\trowGap\n\t\t\t\t\t);\n\t\t\t\t\tconst rect = new window.DOMRect(\n\t\t\t\t\t\tblockElement.offsetLeft + boxElement.offsetLeft,\n\t\t\t\t\t\tblockElement.offsetTop + boxElement.offsetTop,\n\t\t\t\t\t\tboxElement.offsetWidth,\n\t\t\t\t\t\tboxElement.offsetHeight\n\t\t\t\t\t);\n\t\t\t\t\tconst columnStart =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.left ) + 1;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.top ) + 1;\n\t\t\t\t\tconst columnEnd =\n\t\t\t\t\t\tgetClosestTrack( gridColumnTracks, rect.right, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tconst rowEnd =\n\t\t\t\t\t\tgetClosestTrack( gridRowTracks, rect.bottom, 'end' ) +\n\t\t\t\t\t\t1;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tcolumnSpan: columnEnd - columnStart + 1,\n\t\t\t\t\t\trowSpan: rowEnd - rowStart + 1,\n\t\t\t\t\t\tcolumnStart: isManualGrid ? columnStart : undefined,\n\t\t\t\t\t\trowStart: isManualGrid ? rowStart : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</BlockPopoverCover>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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": []
 }