@wordpress/block-editor 13.1.0 → 13.3.0

package/build/components/block-tools/zoom-out-popover.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ZoomOutPopover;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _blockPopover = _interopRequireDefault(require("../block-popover"));
+var _useBlockToolbarPopoverProps = _interopRequireDefault(require("./use-block-toolbar-popover-props"));
+var _useSelectedBlockToolProps = _interopRequireDefault(require("./use-selected-block-tool-props"));
+var _zoomOutToolbar = _interopRequireDefault(require("./zoom-out-toolbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function ZoomOutPopover({
+  clientId,
+  __unstableContentRef
+}) {
+  const {
+    capturingClientId,
+    isInsertionPointVisible,
+    lastClientId,
+    rootClientId
+  } = (0, _useSelectedBlockToolProps.default)(clientId);
+  const popoverProps = (0, _useBlockToolbarPopoverProps.default)({
+    contentElement: __unstableContentRef?.current,
+    clientId
+  });
+
+  // Override some of the popover props for the zoom-out toolbar.
+  const props = {
+    ...popoverProps,
+    placement: 'left-start',
+    flip: false
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPopover.default, {
+    clientId: capturingClientId || clientId,
+    bottomClientId: lastClientId,
+    className: (0, _clsx.default)('zoom-out-toolbar-popover', {
+      'is-insertion-point-visible': isInsertionPointVisible
+    }),
+    resize: false,
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomOutToolbar.default, {
+      clientId: clientId,
+      rootClientId: rootClientId
+    })
+  });
+}
+//# sourceMappingURL=zoom-out-popover.js.map

package/build/components/block-tools/zoom-out-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_blockPopover","_useBlockToolbarPopoverProps","_useSelectedBlockToolProps","_zoomOutToolbar","_jsxRuntime","ZoomOutPopover","clientId","__unstableContentRef","capturingClientId","isInsertionPointVisible","lastClientId","rootClientId","useSelectedBlockToolProps","popoverProps","useBlockToolbarPopoverProps","contentElement","current","props","placement","flip","jsx","default","bottomClientId","className","clsx","resize","children"],"sources":["@wordpress/block-editor/src/components/block-tools/zoom-out-popover.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * Internal dependencies\n */\nimport BlockPopover from '../block-popover';\nimport useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';\nimport useSelectedBlockToolProps from './use-selected-block-tool-props';\nimport ZoomOutToolbar from './zoom-out-toolbar';\n\nexport default function ZoomOutPopover( { clientId, __unstableContentRef } ) {\n\tconst {\n\t\tcapturingClientId,\n\t\tisInsertionPointVisible,\n\t\tlastClientId,\n\t\trootClientId,\n\t} = useSelectedBlockToolProps( clientId );\n\n\tconst popoverProps = useBlockToolbarPopoverProps( {\n\t\tcontentElement: __unstableContentRef?.current,\n\t\tclientId,\n\t} );\n\n\t// Override some of the popover props for the zoom-out toolbar.\n\tconst props = {\n\t\t...popoverProps,\n\t\tplacement: 'left-start',\n\t\tflip: false,\n\t};\n\n\treturn (\n\t\t<BlockPopover\n\t\t\tclientId={ capturingClientId || clientId }\n\t\t\tbottomClientId={ lastClientId }\n\t\t\tclassName={ clsx( 'zoom-out-toolbar-popover', {\n\t\t\t\t'is-insertion-point-visible': isInsertionPointVisible,\n\t\t\t} ) }\n\t\t\tresize={ false }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<ZoomOutToolbar\n\t\t\t\tclientId={ clientId }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t/>\n\t\t</BlockPopover>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,aAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,4BAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,0BAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,eAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAgD,IAAAK,WAAA,GAAAL,OAAA;AAVhD;AACA;AACA;;AAEA;AACA;AACA;;AAMe,SAASM,cAAcA,CAAE;EAAEC,QAAQ;EAAEC;AAAqB,CAAC,EAAG;EAC5E,MAAM;IACLC,iBAAiB;IACjBC,uBAAuB;IACvBC,YAAY;IACZC;EACD,CAAC,GAAG,IAAAC,kCAAyB,EAAEN,QAAS,CAAC;EAEzC,MAAMO,YAAY,GAAG,IAAAC,oCAA2B,EAAE;IACjDC,cAAc,EAAER,oBAAoB,EAAES,OAAO;IAC7CV;EACD,CAAE,CAAC;;EAEH;EACA,MAAMW,KAAK,GAAG;IACb,GAAGJ,YAAY;IACfK,SAAS,EAAE,YAAY;IACvBC,IAAI,EAAE;EACP,CAAC;EAED,oBACC,IAAAf,WAAA,CAAAgB,GAAA,EAACpB,aAAA,CAAAqB,OAAY;IACZf,QAAQ,EAAGE,iBAAiB,IAAIF,QAAU;IAC1CgB,cAAc,EAAGZ,YAAc;IAC/Ba,SAAS,EAAG,IAAAC,aAAI,EAAE,0BAA0B,EAAE;MAC7C,4BAA4B,EAAEf;IAC/B,CAAE,CAAG;IACLgB,MAAM,EAAG,KAAO;IAAA,GACXR,KAAK;IAAAS,QAAA,eAEV,IAAAtB,WAAA,CAAAgB,GAAA,EAACjB,eAAA,CAAAkB,OAAc;MACdf,QAAQ,EAAGA,QAAU;MACrBK,YAAY,EAAGA;IAAc,CAC7B;EAAC,CACW,CAAC;AAEjB","ignoreList":[]}

package/build/components/block-tools/zoom-out-toolbar.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ZoomOutToolbar;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _icons = require("@wordpress/icons");
+var _components = require("@wordpress/components");
+var _data = require("@wordpress/data");
+var _blocks = require("@wordpress/blocks");
+var _i18n = require("@wordpress/i18n");
+var _store = require("../../store");
+var _blockDraggable = _interopRequireDefault(require("../block-draggable"));
+var _blockMover = _interopRequireDefault(require("../block-mover"));
+var _shuffle = _interopRequireDefault(require("../block-toolbar/shuffle"));
+var _navigableToolbar = _interopRequireDefault(require("../navigable-toolbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function ZoomOutToolbar({
+  clientId,
+  rootClientId
+}) {
+  const selected = (0, _data.useSelect)(select => {
+    const {
+      getBlock,
+      hasBlockMovingClientId,
+      getNextBlockClientId,
+      getPreviousBlockClientId,
+      canRemoveBlock,
+      canMoveBlock
+    } = select(_store.store);
+    const {
+      getBlockType
+    } = select(_blocks.store);
+    const {
+      name
+    } = getBlock(clientId);
+    const blockType = getBlockType(name);
+    const isBlockTemplatePart = blockType?.name === 'core/template-part';
+    let isNextBlockTemplatePart = false;
+    const nextClientId = getNextBlockClientId();
+    if (nextClientId) {
+      const {
+        name: nextName
+      } = getBlock(nextClientId);
+      const nextBlockType = getBlockType(nextName);
+      isNextBlockTemplatePart = nextBlockType?.name === 'core/template-part';
+    }
+    let isPrevBlockTemplatePart = false;
+    const prevClientId = getPreviousBlockClientId();
+    if (prevClientId) {
+      const {
+        name: prevName
+      } = getBlock(prevClientId);
+      const prevBlockType = getBlockType(prevName);
+      isPrevBlockTemplatePart = prevBlockType?.name === 'core/template-part';
+    }
+    return {
+      blockMovingMode: hasBlockMovingClientId(),
+      isBlockTemplatePart,
+      isNextBlockTemplatePart,
+      isPrevBlockTemplatePart,
+      canRemove: canRemoveBlock(clientId, rootClientId),
+      canMove: canMoveBlock(clientId, rootClientId)
+    };
+  }, [clientId, rootClientId]);
+  const {
+    blockMovingMode,
+    isBlockTemplatePart,
+    isNextBlockTemplatePart,
+    isPrevBlockTemplatePart,
+    canRemove,
+    canMove
+  } = selected;
+  const {
+    removeBlock
+  } = (0, _data.useDispatch)(_store.store);
+  const classNames = (0, _clsx.default)('zoom-out-toolbar', {
+    'is-block-moving-mode': !!blockMovingMode
+  });
+  const showBlockDraggable = canMove && !isBlockTemplatePart;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigableToolbar.default, {
+    className: classNames
+    /* translators: accessibility text for the block toolbar */,
+    "aria-label": (0, _i18n.__)('Block tools')
+    // The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
+    ,
+    variant: "unstyled",
+    orientation: "vertical",
+    children: [showBlockDraggable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockDraggable.default, {
+      clientIds: [clientId],
+      children: draggableProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        icon: _icons.dragHandle,
+        className: "block-selection-button_drag-handle zoom-out-toolbar-button",
+        "aria-hidden": "true",
+        label: (0, _i18n.__)('Drag'),
+        iconSize: 24,
+        size: "compact"
+        // Should not be able to tab to drag handle as this
+        // button can only be used with a pointer device.
+        ,
+        tabIndex: "-1",
+        ...draggableProps
+      })
+    }), !isBlockTemplatePart && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockMover.default, {
+      clientIds: [clientId],
+      hideDragHandle: true,
+      isBlockMoverUpButtonDisabled: isPrevBlockTemplatePart,
+      isBlockMoverDownButtonDisabled: isNextBlockTemplatePart,
+      iconSize: 24,
+      size: "compact"
+    }), canMove && canRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_shuffle.default, {
+      clientId: clientId,
+      as: _components.ToolbarButton
+    }), canRemove && !isBlockTemplatePart && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
+      className: "zoom-out-toolbar-button",
+      icon: _icons.trash,
+      label: "Delete",
+      onClick: () => {
+        removeBlock(clientId);
+      }
+    })]
+  });
+}
+//# sourceMappingURL=zoom-out-toolbar.js.map

package/build/components/block-tools/zoom-out-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_components","_data","_blocks","_i18n","_store","_blockDraggable","_blockMover","_shuffle","_navigableToolbar","_jsxRuntime","ZoomOutToolbar","clientId","rootClientId","selected","useSelect","select","getBlock","hasBlockMovingClientId","getNextBlockClientId","getPreviousBlockClientId","canRemoveBlock","canMoveBlock","blockEditorStore","getBlockType","blocksStore","name","blockType","isBlockTemplatePart","isNextBlockTemplatePart","nextClientId","nextName","nextBlockType","isPrevBlockTemplatePart","prevClientId","prevName","prevBlockType","blockMovingMode","canRemove","canMove","removeBlock","useDispatch","classNames","clsx","showBlockDraggable","jsxs","default","className","__","variant","orientation","children","jsx","clientIds","draggableProps","Button","icon","dragHandle","label","iconSize","size","tabIndex","hideDragHandle","isBlockMoverUpButtonDisabled","isBlockMoverDownButtonDisabled","as","ToolbarButton","trash","onClick"],"sources":["@wordpress/block-editor/src/components/block-tools/zoom-out-toolbar.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { dragHandle, trash } from '@wordpress/icons';\nimport { Button, ToolbarButton } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockDraggable from '../block-draggable';\nimport BlockMover from '../block-mover';\nimport Shuffle from '../block-toolbar/shuffle';\nimport NavigableToolbar from '../navigable-toolbar';\n\nexport default function ZoomOutToolbar( { clientId, rootClientId } ) {\n\tconst selected = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlock,\n\t\t\t\thasBlockMovingClientId,\n\t\t\t\tgetNextBlockClientId,\n\t\t\t\tgetPreviousBlockClientId,\n\t\t\t\tcanRemoveBlock,\n\t\t\t\tcanMoveBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst { name } = getBlock( clientId );\n\t\t\tconst blockType = getBlockType( name );\n\t\t\tconst isBlockTemplatePart =\n\t\t\t\tblockType?.name === 'core/template-part';\n\n\t\t\tlet isNextBlockTemplatePart = false;\n\t\t\tconst nextClientId = getNextBlockClientId();\n\t\t\tif ( nextClientId ) {\n\t\t\t\tconst { name: nextName } = getBlock( nextClientId );\n\t\t\t\tconst nextBlockType = getBlockType( nextName );\n\t\t\t\tisNextBlockTemplatePart =\n\t\t\t\t\tnextBlockType?.name === 'core/template-part';\n\t\t\t}\n\n\t\t\tlet isPrevBlockTemplatePart = false;\n\t\t\tconst prevClientId = getPreviousBlockClientId();\n\t\t\tif ( prevClientId ) {\n\t\t\t\tconst { name: prevName } = getBlock( prevClientId );\n\t\t\t\tconst prevBlockType = getBlockType( prevName );\n\t\t\t\tisPrevBlockTemplatePart =\n\t\t\t\t\tprevBlockType?.name === 'core/template-part';\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tblockMovingMode: hasBlockMovingClientId(),\n\t\t\t\tisBlockTemplatePart,\n\t\t\t\tisNextBlockTemplatePart,\n\t\t\t\tisPrevBlockTemplatePart,\n\t\t\t\tcanRemove: canRemoveBlock( clientId, rootClientId ),\n\t\t\t\tcanMove: canMoveBlock( clientId, rootClientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId, rootClientId ]\n\t);\n\n\tconst {\n\t\tblockMovingMode,\n\t\tisBlockTemplatePart,\n\t\tisNextBlockTemplatePart,\n\t\tisPrevBlockTemplatePart,\n\t\tcanRemove,\n\t\tcanMove,\n\t} = selected;\n\n\tconst { removeBlock } = useDispatch( blockEditorStore );\n\n\tconst classNames = clsx( 'zoom-out-toolbar', {\n\t\t'is-block-moving-mode': !! blockMovingMode,\n\t} );\n\n\tconst showBlockDraggable = canMove && ! isBlockTemplatePart;\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tclassName={ classNames }\n\t\t\t/* translators: accessibility text for the block toolbar */\n\t\t\taria-label={ __( 'Block tools' ) }\n\t\t\t// The variant is applied as \"toolbar\" when undefined, which is the black border style of the dropdown from the toolbar popover.\n\t\t\tvariant=\"unstyled\"\n\t\t\torientation=\"vertical\"\n\t\t>\n\t\t\t{ showBlockDraggable && (\n\t\t\t\t<BlockDraggable clientIds={ [ clientId ] }>\n\t\t\t\t\t{ ( draggableProps ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ dragHandle }\n\t\t\t\t\t\t\tclassName=\"block-selection-button_drag-handle zoom-out-toolbar-button\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tlabel={ __( 'Drag' ) }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t// Should not be able to tab to drag handle as this\n\t\t\t\t\t\t\t// button can only be used with a pointer device.\n\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t\t{ ...draggableProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</BlockDraggable>\n\t\t\t) }\n\t\t\t{ ! isBlockTemplatePart && (\n\t\t\t\t<BlockMover\n\t\t\t\t\tclientIds={ [ clientId ] }\n\t\t\t\t\thideDragHandle\n\t\t\t\t\tisBlockMoverUpButtonDisabled={ isPrevBlockTemplatePart }\n\t\t\t\t\tisBlockMoverDownButtonDisabled={ isNextBlockTemplatePart }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ canMove && canRemove && (\n\t\t\t\t<Shuffle clientId={ clientId } as={ ToolbarButton } />\n\t\t\t) }\n\t\t\t{ canRemove && ! isBlockTemplatePart && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"zoom-out-toolbar-button\"\n\t\t\t\t\ticon={ trash }\n\t\t\t\t\tlabel=\"Delete\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tremoveBlock( clientId );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAKA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,WAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,QAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,iBAAA,GAAAX,sBAAA,CAAAC,OAAA;AAAoD,IAAAW,WAAA,GAAAX,OAAA;AArBpD;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAOe,SAASY,cAAcA,CAAE;EAAEC,QAAQ;EAAEC;AAAa,CAAC,EAAG;EACpE,MAAMC,QAAQ,GAAG,IAAAC,eAAS,EACvBC,MAAM,IAAM;IACb,MAAM;MACLC,QAAQ;MACRC,sBAAsB;MACtBC,oBAAoB;MACpBC,wBAAwB;MACxBC,cAAc;MACdC;IACD,CAAC,GAAGN,MAAM,CAAEO,YAAiB,CAAC;IAC9B,MAAM;MAAEC;IAAa,CAAC,GAAGR,MAAM,CAAES,aAAY,CAAC;IAC9C,MAAM;MAAEC;IAAK,CAAC,GAAGT,QAAQ,CAAEL,QAAS,CAAC;IACrC,MAAMe,SAAS,GAAGH,YAAY,CAAEE,IAAK,CAAC;IACtC,MAAME,mBAAmB,GACxBD,SAAS,EAAED,IAAI,KAAK,oBAAoB;IAEzC,IAAIG,uBAAuB,GAAG,KAAK;IACnC,MAAMC,YAAY,GAAGX,oBAAoB,CAAC,CAAC;IAC3C,IAAKW,YAAY,EAAG;MACnB,MAAM;QAAEJ,IAAI,EAAEK;MAAS,CAAC,GAAGd,QAAQ,CAAEa,YAAa,CAAC;MACnD,MAAME,aAAa,GAAGR,YAAY,CAAEO,QAAS,CAAC;MAC9CF,uBAAuB,GACtBG,aAAa,EAAEN,IAAI,KAAK,oBAAoB;IAC9C;IAEA,IAAIO,uBAAuB,GAAG,KAAK;IACnC,MAAMC,YAAY,GAAGd,wBAAwB,CAAC,CAAC;IAC/C,IAAKc,YAAY,EAAG;MACnB,MAAM;QAAER,IAAI,EAAES;MAAS,CAAC,GAAGlB,QAAQ,CAAEiB,YAAa,CAAC;MACnD,MAAME,aAAa,GAAGZ,YAAY,CAAEW,QAAS,CAAC;MAC9CF,uBAAuB,GACtBG,aAAa,EAAEV,IAAI,KAAK,oBAAoB;IAC9C;IAEA,OAAO;MACNW,eAAe,EAAEnB,sBAAsB,CAAC,CAAC;MACzCU,mBAAmB;MACnBC,uBAAuB;MACvBI,uBAAuB;MACvBK,SAAS,EAAEjB,cAAc,CAAET,QAAQ,EAAEC,YAAa,CAAC;MACnD0B,OAAO,EAAEjB,YAAY,CAAEV,QAAQ,EAAEC,YAAa;IAC/C,CAAC;EACF,CAAC,EACD,CAAED,QAAQ,EAAEC,YAAY,CACzB,CAAC;EAED,MAAM;IACLwB,eAAe;IACfT,mBAAmB;IACnBC,uBAAuB;IACvBI,uBAAuB;IACvBK,SAAS;IACTC;EACD,CAAC,GAAGzB,QAAQ;EAEZ,MAAM;IAAE0B;EAAY,CAAC,GAAG,IAAAC,iBAAW,EAAElB,YAAiB,CAAC;EAEvD,MAAMmB,UAAU,GAAG,IAAAC,aAAI,EAAE,kBAAkB,EAAE;IAC5C,sBAAsB,EAAE,CAAC,CAAEN;EAC5B,CAAE,CAAC;EAEH,MAAMO,kBAAkB,GAAGL,OAAO,IAAI,CAAEX,mBAAmB;EAE3D,oBACC,IAAAlB,WAAA,CAAAmC,IAAA,EAACpC,iBAAA,CAAAqC,OAAgB;IAChBC,SAAS,EAAGL;IACZ;IACA,cAAa,IAAAM,QAAE,EAAE,aAAc;IAC/B;IAAA;IACAC,OAAO,EAAC,UAAU;IAClBC,WAAW,EAAC,UAAU;IAAAC,QAAA,GAEpBP,kBAAkB,iBACnB,IAAAlC,WAAA,CAAA0C,GAAA,EAAC9C,eAAA,CAAAwC,OAAc;MAACO,SAAS,EAAG,CAAEzC,QAAQ,CAAI;MAAAuC,QAAA,EACrCG,cAAc,iBACjB,IAAA5C,WAAA,CAAA0C,GAAA,EAACnD,WAAA,CAAAsD,MAAM;QACNC,IAAI,EAAGC,iBAAY;QACnBV,SAAS,EAAC,4DAA4D;QACtE,eAAY,MAAM;QAClBW,KAAK,EAAG,IAAAV,QAAE,EAAE,MAAO,CAAG;QACtBW,QAAQ,EAAG,EAAI;QACfC,IAAI,EAAC;QACL;QACA;QAAA;QACAC,QAAQ,EAAC,IAAI;QAAA,GACRP;MAAc,CACnB;IACD,CACc,CAChB,EACC,CAAE1B,mBAAmB,iBACtB,IAAAlB,WAAA,CAAA0C,GAAA,EAAC7C,WAAA,CAAAuC,OAAU;MACVO,SAAS,EAAG,CAAEzC,QAAQ,CAAI;MAC1BkD,cAAc;MACdC,4BAA4B,EAAG9B,uBAAyB;MACxD+B,8BAA8B,EAAGnC,uBAAyB;MAC1D8B,QAAQ,EAAG,EAAI;MACfC,IAAI,EAAC;IAAS,CACd,CACD,EACCrB,OAAO,IAAID,SAAS,iBACrB,IAAA5B,WAAA,CAAA0C,GAAA,EAAC5C,QAAA,CAAAsC,OAAO;MAAClC,QAAQ,EAAGA,QAAU;MAACqD,EAAE,EAAGC;IAAe,CAAE,CACrD,EACC5B,SAAS,IAAI,CAAEV,mBAAmB,iBACnC,IAAAlB,WAAA,CAAA0C,GAAA,EAACnD,WAAA,CAAAiE,aAAa;MACbnB,SAAS,EAAC,yBAAyB;MACnCS,IAAI,EAAGW,YAAO;MACdT,KAAK,EAAC,QAAQ;MACdU,OAAO,EAAGA,CAAA,KAAM;QACf5B,WAAW,CAAE5B,QAAS,CAAC;MACxB;IAAG,CACH,CACD;EAAA,CACgB,CAAC;AAErB","ignoreList":[]}

package/build/components/button-block-appender/index.js

@@ -29,12 +29,14 @@ function ButtonBlockAppender({
   rootClientId,
   className,
   onFocus,
-  tabIndex
+  tabIndex,
+  onSelect
 }, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserter.default, {
     position: "bottom center",
     rootClientId: rootClientId,
     __experimentalIsQuick: true,
+    onSelectOrClose: onSelect,
     renderToggle: ({
       onToggle,
       disabled,

package/build/components/button-block-appender/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_element","_i18n","_icons","_deprecated","_inserter","_jsxRuntime","ButtonBlockAppender","rootClientId","className","onFocus","tabIndex","ref","jsx","default","position","__experimentalIsQuick","renderToggle","onToggle","disabled","isOpen","blockTitle","hasSingleBlockType","label","sprintf","_x","isToggleButton","inserterButton","jsxs","Button","clsx","onClick","undefined","children","VisuallyHidden","as","Icon","icon","plus","Tooltip","text","isAppender","ButtonBlockerAppender","exports","forwardRef","props","deprecated","alternative","since","_default"],"sources":["@wordpress/block-editor/src/components/button-block-appender/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Tooltip, VisuallyHidden } from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport { Icon, plus } from '@wordpress/icons';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\n\nfunction ButtonBlockAppender(\n\t{ rootClientId, className, onFocus, tabIndex },\n\tref\n) {\n\treturn (\n\t\t<Inserter\n\t\t\tposition=\"bottom center\"\n\t\t\trootClientId={ rootClientId }\n\t\t\t__experimentalIsQuick\n\t\t\trenderToggle={ ( {\n\t\t\t\tonToggle,\n\t\t\t\tdisabled,\n\t\t\t\tisOpen,\n\t\t\t\tblockTitle,\n\t\t\t\thasSingleBlockType,\n\t\t\t} ) => {\n\t\t\t\tlet label;\n\t\t\t\tif ( hasSingleBlockType ) {\n\t\t\t\t\tlabel = sprintf(\n\t\t\t\t\t\t// translators: %s: the name of the block when there is only one\n\t\t\t\t\t\t_x( 'Add %s', 'directly add the only allowed block' ),\n\t\t\t\t\t\tblockTitle\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tlabel = _x(\n\t\t\t\t\t\t'Add block',\n\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst isToggleButton = ! hasSingleBlockType;\n\n\t\t\t\tlet inserterButton = (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'block-editor-button-block-appender'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup={ isToggleButton ? 'true' : undefined }\n\t\t\t\t\t\taria-expanded={ isToggleButton ? isOpen : undefined }\n\t\t\t\t\t\t// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.\n\t\t\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! hasSingleBlockType && (\n\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">{ label }</VisuallyHidden>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Icon icon={ plus } />\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\n\t\t\t\tif ( isToggleButton || hasSingleBlockType ) {\n\t\t\t\t\tinserterButton = (\n\t\t\t\t\t\t<Tooltip text={ label }>{ inserterButton }</Tooltip>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn inserterButton;\n\t\t\t} }\n\t\t\tisAppender\n\t\t/>\n\t);\n}\n\n/**\n * Use `ButtonBlockAppender` instead.\n *\n * @deprecated\n */\nexport const ButtonBlockerAppender = forwardRef( ( props, ref ) => {\n\tdeprecated( `wp.blockEditor.ButtonBlockerAppender`, {\n\t\talternative: 'wp.blockEditor.ButtonBlockAppender',\n\t\tsince: '5.9',\n\t} );\n\n\treturn ButtonBlockAppender( props, ref );\n} );\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md\n */\nexport default forwardRef( ButtonBlockAppender );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_element","_i18n","_icons","_deprecated","_inserter","_jsxRuntime","ButtonBlockAppender","rootClientId","className","onFocus","tabIndex","onSelect","ref","jsx","default","position","__experimentalIsQuick","onSelectOrClose","renderToggle","onToggle","disabled","isOpen","blockTitle","hasSingleBlockType","label","sprintf","_x","isToggleButton","inserterButton","jsxs","Button","clsx","onClick","undefined","children","VisuallyHidden","as","Icon","icon","plus","Tooltip","text","isAppender","ButtonBlockerAppender","exports","forwardRef","props","deprecated","alternative","since","_default"],"sources":["@wordpress/block-editor/src/components/button-block-appender/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Tooltip, VisuallyHidden } from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport { Icon, plus } from '@wordpress/icons';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\n\nfunction ButtonBlockAppender(\n\t{ rootClientId, className, onFocus, tabIndex, onSelect },\n\tref\n) {\n\treturn (\n\t\t<Inserter\n\t\t\tposition=\"bottom center\"\n\t\t\trootClientId={ rootClientId }\n\t\t\t__experimentalIsQuick\n\t\t\tonSelectOrClose={ onSelect }\n\t\t\trenderToggle={ ( {\n\t\t\t\tonToggle,\n\t\t\t\tdisabled,\n\t\t\t\tisOpen,\n\t\t\t\tblockTitle,\n\t\t\t\thasSingleBlockType,\n\t\t\t} ) => {\n\t\t\t\tlet label;\n\t\t\t\tif ( hasSingleBlockType ) {\n\t\t\t\t\tlabel = sprintf(\n\t\t\t\t\t\t// translators: %s: the name of the block when there is only one\n\t\t\t\t\t\t_x( 'Add %s', 'directly add the only allowed block' ),\n\t\t\t\t\t\tblockTitle\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tlabel = _x(\n\t\t\t\t\t\t'Add block',\n\t\t\t\t\t\t'Generic label for block inserter button'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst isToggleButton = ! hasSingleBlockType;\n\n\t\t\t\tlet inserterButton = (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'block-editor-button-block-appender'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup={ isToggleButton ? 'true' : undefined }\n\t\t\t\t\t\taria-expanded={ isToggleButton ? isOpen : undefined }\n\t\t\t\t\t\t// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.\n\t\t\t\t\t\t// eslint-disable-next-line no-restricted-syntax\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! hasSingleBlockType && (\n\t\t\t\t\t\t\t<VisuallyHidden as=\"span\">{ label }</VisuallyHidden>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Icon icon={ plus } />\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\n\t\t\t\tif ( isToggleButton || hasSingleBlockType ) {\n\t\t\t\t\tinserterButton = (\n\t\t\t\t\t\t<Tooltip text={ label }>{ inserterButton }</Tooltip>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn inserterButton;\n\t\t\t} }\n\t\t\tisAppender\n\t\t/>\n\t);\n}\n\n/**\n * Use `ButtonBlockAppender` instead.\n *\n * @deprecated\n */\nexport const ButtonBlockerAppender = forwardRef( ( props, ref ) => {\n\tdeprecated( `wp.blockEditor.ButtonBlockerAppender`, {\n\t\talternative: 'wp.blockEditor.ButtonBlockAppender',\n\t\tsince: '5.9',\n\t} );\n\n\treturn ButtonBlockAppender( props, ref );\n} );\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/button-block-appender/README.md\n */\nexport default forwardRef( ButtonBlockAppender );\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;AAKA,IAAAM,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AAAmC,IAAAO,WAAA,GAAAP,OAAA;AAjBnC;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAGA,SAASQ,mBAAmBA,CAC3B;EAAEC,YAAY;EAAEC,SAAS;EAAEC,OAAO;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EACxDC,GAAG,EACF;EACD,oBACC,IAAAP,WAAA,CAAAQ,GAAA,EAACT,SAAA,CAAAU,OAAQ;IACRC,QAAQ,EAAC,eAAe;IACxBR,YAAY,EAAGA,YAAc;IAC7BS,qBAAqB;IACrBC,eAAe,EAAGN,QAAU;IAC5BO,YAAY,EAAGA,CAAE;MAChBC,QAAQ;MACRC,QAAQ;MACRC,MAAM;MACNC,UAAU;MACVC;IACD,CAAC,KAAM;MACN,IAAIC,KAAK;MACT,IAAKD,kBAAkB,EAAG;QACzBC,KAAK,GAAG,IAAAC,aAAO;QACd;QACA,IAAAC,QAAE,EAAE,QAAQ,EAAE,qCAAsC,CAAC,EACrDJ,UACD,CAAC;MACF,CAAC,MAAM;QACNE,KAAK,GAAG,IAAAE,QAAE,EACT,WAAW,EACX,yCACD,CAAC;MACF;MACA,MAAMC,cAAc,GAAG,CAAEJ,kBAAkB;MAE3C,IAAIK,cAAc,gBACjB,IAAAvB,WAAA,CAAAwB,IAAA,EAAC9B,WAAA,CAAA+B,MAAM;QACNlB,GAAG,EAAGA,GAAK;QACXH,OAAO,EAAGA,OAAS;QACnBC,QAAQ,EAAGA,QAAU;QACrBF,SAAS,EAAG,IAAAuB,aAAI,EACfvB,SAAS,EACT,oCACD,CAAG;QACHwB,OAAO,EAAGb,QAAU;QACpB,iBAAgBQ,cAAc,GAAG,MAAM,GAAGM,SAAW;QACrD,iBAAgBN,cAAc,GAAGN,MAAM,GAAGY;QAC1C;QACA;QAAA;QACAb,QAAQ,EAAGA,QAAU;QACrBI,KAAK,EAAGA,KAAO;QAAAU,QAAA,GAEb,CAAEX,kBAAkB,iBACrB,IAAAlB,WAAA,CAAAQ,GAAA,EAACd,WAAA,CAAAoC,cAAc;UAACC,EAAE,EAAC,MAAM;UAAAF,QAAA,EAAGV;QAAK,CAAkB,CACnD,eACD,IAAAnB,WAAA,CAAAQ,GAAA,EAACX,MAAA,CAAAmC,IAAI;UAACC,IAAI,EAAGC;QAAM,CAAE,CAAC;MAAA,CACf,CACR;MAED,IAAKZ,cAAc,IAAIJ,kBAAkB,EAAG;QAC3CK,cAAc,gBACb,IAAAvB,WAAA,CAAAQ,GAAA,EAACd,WAAA,CAAAyC,OAAO;UAACC,IAAI,EAAGjB,KAAO;UAAAU,QAAA,EAAGN;QAAc,CAAW,CACnD;MACF;MACA,OAAOA,cAAc;IACtB,CAAG;IACHc,UAAU;EAAA,CACV,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACO,MAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,mBAAU,EAAE,CAAEC,KAAK,EAAElC,GAAG,KAAM;EAClE,IAAAmC,mBAAU,EAAG,sCAAqC,EAAE;IACnDC,WAAW,EAAE,oCAAoC;IACjDC,KAAK,EAAE;EACR,CAAE,CAAC;EAEH,OAAO3C,mBAAmB,CAAEwC,KAAK,EAAElC,GAAI,CAAC;AACzC,CAAE,CAAC;;AAEH;AACA;AACA;AAFA,IAAAsC,QAAA,GAAAN,OAAA,CAAA9B,OAAA,GAGe,IAAA+B,mBAAU,EAAEvC,mBAAoB,CAAC","ignoreList":[]}

package/build/components/child-layout-control/index.js

@@ -8,11 +8,18 @@ exports.default = ChildLayoutControl;
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
+var _data = require("@wordpress/data");
+var _useGetNumberOfBlocksBeforeCell = require("../grid/use-get-number-of-blocks-before-cell");
+var _store = require("../../store");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+
 function helpText(selfStretch, parentLayout) {
   const {
     orientation = 'horizontal'
@@ -47,22 +54,46 @@ function ChildLayoutControl({
   isShownByDefault,
   panelId
 }) {
-  const {
-    selfStretch,
-    flexSize,
-    columnStart,
-    rowStart,
-    columnSpan,
-    rowSpan
-  } = childLayout;
   const {
     type: parentType,
     default: {
       type: defaultParentType = 'default'
-    } = {},
-    orientation = 'horizontal'
+    } = {}
   } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
   const parentLayoutType = parentType || defaultParentType;
+  if (parentLayoutType === 'flex') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexControls, {
+      childLayout: childLayout,
+      onChange: onChange,
+      parentLayout: parentLayout,
+      isShownByDefault: isShownByDefault,
+      panelId: panelId
+    });
+  } else if (parentLayoutType === 'grid') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridControls, {
+      childLayout: childLayout,
+      onChange: onChange,
+      parentLayout: parentLayout,
+      isShownByDefault: isShownByDefault,
+      panelId: panelId
+    });
+  }
+  return null;
+}
+function FlexControls({
+  childLayout,
+  onChange,
+  parentLayout,
+  isShownByDefault,
+  panelId
+}) {
+  const {
+    selfStretch,
+    flexSize
+  } = childLayout;
+  const {
+    orientation = 'horizontal'
+  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
   const hasFlexValue = () => !!selfStretch;
   const flexResetLabel = orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
   const resetFlex = () => {
@@ -71,6 +102,87 @@ function ChildLayoutControl({
       flexSize: undefined
     });
   };
+  (0, _element.useEffect)(() => {
+    if (selfStretch === 'fixed' && !flexSize) {
+      onChange({
+        ...childLayout,
+        selfStretch: 'fit'
+      });
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    as: _components.__experimentalToolsPanelItem,
+    spacing: 2,
+    hasValue: hasFlexValue,
+    label: flexResetLabel,
+    onDeselect: resetFlex,
+    isShownByDefault: isShownByDefault,
+    panelId: panelId,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
+      __nextHasNoMarginBottom: true,
+      size: "__unstable-large",
+      label: childLayoutOrientation(parentLayout),
+      value: selfStretch || 'fit',
+      help: helpText(selfStretch, parentLayout),
+      onChange: value => {
+        const newFlexSize = value !== 'fixed' ? null : flexSize;
+        onChange({
+          selfStretch: value,
+          flexSize: newFlexSize
+        });
+      },
+      isBlock: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        value: "fit",
+        label: (0, _i18n._x)('Fit', 'Intrinsic block width in flex layout')
+      }, "fit"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        value: "fill",
+        label: (0, _i18n._x)('Grow', 'Block with expanding width in flex layout')
+      }, "fill"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+        value: "fixed",
+        label: (0, _i18n._x)('Fixed', 'Block with fixed width in flex layout')
+      }, "fixed")]
+    }), selfStretch === 'fixed' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+      size: "__unstable-large",
+      onChange: value => {
+        onChange({
+          selfStretch,
+          flexSize: value
+        });
+      },
+      value: flexSize
+    })]
+  });
+}
+function childLayoutOrientation(parentLayout) {
+  const {
+    orientation = 'horizontal'
+  } = parentLayout;
+  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
+}
+function GridControls({
+  childLayout,
+  onChange,
+  parentLayout,
+  isShownByDefault,
+  panelId
+}) {
+  const {
+    columnStart,
+    rowStart,
+    columnSpan,
+    rowSpan
+  } = childLayout;
+  const {
+    columnCount = 3,
+    rowCount
+  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
+  const rootClientId = (0, _data.useSelect)(select => select(_store.store).getBlockRootClientId(panelId));
+  const {
+    moveBlocksToPosition,
+    __unstableMarkNextChangeAsNotPersistent
+  } = (0, _data.useDispatch)(_store.store);
+  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(rootClientId, columnCount);
   const hasStartValue = () => !!columnStart || !!rowStart;
   const hasSpanValue = () => !!columnSpan || !!rowSpan;
   const resetGridStarts = () => {
@@ -85,155 +197,109 @@ function ChildLayoutControl({
       rowSpan: undefined
     });
   };
-  (0, _element.useEffect)(() => {
-    if (selfStretch === 'fixed' && !flexSize) {
-      onChange({
-        ...childLayout,
-        selfStretch: 'fit'
-      });
-    }
-  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [parentLayoutType === 'flex' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
       as: _components.__experimentalToolsPanelItem,
-      spacing: 2,
-      hasValue: hasFlexValue,
-      label: flexResetLabel,
-      onDeselect: resetFlex,
+      hasValue: hasSpanValue,
+      label: (0, _i18n.__)('Grid span'),
+      onDeselect: resetGridSpans,
       isShownByDefault: isShownByDefault,
       panelId: panelId,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
-        __nextHasNoMarginBottom: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
         size: "__unstable-large",
-        label: childLayoutOrientation(parentLayout),
-        value: selfStretch || 'fit',
-        help: helpText(selfStretch, parentLayout),
+        label: (0, _i18n.__)('Column span'),
+        type: "number",
         onChange: value => {
-          const newFlexSize = value !== 'fixed' ? null : flexSize;
+          // Don't allow unsetting.
+          const newColumnSpan = value === '' ? 1 : parseInt(value, 10);
           onChange({
-            selfStretch: value,
-            flexSize: newFlexSize
+            columnStart,
+            rowStart,
+            rowSpan,
+            columnSpan: newColumnSpan
           });
         },
-        isBlock: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-          value: "fit",
-          label: (0, _i18n.__)('Fit')
-        }, "fit"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-          value: "fill",
-          label: (0, _i18n.__)('Fill')
-        }, "fill"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-          value: "fixed",
-          label: (0, _i18n.__)('Fixed')
-        }, "fixed")]
-      }), selfStretch === 'fixed' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+        value: columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1,
+        min: 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
         size: "__unstable-large",
+        label: (0, _i18n.__)('Row span'),
+        type: "number",
         onChange: value => {
+          // Don't allow unsetting.
+          const newRowSpan = value === '' ? 1 : parseInt(value, 10);
           onChange({
-            selfStretch,
-            flexSize: value
+            columnStart,
+            rowStart,
+            columnSpan,
+            rowSpan: newRowSpan
           });
         },
-        value: flexSize
+        value: rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1,
+        min: 1
       })]
-    }), parentLayoutType === 'grid' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
-        as: _components.__experimentalToolsPanelItem,
-        hasValue: hasSpanValue,
-        label: (0, _i18n.__)('Grid span'),
-        onDeselect: resetGridSpans,
-        isShownByDefault: isShownByDefault,
-        panelId: panelId,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
+    }), window.__experimentalEnableGridInteractivity && columnCount &&
+    /*#__PURE__*/
+    // Use Flex with an explicit width on the FlexItem instead of HStack to
+    // work around an issue in webkit where inputs with a max attribute are
+    // sized incorrectly.
+    (0, _jsxRuntime.jsxs)(_components.Flex, {
+      as: _components.__experimentalToolsPanelItem,
+      hasValue: hasStartValue,
+      label: (0, _i18n.__)('Grid placement'),
+      onDeselect: resetGridStarts,
+      isShownByDefault: false,
+      panelId: panelId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        style: {
+          width: '50%'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
           size: "__unstable-large",
-          label: (0, _i18n.__)('Column span'),
+          label: (0, _i18n.__)('Column'),
           type: "number",
           onChange: value => {
+            // Don't allow unsetting.
+            const newColumnStart = value === '' ? 1 : parseInt(value, 10);
             onChange({
-              columnStart,
+              columnStart: newColumnStart,
               rowStart,
-              rowSpan,
-              columnSpan: value
+              columnSpan,
+              rowSpan
             });
+            __unstableMarkNextChangeAsNotPersistent();
+            moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(newColumnStart, rowStart));
           },
-          value: columnSpan,
-          min: 1
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
+          value: columnStart !== null && columnStart !== void 0 ? columnStart : 1,
+          min: 1,
+          max: columnCount ? columnCount - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        style: {
+          width: '50%'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
           size: "__unstable-large",
-          label: (0, _i18n.__)('Row span'),
+          label: (0, _i18n.__)('Row'),
           type: "number",
           onChange: value => {
+            // Don't allow unsetting.
+            const newRowStart = value === '' ? 1 : parseInt(value, 10);
             onChange({
               columnStart,
-              rowStart,
+              rowStart: newRowStart,
               columnSpan,
-              rowSpan: value
+              rowSpan
             });
+            __unstableMarkNextChangeAsNotPersistent();
+            moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(columnStart, newRowStart));
           },
-          value: rowSpan,
-          min: 1
-        })]
-      }), window.__experimentalEnableGridInteractivity &&
-      /*#__PURE__*/
-      // Use Flex with an explicit width on the FlexItem instead of HStack to
-      // work around an issue in webkit where inputs with a max attribute are
-      // sized incorrectly.
-      (0, _jsxRuntime.jsxs)(_components.Flex, {
-        as: _components.__experimentalToolsPanelItem,
-        hasValue: hasStartValue,
-        label: (0, _i18n.__)('Grid placement'),
-        onDeselect: resetGridStarts,
-        isShownByDefault: false,
-        panelId: panelId,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          style: {
-            width: '50%'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-            size: "__unstable-large",
-            label: (0, _i18n.__)('Column'),
-            type: "number",
-            onChange: value => {
-              onChange({
-                columnStart: value,
-                rowStart,
-                columnSpan,
-                rowSpan
-              });
-            },
-            value: columnStart,
-            min: 1,
-            max: parentLayout?.columnCount ? parentLayout.columnCount - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
-          style: {
-            width: '50%'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
-            size: "__unstable-large",
-            label: (0, _i18n.__)('Row'),
-            type: "number",
-            onChange: value => {
-              onChange({
-                columnStart,
-                rowStart: value,
-                columnSpan,
-                rowSpan
-              });
-            },
-            value: rowStart,
-            min: 1,
-            max: parentLayout?.rowCount ? parentLayout.rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
-          })
-        })]
+          value: rowStart !== null && rowStart !== void 0 ? rowStart : 1,
+          min: 1,
+          max: rowCount ? rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
+        })
       })]
     })]
   });
 }
-function childLayoutOrientation(parentLayout) {
-  const {
-    orientation = 'horizontal'
-  } = parentLayout;
-  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
-}
 //# sourceMappingURL=index.js.map