npm - @wordpress/block-editor - Versions diffs - 15.21.0 → 15.22.1-next.v.202606191442.0 - Mend

@wordpress/block-editor 15.21.0 → 15.22.1-next.v.202606191442.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (554) hide show

package/build/components/block-popover/use-popover-scroll.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-popover/use-popover-scroll.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { getScrollContainer } from '@wordpress/dom';\n\nconst scrollContainerCache = new WeakMap();\n\n/**\n * Allow scrolling \"through\" popovers over the canvas. This is only called for\n * as long as the pointer is over a popover. Do not use React events because it\n * will bubble through portals.\n *\n * @param {Object} contentRef\n */\nfunction usePopoverScroll( contentRef ) {\n\tconst effect = useRefEffect(\n\t\t( node ) => {\n\t\t\tfunction onWheel( event ) {\n\t\t\t\tconst { deltaX, deltaY, target } = event;\n\t\t\t\tconst contentEl = contentRef.current;\n\t\t\t\tlet scrollContainer = scrollContainerCache.get( contentEl );\n\t\t\t\tif ( ! scrollContainer ) {\n\t\t\t\t\tscrollContainer = getScrollContainer( contentEl );\n\t\t\t\t\tscrollContainerCache.set( contentEl, scrollContainer );\n\t\t\t\t}\n\t\t\t\t// Finds a scrollable ancestor of the event\u2019s target. It's not cached because the\n\t\t\t\t// it may not remain scrollable due to popover position changes. The cache is also\n\t\t\t\t// less likely to be utilized because the target may be different every event.\n\t\t\t\tconst eventScrollContainer = getScrollContainer( target );\n\t\t\t\t// Scrolls \u201Cthrough\u201D the popover only if another contained scrollable area isn\u2019t\n\t\t\t\t// in front of it. This is to avoid scrolling both containers simultaneously.\n\t\t\t\tif ( ! node.contains( eventScrollContainer ) ) {\n\t\t\t\t\tscrollContainer.scrollBy( deltaX, deltaY );\n\t\t\t\t}\n\t\t\t}\n\t\t\t// Tell the browser that we do not call event.preventDefault\n\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners\n\t\t\tconst options = { passive: true };\n\t\t\tnode.addEventListener( 'wheel', onWheel, options );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'wheel', onWheel, options );\n\t\t\t};\n\t\t},\n\t\t[ contentRef ]\n\t);\n\treturn contentRef ? effect : null;\n}\n\nexport default usePopoverScroll;\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { getScrollContainer } from '@wordpress/dom';\n\nconst scrollContainerCache = new WeakMap();\n\n/**\n * Allow scrolling \"through\" popovers over the canvas. This is only called for\n * as long as the pointer is over a popover. Do not use React events because it\n * will bubble through portals.\n *\n * @param {Object} contentRef\n */\nfunction usePopoverScroll( contentRef ) {\n\tconst effect = useRefEffect(\n\t\t( node ) => {\n\t\t\tfunction onWheel( event ) {\n\t\t\t\tconst { deltaX, deltaY, target } = event;\n\t\t\t\tconst contentEl = contentRef.current;\n\t\t\t\tlet scrollContainer = scrollContainerCache.get( contentEl );\n\t\t\t\tif ( ! scrollContainer ) {\n\t\t\t\t\tscrollContainer = getScrollContainer( contentEl );\n\t\t\t\t\tscrollContainerCache.set( contentEl, scrollContainer );\n\t\t\t\t}\n\t\t\t\t// Finds a scrollable ancestor of the event’s target. It's not cached because the\n\t\t\t\t// it may not remain scrollable due to popover position changes. The cache is also\n\t\t\t\t// less likely to be utilized because the target may be different every event.\n\t\t\t\tconst eventScrollContainer = getScrollContainer( target );\n\t\t\t\t// Scrolls “through” the popover only if another contained scrollable area isn’t\n\t\t\t\t// in front of it. This is to avoid scrolling both containers simultaneously.\n\t\t\t\tif ( ! node.contains( eventScrollContainer ) ) {\n\t\t\t\t\tscrollContainer.scrollBy( deltaX, deltaY );\n\t\t\t\t}\n\t\t\t}\n\t\t\t// Tell the browser that we do not call event.preventDefault\n\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners\n\t\t\tconst options = { passive: true };\n\t\t\tnode.addEventListener( 'wheel', onWheel, options );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'wheel', onWheel, options );\n\t\t\t};\n\t\t},\n\t\t[ contentRef ]\n\t);\n\treturn contentRef ? effect : null;\n}\n\nexport default usePopoverScroll;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,iBAAmC;AAEnC,IAAM,uBAAuB,oBAAI,QAAQ;AASzC,SAAS,iBAAkB,YAAa;AACvC,QAAM,aAAS;AAAA,IACd,CAAE,SAAU;AACX,eAAS,QAAS,OAAQ;AACzB,cAAM,EAAE,QAAQ,QAAQ,OAAO,IAAI;AACnC,cAAM,YAAY,WAAW;AAC7B,YAAI,kBAAkB,qBAAqB,IAAK,SAAU;AAC1D,YAAK,CAAE,iBAAkB;AACxB,gCAAkB,+BAAoB,SAAU;AAChD,+BAAqB,IAAK,WAAW,eAAgB;AAAA,QACtD;AAIA,cAAM,2BAAuB,+BAAoB,MAAO;AAGxD,YAAK,CAAE,KAAK,SAAU,oBAAqB,GAAI;AAC9C,0BAAgB,SAAU,QAAQ,MAAO;AAAA,QAC1C;AAAA,MACD;AAGA,YAAM,UAAU,EAAE,SAAS,KAAK;AAChC,WAAK,iBAAkB,SAAS,SAAS,OAAQ;AACjD,aAAO,MAAM;AACZ,aAAK,oBAAqB,SAAS,SAAS,OAAQ;AAAA,MACrD;AAAA,IACD;AAAA,IACA,CAAE,UAAW;AAAA,EACd;AACA,SAAO,aAAa,SAAS;AAC9B;AAEA,IAAO,6BAAQ;",
   "names": []
 }

package/build/components/block-quick-navigation/index.cjs CHANGED Viewed

@@ -41,6 +41,7 @@ var import_store = require("../../store/index.cjs");
 var import_block_icon = __toESM(require("../block-icon/index.cjs"));
 var import_use_block_display_information = __toESM(require("../use-block-display-information/index.cjs"));
 var import_use_block_display_title = __toESM(require("../block-title/use-block-display-title.cjs"));
+var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function BlockQuickNavigation({
   clientIds,
@@ -69,14 +70,15 @@ function BlockQuickNavigationItem({
   hasListViewTab
 }) {
   const blockInformation = (0, import_use_block_display_information.default)(clientId);
-  const { isSelected, childBlocks, hasListViewSupport, blockName } = (0, import_data.useSelect)(
+  const { isSelected, childBlocks, shouldRenderListView, blockName } = (0, import_data.useSelect)(
     (select) => {
       const {
         isBlockSelected,
         hasSelectedInnerBlock,
         getBlockOrder,
-        getBlockName
-      } = select(import_store.store);
+        getBlockName,
+        shouldRenderBlockListView
+      } = (0, import_lock_unlock.unlock)(select(import_store.store));
       const _blockName = getBlockName(clientId);
       return {
         isSelected: isBlockSelected(clientId) || hasSelectedInnerBlock(
@@ -85,7 +87,7 @@ function BlockQuickNavigationItem({
           true
         ),
         childBlocks: getBlockOrder(clientId),
-        hasListViewSupport: _blockName === "core/navigation" || (0, import_blocks.hasBlockSupport)(_blockName, "listView"),
+        shouldRenderListView: shouldRenderBlockListView(clientId),
         blockName: _blockName
       };
     },
@@ -99,7 +101,7 @@ function BlockQuickNavigationItem({
   const blockTitle = displayTitle || blockType?.title || blockName;
   const { selectBlock } = (0, import_data.useDispatch)(import_store.store);
   const hasChildren = childBlocks && childBlocks.length > 0;
-  const canNavigateToListView = hasChildren && hasListViewTab && hasListViewSupport;
+  const canNavigateToListView = hasChildren && hasListViewTab && shouldRenderListView;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.Button,
     {

package/build/components/block-quick-navigation/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-quick-navigation/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { hasBlockSupport, getBlockType } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalVStack as VStack,\n\t__experimentalTruncate as Truncate,\n\tFlex,\n\tFlexBlock,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\n\nexport default function BlockQuickNavigation( {\n\tclientIds,\n\tonSelect,\n\tonSwitchToListView,\n\thasListViewTab,\n} ) {\n\tif ( ! clientIds.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<VStack spacing={ 1 }>\n\t\t\t{ clientIds.map( ( clientId ) => (\n\t\t\t\t<BlockQuickNavigationItem\n\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\tonSwitchToListView={ onSwitchToListView }\n\t\t\t\t\thasListViewTab={ hasListViewTab }\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</VStack>\n\t);\n}\n\nfunction BlockQuickNavigationItem( {\n\tclientId,\n\tonSelect,\n\tonSwitchToListView,\n\thasListViewTab,\n} ) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst { isSelected, childBlocks, hasListViewSupport, blockName } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst {\n\t\t\t\t\tisBlockSelected,\n\t\t\t\t\thasSelectedInnerBlock,\n\t\t\t\t\tgetBlockOrder,\n\t\t\t\t\tgetBlockName,\n\t\t\t\t} = select( blockEditorStore );\n\n\t\t\t\tconst _blockName = getBlockName( clientId );\n\n\t\t\t\treturn {\n\t\t\t\t\tisSelected:\n\t\t\t\t\t\tisBlockSelected( clientId ) ||\n\t\t\t\t\t\thasSelectedInnerBlock( clientId, /* deep: */ true ),\n\t\t\t\t\tchildBlocks: getBlockOrder( clientId ),\n\t\t\t\t\thasListViewSupport:\n\t\t\t\t\t\t_blockName === 'core/navigation' ||\n\t\t\t\t\t\thasBlockSupport( _blockName, 'listView' ),\n\t\t\t\t\tblockName: _blockName,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId ]\n\t\t);\n\n\tconst blockType = getBlockType( blockName );\n\tconst displayTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockTitle = displayTitle || blockType?.title || blockName;\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst hasChildren = childBlocks && childBlocks.length > 0;\n\tconst canNavigateToListView =\n\t\thasChildren && hasListViewTab && hasListViewSupport;\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"block-editor-block-quick-navigation__item\"\n\t\t\tisPressed={ isSelected }\n\t\t\tonClick={ async () => {\n\t\t\t\tawait selectBlock( clientId );\n\n\t\t\t\t// If the block has children and List View is available,\n\t\t\t\t// switch to List View to show the expanded container.\n\t\t\t\tif ( canNavigateToListView && onSwitchToListView ) {\n\t\t\t\t\tonSwitchToListView( clientId );\n\t\t\t\t}\n\n\t\t\t\tif ( onSelect ) {\n\t\t\t\t\tonSelect( clientId );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexBlock style={ { textAlign: 'left' } }>\n\t\t\t\t\t<Truncate>{ blockTitle }</Truncate>\n\t\t\t\t</FlexBlock>\n\t\t\t\t{ canNavigateToListView && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ chevronRight } size={ 24 } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA8C;AAC9C,kBAAuC;AACvC,wBAOO;AACP,mBAAmC;AAKnC,mBAA0C;AAC1C,wBAAsB;AACtB,2CAAuC;AACvC,qCAAiC;AAc7B;AAZW,SAAR,qBAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,MAAK,CAAE,UAAU,QAAS;AACzB,WAAO;AAAA,EACR;AACA,SACC,4CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf,oBAAU,IAAK,CAAE,aAClB;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,IADM;AAAA,EAEP,CACC,GACH;AAEF;AAEA,SAAS,yBAA0B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,uBAAmB,qCAAAC,SAA4B,QAAS;AAC9D,QAAM,EAAE,YAAY,aAAa,oBAAoB,UAAU,QAC9D;AAAA,IACC,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,aAAAC,KAAiB;AAE7B,YAAM,aAAa,aAAc,QAAS;AAE1C,aAAO;AAAA,QACN,YACC,gBAAiB,QAAS,KAC1B;AAAA,UAAuB;AAAA;AAAA,UAAsB;AAAA,QAAK;AAAA,QACnD,aAAa,cAAe,QAAS;AAAA,QACrC,oBACC,eAAe,yBACf,+BAAiB,YAAY,UAAW;AAAA,QACzC,WAAW;AAAA,MACZ;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAED,QAAM,gBAAY,4BAAc,SAAU;AAC1C,QAAM,mBAAe,+BAAAC,SAAsB;AAAA,IAC1C;AAAA,IACA,SAAS;AAAA,EACV,CAAE;AACF,QAAM,aAAa,gBAAgB,WAAW,SAAS;AACvD,QAAM,EAAE,YAAY,QAAI,yBAAa,aAAAD,KAAiB;AAEtD,QAAM,cAAc,eAAe,YAAY,SAAS;AACxD,QAAM,wBACL,eAAe,kBAAkB;AAElC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,WAAU;AAAA,MACV,WAAY;AAAA,MACZ,SAAU,YAAY;AACrB,cAAM,YAAa,QAAS;AAI5B,YAAK,yBAAyB,oBAAqB;AAClD,6BAAoB,QAAS;AAAA,QAC9B;AAEA,YAAK,UAAW;AACf,mBAAU,QAAS;AAAA,QACpB;AAAA,MACD;AAAA,MAEA,uDAAC,0BACA;AAAA,oDAAC,8BACA,sDAAC,kBAAAE,SAAA,EAAU,MAAO,kBAAkB,MAAO,GAC5C;AAAA,QACA,4CAAC,+BAAU,OAAQ,EAAE,WAAW,OAAO,GACtC,sDAAC,kBAAAC,wBAAA,EAAW,sBAAY,GACzB;AAAA,QACE,yBACD,4CAAC,8BACA,sDAAC,qBAAK,MAAO,2BAAe,MAAO,IAAK,GACzC;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalVStack as VStack,\n\t__experimentalTruncate as Truncate,\n\tFlex,\n\tFlexBlock,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport { unlock } from '../../lock-unlock';\n\nexport default function BlockQuickNavigation( {\n\tclientIds,\n\tonSelect,\n\tonSwitchToListView,\n\thasListViewTab,\n} ) {\n\tif ( ! clientIds.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<VStack spacing={ 1 }>\n\t\t\t{ clientIds.map( ( clientId ) => (\n\t\t\t\t<BlockQuickNavigationItem\n\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\tonSwitchToListView={ onSwitchToListView }\n\t\t\t\t\thasListViewTab={ hasListViewTab }\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</VStack>\n\t);\n}\n\nfunction BlockQuickNavigationItem( {\n\tclientId,\n\tonSelect,\n\tonSwitchToListView,\n\thasListViewTab,\n} ) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst { isSelected, childBlocks, shouldRenderListView, blockName } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst {\n\t\t\t\t\tisBlockSelected,\n\t\t\t\t\thasSelectedInnerBlock,\n\t\t\t\t\tgetBlockOrder,\n\t\t\t\t\tgetBlockName,\n\t\t\t\t\tshouldRenderBlockListView,\n\t\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\t\tconst _blockName = getBlockName( clientId );\n\n\t\t\t\treturn {\n\t\t\t\t\tisSelected:\n\t\t\t\t\t\tisBlockSelected( clientId ) ||\n\t\t\t\t\t\thasSelectedInnerBlock( clientId, /* deep: */ true ),\n\t\t\t\t\tchildBlocks: getBlockOrder( clientId ),\n\t\t\t\t\tshouldRenderListView: shouldRenderBlockListView( clientId ),\n\t\t\t\t\tblockName: _blockName,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId ]\n\t\t);\n\n\tconst blockType = getBlockType( blockName );\n\tconst displayTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockTitle = displayTitle || blockType?.title || blockName;\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst hasChildren = childBlocks && childBlocks.length > 0;\n\tconst canNavigateToListView =\n\t\thasChildren && hasListViewTab && shouldRenderListView;\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"block-editor-block-quick-navigation__item\"\n\t\t\tisPressed={ isSelected }\n\t\t\tonClick={ async () => {\n\t\t\t\tawait selectBlock( clientId );\n\n\t\t\t\t// If the block has children and List View is available,\n\t\t\t\t// switch to List View to show the expanded container.\n\t\t\t\tif ( canNavigateToListView && onSwitchToListView ) {\n\t\t\t\t\tonSwitchToListView( clientId );\n\t\t\t\t}\n\n\t\t\t\tif ( onSelect ) {\n\t\t\t\t\tonSelect( clientId );\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexBlock style={ { textAlign: 'left' } }>\n\t\t\t\t\t<Truncate>{ blockTitle }</Truncate>\n\t\t\t\t</FlexBlock>\n\t\t\t\t{ canNavigateToListView && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ chevronRight } size={ 24 } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA6B;AAC7B,kBAAuC;AACvC,wBAOO;AACP,mBAAmC;AAKnC,mBAA0C;AAC1C,wBAAsB;AACtB,2CAAuC;AACvC,qCAAiC;AACjC,yBAAuB;AAcnB;AAZW,SAAR,qBAAuC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,MAAK,CAAE,UAAU,QAAS;AACzB,WAAO;AAAA,EACR;AACA,SACC,4CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf,oBAAU,IAAK,CAAE,aAClB;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,IADM;AAAA,EAEP,CACC,GACH;AAEF;AAEA,SAAS,yBAA0B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,uBAAmB,qCAAAC,SAA4B,QAAS;AAC9D,QAAM,EAAE,YAAY,aAAa,sBAAsB,UAAU,QAChE;AAAA,IACC,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,QAAI,2BAAQ,OAAQ,aAAAC,KAAiB,CAAE;AAEvC,YAAM,aAAa,aAAc,QAAS;AAE1C,aAAO;AAAA,QACN,YACC,gBAAiB,QAAS,KAC1B;AAAA,UAAuB;AAAA;AAAA,UAAsB;AAAA,QAAK;AAAA,QACnD,aAAa,cAAe,QAAS;AAAA,QACrC,sBAAsB,0BAA2B,QAAS;AAAA,QAC1D,WAAW;AAAA,MACZ;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAED,QAAM,gBAAY,4BAAc,SAAU;AAC1C,QAAM,mBAAe,+BAAAC,SAAsB;AAAA,IAC1C;AAAA,IACA,SAAS;AAAA,EACV,CAAE;AACF,QAAM,aAAa,gBAAgB,WAAW,SAAS;AACvD,QAAM,EAAE,YAAY,QAAI,yBAAa,aAAAD,KAAiB;AAEtD,QAAM,cAAc,eAAe,YAAY,SAAS;AACxD,QAAM,wBACL,eAAe,kBAAkB;AAElC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,WAAU;AAAA,MACV,WAAY;AAAA,MACZ,SAAU,YAAY;AACrB,cAAM,YAAa,QAAS;AAI5B,YAAK,yBAAyB,oBAAqB;AAClD,6BAAoB,QAAS;AAAA,QAC9B;AAEA,YAAK,UAAW;AACf,mBAAU,QAAS;AAAA,QACpB;AAAA,MACD;AAAA,MAEA,uDAAC,0BACA;AAAA,oDAAC,8BACA,sDAAC,kBAAAE,SAAA,EAAU,MAAO,kBAAkB,MAAO,GAC5C;AAAA,QACA,4CAAC,+BAAU,OAAQ,EAAE,WAAW,OAAO,GACtC,sDAAC,kBAAAC,wBAAA,EAAW,sBAAY,GACzB;AAAA,QACE,yBACD,4CAAC,8BACA,sDAAC,qBAAK,MAAO,2BAAe,MAAO,IAAK,GACzC;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;",
   "names": ["VStack", "useBlockDisplayInformation", "blockEditorStore", "useBlockDisplayTitle", "BlockIcon", "Truncate"]
 }

package/build/components/block-switcher/block-transformations-menu.cjs CHANGED Viewed

@@ -85,7 +85,7 @@ var BlockTransformationsMenu = ({
   onSelectVariation,
   blocks
 }) => {
-  const [hoveredTransformItemName, setHoveredTransformItemName] = (0, import_element.useState)();
+  const [hoveredTransformItem, setHoveredTransformItem] = (0, import_element.useState)();
   const { priorityTextTransformations, restTransformations } = useGroupedTransforms(possibleBlockTransformations);
   const hasBothContentTransformations = priorityTextTransformations.length && restTransformations.length;
   const restTransformItems = !!restTransformations.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -93,17 +93,18 @@ var BlockTransformationsMenu = ({
     {
       restTransformations,
       onSelect,
-      setHoveredTransformItemName
+      setHoveredTransformItem
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { label: (0, import_i18n.__)("Transform to"), className, children: [
-      hoveredTransformItemName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      hoveredTransformItem && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_preview_block_popover.default,
         {
           blocks: (0, import_blocks.switchToBlockType)(
             blocks,
-            hoveredTransformItemName
+            hoveredTransformItem.name,
+            hoveredTransformItem.variationName
           )
         }
       ),
@@ -120,9 +121,9 @@ var BlockTransformationsMenu = ({
         {
           item,
           onSelect,
-          setHoveredTransformItemName
+          setHoveredTransformItem
         },
-        item.name
+        item.id || item.name
       )),
       !hasBothContentTransformations && restTransformItems
     ] }),
@@ -132,22 +133,22 @@ var BlockTransformationsMenu = ({
 function RestTransformationItems({
   restTransformations,
   onSelect,
-  setHoveredTransformItemName
+  setHoveredTransformItem
 }) {
   return restTransformations.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     BlockTransformationItem,
     {
       item,
       onSelect,
-      setHoveredTransformItemName
+      setHoveredTransformItem
     },
-    item.name
+    item.id || item.name
   ));
 }
 function BlockTransformationItem({
   item,
   onSelect,
-  setHoveredTransformItemName
+  setHoveredTransformItem
 }) {
   const { name, icon, title, isDisabled } = item;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -156,13 +157,13 @@ function BlockTransformationItem({
       className: (0, import_blocks.getBlockMenuDefaultClassName)(name),
       onClick: (event) => {
         event.preventDefault();
-        onSelect(name);
+        onSelect(name, item.variationName);
       },
       disabled: isDisabled,
-      onMouseLeave: () => setHoveredTransformItemName(null),
-      onMouseEnter: () => setHoveredTransformItemName(name),
-      onFocus: () => setHoveredTransformItemName(name),
-      onBlur: () => setHoveredTransformItemName(null),
+      onMouseLeave: () => setHoveredTransformItem(null),
+      onMouseEnter: () => setHoveredTransformItem(item),
+      onFocus: () => setHoveredTransformItem(item),
+      onBlur: () => setHoveredTransformItem(null),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_icon.default, { icon, showColors: true }),
         title

package/build/components/block-switcher/block-transformations-menu.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-switcher/block-transformations-menu.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup, MenuItem } from '@wordpress/components';\nimport {\n\tgetBlockMenuDefaultClassName,\n\tswitchToBlockType,\n} from '@wordpress/blocks';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport PreviewBlockPopover from './preview-block-popover';\nimport BlockVariationTransformations from './block-variation-transformations';\n\n/**\n * Helper hook to group transformations to display them in a specific order in the UI.\n * For now we group only priority content driven transformations(ex. paragraph -> heading).\n *\n * Later on we could also group 'layout' transformations(ex. paragraph -> group) and\n * display them in different sections.\n *\n * @param {Object[]} possibleBlockTransformations The available block transformations.\n * @return {Record<string, Object[]>} The grouped block transformations.\n */\nfunction useGroupedTransforms( possibleBlockTransformations ) {\n\tconst priorityContentTransformationBlocks = {\n\t\t'core/paragraph': 1,\n\t\t'core/heading': 2,\n\t\t'core/list': 3,\n\t\t'core/quote': 4,\n\t};\n\tconst transformations = useMemo( () => {\n\t\tconst priorityTextTransformsNames = Object.keys(\n\t\t\tpriorityContentTransformationBlocks\n\t\t);\n\t\tconst groupedPossibleTransforms = possibleBlockTransformations.reduce(\n\t\t\t( accumulator, item ) => {\n\t\t\t\tconst { name } = item;\n\t\t\t\tif ( priorityTextTransformsNames.includes( name ) ) {\n\t\t\t\t\taccumulator.priorityTextTransformations.push( item );\n\t\t\t\t} else {\n\t\t\t\t\taccumulator.restTransformations.push( item );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t},\n\t\t\t{ priorityTextTransformations: [], restTransformations: [] }\n\t\t);\n\t\t/**\n\t\t * If there is only one priority text transformation and it's a Quote,\n\t\t * is should move to the rest transformations. This is because Quote can\n\t\t * be a container for any block type, so in multi-block selection it will\n\t\t * always be suggested, even for non-text blocks.\n\t\t */\n\t\tif (\n\t\t\tgroupedPossibleTransforms.priorityTextTransformations.length ===\n\t\t\t\t1 &&\n\t\t\tgroupedPossibleTransforms.priorityTextTransformations[ 0 ].name ===\n\t\t\t\t'core/quote'\n\t\t) {\n\t\t\tconst singleQuote =\n\t\t\t\tgroupedPossibleTransforms.priorityTextTransformations.pop();\n\t\t\tgroupedPossibleTransforms.restTransformations.push( singleQuote );\n\t\t}\n\t\treturn groupedPossibleTransforms;\n\t}, [ possibleBlockTransformations ] );\n\n\t// Order the priority text transformations.\n\ttransformations.priorityTextTransformations.sort(\n\t\t( { name: currentName }, { name: nextName } ) => {\n\t\t\treturn priorityContentTransformationBlocks[ currentName ] <\n\t\t\t\tpriorityContentTransformationBlocks[ nextName ]\n\t\t\t\t? -1\n\t\t\t\t: 1;\n\t\t}\n\t);\n\treturn transformations;\n}\n\nconst BlockTransformationsMenu = ( {\n\tclassName,\n\tpossibleBlockTransformations,\n\tpossibleBlockVariationTransformations,\n\tonSelect,\n\tonSelectVariation,\n\tblocks,\n} ) => {\n\tconst [ hoveredTransformItemName, setHoveredTransformItemName ] =\n\t\tuseState();\n\n\tconst { priorityTextTransformations, restTransformations } =\n\t\tuseGroupedTransforms( possibleBlockTransformations );\n\t// We have to check if both content transformations(priority and rest) are set\n\t// in order to create a separate MenuGroup for them.\n\tconst hasBothContentTransformations =\n\t\tpriorityTextTransformations.length && restTransformations.length;\n\tconst restTransformItems = !! restTransformations.length && (\n\t\t<RestTransformationItems\n\t\t\trestTransformations={ restTransformations }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItemName={ setHoveredTransformItemName }\n\t\t/>\n\t);\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup label={ __( 'Transform to' ) } className={ className }>\n\t\t\t\t{ hoveredTransformItemName && (\n\t\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\t\tblocks={ switchToBlockType(\n\t\t\t\t\t\t\tblocks,\n\t\t\t\t\t\t\thoveredTransformItemName\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! possibleBlockVariationTransformations?.length && (\n\t\t\t\t\t<BlockVariationTransformations\n\t\t\t\t\t\ttransformations={\n\t\t\t\t\t\t\tpossibleBlockVariationTransformations\n\t\t\t\t\t\t}\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ priorityTextTransformations.map( ( item ) => (\n\t\t\t\t\t<BlockTransformationItem\n\t\t\t\t\t\tkey={ item.name }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsetHoveredTransformItemName={\n\t\t\t\t\t\t\tsetHoveredTransformItemName\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t\t{ ! hasBothContentTransformations && restTransformItems }\n\t\t\t</MenuGroup>\n\t\t\t{ !! hasBothContentTransformations && (\n\t\t\t\t<MenuGroup className={ className }>\n\t\t\t\t\t{ restTransformItems }\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nfunction RestTransformationItems( {\n\trestTransformations,\n\tonSelect,\n\tsetHoveredTransformItemName,\n} ) {\n\treturn restTransformations.map( ( item ) => (\n\t\t<BlockTransformationItem\n\t\t\tkey={ item.name }\n\t\t\titem={ item }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItemName={ setHoveredTransformItemName }\n\t\t/>\n\t) );\n}\n\nfunction BlockTransformationItem( {\n\titem,\n\tonSelect,\n\tsetHoveredTransformItemName,\n} ) {\n\tconst { name, icon, title, isDisabled } = item;\n\treturn (\n\t\t<MenuItem\n\t\t\tclassName={ getBlockMenuDefaultClassName( name ) }\n\t\t\tonClick={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSelect( name );\n\t\t\t} }\n\t\t\tdisabled={ isDisabled }\n\t\t\tonMouseLeave={ () => setHoveredTransformItemName( null ) }\n\t\t\tonMouseEnter={ () => setHoveredTransformItemName( name ) }\n\t\t\tonFocus={ () => setHoveredTransformItemName( name ) }\n\t\t\tonBlur={ () => setHoveredTransformItemName( null ) }\n\t\t>\n\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t{ title }\n\t\t</MenuItem>\n\t);\n}\n\nexport default BlockTransformationsMenu;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { MenuGroup, MenuItem } from '@wordpress/components';\nimport {\n\tgetBlockMenuDefaultClassName,\n\tswitchToBlockType,\n} from '@wordpress/blocks';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport PreviewBlockPopover from './preview-block-popover';\nimport BlockVariationTransformations from './block-variation-transformations';\n\n/**\n * Helper hook to group transformations to display them in a specific order in the UI.\n * For now we group only priority content driven transformations(ex. paragraph -> heading).\n *\n * Later on we could also group 'layout' transformations(ex. paragraph -> group) and\n * display them in different sections.\n *\n * @param {Object[]} possibleBlockTransformations The available block transformations.\n * @return {Record<string, Object[]>} The grouped block transformations.\n */\nfunction useGroupedTransforms( possibleBlockTransformations ) {\n\tconst priorityContentTransformationBlocks = {\n\t\t'core/paragraph': 1,\n\t\t'core/heading': 2,\n\t\t'core/list': 3,\n\t\t'core/quote': 4,\n\t};\n\tconst transformations = useMemo( () => {\n\t\tconst priorityTextTransformsNames = Object.keys(\n\t\t\tpriorityContentTransformationBlocks\n\t\t);\n\t\tconst groupedPossibleTransforms = possibleBlockTransformations.reduce(\n\t\t\t( accumulator, item ) => {\n\t\t\t\tconst { name } = item;\n\t\t\t\tif ( priorityTextTransformsNames.includes( name ) ) {\n\t\t\t\t\taccumulator.priorityTextTransformations.push( item );\n\t\t\t\t} else {\n\t\t\t\t\taccumulator.restTransformations.push( item );\n\t\t\t\t}\n\t\t\t\treturn accumulator;\n\t\t\t},\n\t\t\t{ priorityTextTransformations: [], restTransformations: [] }\n\t\t);\n\t\t/**\n\t\t * If there is only one priority text transformation and it's a Quote,\n\t\t * is should move to the rest transformations. This is because Quote can\n\t\t * be a container for any block type, so in multi-block selection it will\n\t\t * always be suggested, even for non-text blocks.\n\t\t */\n\t\tif (\n\t\t\tgroupedPossibleTransforms.priorityTextTransformations.length ===\n\t\t\t\t1 &&\n\t\t\tgroupedPossibleTransforms.priorityTextTransformations[ 0 ].name ===\n\t\t\t\t'core/quote'\n\t\t) {\n\t\t\tconst singleQuote =\n\t\t\t\tgroupedPossibleTransforms.priorityTextTransformations.pop();\n\t\t\tgroupedPossibleTransforms.restTransformations.push( singleQuote );\n\t\t}\n\t\treturn groupedPossibleTransforms;\n\t}, [ possibleBlockTransformations ] );\n\n\t// Order the priority text transformations.\n\ttransformations.priorityTextTransformations.sort(\n\t\t( { name: currentName }, { name: nextName } ) => {\n\t\t\treturn priorityContentTransformationBlocks[ currentName ] <\n\t\t\t\tpriorityContentTransformationBlocks[ nextName ]\n\t\t\t\t? -1\n\t\t\t\t: 1;\n\t\t}\n\t);\n\treturn transformations;\n}\n\nconst BlockTransformationsMenu = ( {\n\tclassName,\n\tpossibleBlockTransformations,\n\tpossibleBlockVariationTransformations,\n\tonSelect,\n\tonSelectVariation,\n\tblocks,\n} ) => {\n\tconst [ hoveredTransformItem, setHoveredTransformItem ] = useState();\n\n\tconst { priorityTextTransformations, restTransformations } =\n\t\tuseGroupedTransforms( possibleBlockTransformations );\n\t// We have to check if both content transformations(priority and rest) are set\n\t// in order to create a separate MenuGroup for them.\n\tconst hasBothContentTransformations =\n\t\tpriorityTextTransformations.length && restTransformations.length;\n\tconst restTransformItems = !! restTransformations.length && (\n\t\t<RestTransformationItems\n\t\t\trestTransformations={ restTransformations }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItem={ setHoveredTransformItem }\n\t\t/>\n\t);\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup label={ __( 'Transform to' ) } className={ className }>\n\t\t\t\t{ hoveredTransformItem && (\n\t\t\t\t\t<PreviewBlockPopover\n\t\t\t\t\t\tblocks={ switchToBlockType(\n\t\t\t\t\t\t\tblocks,\n\t\t\t\t\t\t\thoveredTransformItem.name,\n\t\t\t\t\t\t\thoveredTransformItem.variationName\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! possibleBlockVariationTransformations?.length && (\n\t\t\t\t\t<BlockVariationTransformations\n\t\t\t\t\t\ttransformations={\n\t\t\t\t\t\t\tpossibleBlockVariationTransformations\n\t\t\t\t\t\t}\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ priorityTextTransformations.map( ( item ) => (\n\t\t\t\t\t<BlockTransformationItem\n\t\t\t\t\t\tkey={ item.id || item.name }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsetHoveredTransformItem={ setHoveredTransformItem }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t\t{ ! hasBothContentTransformations && restTransformItems }\n\t\t\t</MenuGroup>\n\t\t\t{ !! hasBothContentTransformations && (\n\t\t\t\t<MenuGroup className={ className }>\n\t\t\t\t\t{ restTransformItems }\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nfunction RestTransformationItems( {\n\trestTransformations,\n\tonSelect,\n\tsetHoveredTransformItem,\n} ) {\n\treturn restTransformations.map( ( item ) => (\n\t\t<BlockTransformationItem\n\t\t\tkey={ item.id || item.name }\n\t\t\titem={ item }\n\t\t\tonSelect={ onSelect }\n\t\t\tsetHoveredTransformItem={ setHoveredTransformItem }\n\t\t/>\n\t) );\n}\n\nfunction BlockTransformationItem( {\n\titem,\n\tonSelect,\n\tsetHoveredTransformItem,\n} ) {\n\tconst { name, icon, title, isDisabled } = item;\n\treturn (\n\t\t<MenuItem\n\t\t\tclassName={ getBlockMenuDefaultClassName( name ) }\n\t\t\tonClick={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSelect( name, item.variationName );\n\t\t\t} }\n\t\t\tdisabled={ isDisabled }\n\t\t\tonMouseLeave={ () => setHoveredTransformItem( null ) }\n\t\t\tonMouseEnter={ () => setHoveredTransformItem( item ) }\n\t\t\tonFocus={ () => setHoveredTransformItem( item ) }\n\t\t\tonBlur={ () => setHoveredTransformItem( null ) }\n\t\t>\n\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t{ title }\n\t\t</MenuItem>\n\t);\n}\n\nexport default BlockTransformationsMenu;\n"],
+  "mappings": "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",
   "names": ["PreviewBlockPopover", "BlockVariationTransformations", "BlockIcon"]
 }

package/build/components/block-switcher/index.cjs CHANGED Viewed

@@ -101,8 +101,8 @@ function BlockSwitcherDropdownMenuContents({ onClose, clientIds }) {
       );
     }
   }
-  function onBlockTransform(name) {
-    const newBlocks = (0, import_blocks.switchToBlockType)(blocks, name);
+  function onBlockTransform(name, variationName) {
+    const newBlocks = (0, import_blocks.switchToBlockType)(blocks, name, variationName);
     replaceBlocks(clientIds, newBlocks);
     selectForMultipleBlocks(newBlocks);
   }
@@ -153,8 +153,8 @@ function BlockSwitcherDropdownMenuContents({ onClose, clientIds }) {
         possibleBlockTransformations,
         possibleBlockVariationTransformations: blockVariationTransformations,
         blocks,
-        onSelect: (name) => {
-          onBlockTransform(name);
+        onSelect: (name, variationName) => {
+          onBlockTransform(name, variationName);
           onClose();
         },
         onSelectVariation: (name) => {

package/build/components/block-switcher/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-switcher/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, _x } from '@wordpress/i18n';\nimport {\n\tDropdownMenu,\n\tToolbarGroup,\n\tToolbarItem,\n\t__experimentalText as WCText,\n\tMenuGroup,\n} from '@wordpress/components';\nimport {\n\tswitchToBlockType,\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n} from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockTransformationsMenu from './block-transformations-menu';\nimport { useBlockVariationTransforms } from './block-variation-transformations';\nimport BlockStylesMenu from './block-styles-menu';\nimport PatternTransformationsMenu from './pattern-transformations-menu';\n\nfunction BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {\n\tconst { replaceBlocks, multiSelect, updateBlockAttributes } =\n\t\tuseDispatch( blockEditorStore );\n\tconst {\n\t\tpossibleBlockTransformations,\n\t\tpatterns,\n\t\tblocks,\n\t\tisUsingBindings,\n\t\tcanRemove,\n\t\thasBlockStyles,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockTransformItems,\n\t\t\t\t__experimentalGetPatternTransformItems,\n\t\t\t\tcanRemoveBlocks,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\tconst _blocks = getBlocksByClientId( clientIds );\n\t\t\tconst _isSingleBlock = clientIds.length === 1;\n\t\t\tconst _blockName = _isSingleBlock && getBlockName( clientIds[ 0 ] );\n\t\t\tconst _hasBlockStyles =\n\t\t\t\t_isSingleBlock && !! getBlockStyles( _blockName )?.length;\n\t\t\treturn {\n\t\t\t\tblocks: _blocks,\n\t\t\t\tpossibleBlockTransformations: getBlockTransformItems(\n\t\t\t\t\t_blocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tpatterns: __experimentalGetPatternTransformItems(\n\t\t\t\t\t_blocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tisUsingBindings: clientIds.every(\n\t\t\t\t\t( clientId ) =>\n\t\t\t\t\t\t!! getBlockAttributes( clientId )?.metadata?.bindings\n\t\t\t\t),\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\thasBlockStyles: _hasBlockStyles,\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\tconst blockVariationTransformations = useBlockVariationTransforms( {\n\t\tclientIds,\n\t\tblocks,\n\t} );\n\tfunction selectForMultipleBlocks( insertedBlocks ) {\n\t\tif ( insertedBlocks.length > 1 ) {\n\t\t\tmultiSelect(\n\t\t\t\tinsertedBlocks[ 0 ].clientId,\n\t\t\t\tinsertedBlocks[ insertedBlocks.length - 1 ].clientId\n\t\t\t);\n\t\t}\n\t}\n\t// Simple block transformation based on the `Block Transforms` API.\n\tfunction onBlockTransform( name ) {\n\t\tconst newBlocks = switchToBlockType( blocks, name );\n\t\treplaceBlocks( clientIds, newBlocks );\n\t\tselectForMultipleBlocks( newBlocks );\n\t}\n\tfunction onBlockVariationTransform( name ) {\n\t\tupdateBlockAttributes( blocks[ 0 ].clientId, {\n\t\t\t...blockVariationTransformations.find(\n\t\t\t\t( { name: variationName } ) => variationName === name\n\t\t\t).attributes,\n\t\t} );\n\t}\n\t// Pattern transformation through the `Patterns` API.\n\tfunction onPatternTransform( transformedBlocks ) {\n\t\treplaceBlocks( clientIds, transformedBlocks );\n\t\tselectForMultipleBlocks( transformedBlocks );\n\t}\n\n\t/**\n\t * The `isSynced` check is a stopgap solution here.\n\t * Ideally, the Transforms API should handle this\n\t * by allowing to exclude blocks from wildcard transformations.\n\t */\n\tconst isSingleBlock = blocks.length === 1;\n\tconst isSynced =\n\t\tisSingleBlock &&\n\t\t( isTemplatePart( blocks[ 0 ] ) || isReusableBlock( blocks[ 0 ] ) );\n\tconst hasPossibleBlockTransformations =\n\t\t!! possibleBlockTransformations?.length && canRemove && ! isSynced;\n\tconst hasPossibleBlockVariationTransformations =\n\t\t!! blockVariationTransformations?.length;\n\tconst hasPatternTransformation = !! patterns?.length && canRemove;\n\tconst hasBlockOrBlockVariationTransforms =\n\t\thasPossibleBlockTransformations ||\n\t\thasPossibleBlockVariationTransformations;\n\tconst hasContents =\n\t\thasBlockStyles ||\n\t\thasBlockOrBlockVariationTransforms ||\n\t\thasPatternTransformation;\n\tif ( ! hasContents ) {\n\t\treturn (\n\t\t\t<p className=\"block-editor-block-switcher__no-transforms\">\n\t\t\t\t{ __( 'No transforms.' ) }\n\t\t\t</p>\n\t\t);\n\t}\n\n\tconst connectedBlockDescription = isSingleBlock\n\t\t? _x(\n\t\t\t\t'This block is connected.',\n\t\t\t\t'block toolbar button label and description'\n\t\t  )\n\t\t: _x(\n\t\t\t\t'These blocks are connected.',\n\t\t\t\t'block toolbar button label and description'\n\t\t  );\n\n\treturn (\n\t\t<div className=\"block-editor-block-switcher__container\">\n\t\t\t{ hasPatternTransformation && (\n\t\t\t\t<PatternTransformationsMenu\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tpatterns={ patterns }\n\t\t\t\t\tonSelect={ ( transformedBlocks ) => {\n\t\t\t\t\t\tonPatternTransform( transformedBlocks );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBlockOrBlockVariationTransforms && (\n\t\t\t\t<BlockTransformationsMenu\n\t\t\t\t\tclassName=\"block-editor-block-switcher__transforms__menugroup\"\n\t\t\t\t\tpossibleBlockTransformations={\n\t\t\t\t\t\tpossibleBlockTransformations\n\t\t\t\t\t}\n\t\t\t\t\tpossibleBlockVariationTransformations={\n\t\t\t\t\t\tblockVariationTransformations\n\t\t\t\t\t}\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tonSelect={ ( name ) => {\n\t\t\t\t\t\tonBlockTransform( name );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelectVariation={ ( name ) => {\n\t\t\t\t\t\tonBlockVariationTransform( name );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBlockStyles && (\n\t\t\t\t<BlockStylesMenu\n\t\t\t\t\thoveredBlock={ blocks[ 0 ] }\n\t\t\t\t\tonSwitch={ onClose }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isUsingBindings && (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<WCText className=\"block-editor-block-switcher__binding-indicator\">\n\t\t\t\t\t\t{ connectedBlockDescription }\n\t\t\t\t\t</WCText>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport const BlockSwitcher = ( { children, clientIds, label, text } ) => {\n\tconst isSingleBlock = clientIds.length === 1;\n\n\tconst blockSwitcherDescription = isSingleBlock\n\t\t? __( 'Change block type or style' )\n\t\t: sprintf(\n\t\t\t\t/* translators: %d: number of blocks. */\n\t\t\t\t_n(\n\t\t\t\t\t'Change type of %d block',\n\t\t\t\t\t'Change type of %d blocks',\n\t\t\t\t\tclientIds.length\n\t\t\t\t),\n\t\t\t\tclientIds.length\n\t\t  );\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarItem>\n\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\tclassName=\"block-editor-block-switcher\"\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\tplacement: 'bottom-start',\n\t\t\t\t\t\t\tclassName: 'block-editor-block-switcher__popover',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ticon={ children }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tdescription: blockSwitcherDescription,\n\t\t\t\t\t\t\t...toggleProps,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmenuProps={ { orientation: 'both' } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t<BlockSwitcherDropdownMenuContents\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\tclientIds={ clientIds }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t) }\n\t\t\t</ToolbarItem>\n\t\t</ToolbarGroup>\n\t);\n};\n\nexport default BlockSwitcher;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf, _x } from '@wordpress/i18n';\nimport {\n\tDropdownMenu,\n\tToolbarGroup,\n\tToolbarItem,\n\t__experimentalText as WCText,\n\tMenuGroup,\n} from '@wordpress/components';\nimport {\n\tswitchToBlockType,\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n} from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport BlockTransformationsMenu from './block-transformations-menu';\nimport { useBlockVariationTransforms } from './block-variation-transformations';\nimport BlockStylesMenu from './block-styles-menu';\nimport PatternTransformationsMenu from './pattern-transformations-menu';\n\nfunction BlockSwitcherDropdownMenuContents( { onClose, clientIds } ) {\n\tconst { replaceBlocks, multiSelect, updateBlockAttributes } =\n\t\tuseDispatch( blockEditorStore );\n\tconst {\n\t\tpossibleBlockTransformations,\n\t\tpatterns,\n\t\tblocks,\n\t\tisUsingBindings,\n\t\tcanRemove,\n\t\thasBlockStyles,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlocksByClientId,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockTransformItems,\n\t\t\t\t__experimentalGetPatternTransformItems,\n\t\t\t\tcanRemoveBlocks,\n\t\t\t\tgetBlockName,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\tconst _blocks = getBlocksByClientId( clientIds );\n\t\t\tconst _isSingleBlock = clientIds.length === 1;\n\t\t\tconst _blockName = _isSingleBlock && getBlockName( clientIds[ 0 ] );\n\t\t\tconst _hasBlockStyles =\n\t\t\t\t_isSingleBlock && !! getBlockStyles( _blockName )?.length;\n\t\t\treturn {\n\t\t\t\tblocks: _blocks,\n\t\t\t\tpossibleBlockTransformations: getBlockTransformItems(\n\t\t\t\t\t_blocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tpatterns: __experimentalGetPatternTransformItems(\n\t\t\t\t\t_blocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tisUsingBindings: clientIds.every(\n\t\t\t\t\t( clientId ) =>\n\t\t\t\t\t\t!! getBlockAttributes( clientId )?.metadata?.bindings\n\t\t\t\t),\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds ),\n\t\t\t\thasBlockStyles: _hasBlockStyles,\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\tconst blockVariationTransformations = useBlockVariationTransforms( {\n\t\tclientIds,\n\t\tblocks,\n\t} );\n\tfunction selectForMultipleBlocks( insertedBlocks ) {\n\t\tif ( insertedBlocks.length > 1 ) {\n\t\t\tmultiSelect(\n\t\t\t\tinsertedBlocks[ 0 ].clientId,\n\t\t\t\tinsertedBlocks[ insertedBlocks.length - 1 ].clientId\n\t\t\t);\n\t\t}\n\t}\n\t// Simple block transformation based on the `Block Transforms` API.\n\tfunction onBlockTransform( name, variationName ) {\n\t\tconst newBlocks = switchToBlockType( blocks, name, variationName );\n\t\treplaceBlocks( clientIds, newBlocks );\n\t\tselectForMultipleBlocks( newBlocks );\n\t}\n\tfunction onBlockVariationTransform( name ) {\n\t\tupdateBlockAttributes( blocks[ 0 ].clientId, {\n\t\t\t...blockVariationTransformations.find(\n\t\t\t\t( { name: variationName } ) => variationName === name\n\t\t\t).attributes,\n\t\t} );\n\t}\n\t// Pattern transformation through the `Patterns` API.\n\tfunction onPatternTransform( transformedBlocks ) {\n\t\treplaceBlocks( clientIds, transformedBlocks );\n\t\tselectForMultipleBlocks( transformedBlocks );\n\t}\n\n\t/**\n\t * The `isSynced` check is a stopgap solution here.\n\t * Ideally, the Transforms API should handle this\n\t * by allowing to exclude blocks from wildcard transformations.\n\t */\n\tconst isSingleBlock = blocks.length === 1;\n\tconst isSynced =\n\t\tisSingleBlock &&\n\t\t( isTemplatePart( blocks[ 0 ] ) || isReusableBlock( blocks[ 0 ] ) );\n\tconst hasPossibleBlockTransformations =\n\t\t!! possibleBlockTransformations?.length && canRemove && ! isSynced;\n\tconst hasPossibleBlockVariationTransformations =\n\t\t!! blockVariationTransformations?.length;\n\tconst hasPatternTransformation = !! patterns?.length && canRemove;\n\tconst hasBlockOrBlockVariationTransforms =\n\t\thasPossibleBlockTransformations ||\n\t\thasPossibleBlockVariationTransformations;\n\tconst hasContents =\n\t\thasBlockStyles ||\n\t\thasBlockOrBlockVariationTransforms ||\n\t\thasPatternTransformation;\n\tif ( ! hasContents ) {\n\t\treturn (\n\t\t\t<p className=\"block-editor-block-switcher__no-transforms\">\n\t\t\t\t{ __( 'No transforms.' ) }\n\t\t\t</p>\n\t\t);\n\t}\n\n\tconst connectedBlockDescription = isSingleBlock\n\t\t? _x(\n\t\t\t\t'This block is connected.',\n\t\t\t\t'block toolbar button label and description'\n\t\t  )\n\t\t: _x(\n\t\t\t\t'These blocks are connected.',\n\t\t\t\t'block toolbar button label and description'\n\t\t  );\n\n\treturn (\n\t\t<div className=\"block-editor-block-switcher__container\">\n\t\t\t{ hasPatternTransformation && (\n\t\t\t\t<PatternTransformationsMenu\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tpatterns={ patterns }\n\t\t\t\t\tonSelect={ ( transformedBlocks ) => {\n\t\t\t\t\t\tonPatternTransform( transformedBlocks );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBlockOrBlockVariationTransforms && (\n\t\t\t\t<BlockTransformationsMenu\n\t\t\t\t\tclassName=\"block-editor-block-switcher__transforms__menugroup\"\n\t\t\t\t\tpossibleBlockTransformations={\n\t\t\t\t\t\tpossibleBlockTransformations\n\t\t\t\t\t}\n\t\t\t\t\tpossibleBlockVariationTransformations={\n\t\t\t\t\t\tblockVariationTransformations\n\t\t\t\t\t}\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tonSelect={ ( name, variationName ) => {\n\t\t\t\t\t\tonBlockTransform( name, variationName );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelectVariation={ ( name ) => {\n\t\t\t\t\t\tonBlockVariationTransform( name );\n\t\t\t\t\t\tonClose();\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBlockStyles && (\n\t\t\t\t<BlockStylesMenu\n\t\t\t\t\thoveredBlock={ blocks[ 0 ] }\n\t\t\t\t\tonSwitch={ onClose }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isUsingBindings && (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<WCText className=\"block-editor-block-switcher__binding-indicator\">\n\t\t\t\t\t\t{ connectedBlockDescription }\n\t\t\t\t\t</WCText>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport const BlockSwitcher = ( { children, clientIds, label, text } ) => {\n\tconst isSingleBlock = clientIds.length === 1;\n\n\tconst blockSwitcherDescription = isSingleBlock\n\t\t? __( 'Change block type or style' )\n\t\t: sprintf(\n\t\t\t\t/* translators: %d: number of blocks. */\n\t\t\t\t_n(\n\t\t\t\t\t'Change type of %d block',\n\t\t\t\t\t'Change type of %d blocks',\n\t\t\t\t\tclientIds.length\n\t\t\t\t),\n\t\t\t\tclientIds.length\n\t\t  );\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarItem>\n\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\tclassName=\"block-editor-block-switcher\"\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\tplacement: 'bottom-start',\n\t\t\t\t\t\t\tclassName: 'block-editor-block-switcher__popover',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ticon={ children }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tdescription: blockSwitcherDescription,\n\t\t\t\t\t\t\t...toggleProps,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmenuProps={ { orientation: 'both' } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t<BlockSwitcherDropdownMenuContents\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\tclientIds={ clientIds }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t) }\n\t\t\t</ToolbarItem>\n\t\t</ToolbarGroup>\n\t);\n};\n\nexport default BlockSwitcher;\n"],
+  "mappings": "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",
   "names": ["blockEditorStore", "blocksStore", "PatternTransformationsMenu", "BlockTransformationsMenu", "BlockStylesMenu", "WCText"]
 }

package/build/components/block-toolbar/edit-section-button.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-toolbar/edit-section-button.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { isReusableBlock, isTemplatePart } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';\n\nexport default function EditSectionButton( { clientId } ) {\n\tconst {\n\t\tisSectionBlock,\n\t\tisEditingContentOnlySection,\n\t\teditContentOnlySection,\n\t\tstopEditingContentOnlySection,\n\t} = useContentOnlySectionEdit( clientId );\n\n\tconst blockType = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst { getBlockName } = select( blockEditorStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\treturn blockName ? { name: blockName } : null;\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Don't show for synced patterns or template parts \u2014 they already have\n\t// their own toolbar buttons (\"Edit original\").\n\t// Note: isSectionBlock returns false while the section is being edited,\n\t// so we also check isEditingContentOnlySection to show \"Exit pattern\".\n\tif (\n\t\t! clientId ||\n\t\t( ! isSectionBlock && ! isEditingContentOnlySection ) ||\n\t\tisReusableBlock( blockType ) ||\n\t\tisTemplatePart( blockType )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isEditing = isEditingContentOnlySection;\n\n\tconst handleClick = () => {\n\t\tif ( isEditing ) {\n\t\t\tstopEditingContentOnlySection();\n\t\t} else {\n\t\t\teditContentOnlySection( clientId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton onClick={ handleClick }>\n\t\t\t\t{ isEditing\n\t\t\t\t\t? /* translators: Button label to leave pattern editing mode. */\n\t\t\t\t\t  __( 'Exit pattern' )\n\t\t\t\t\t: /* translators: Button label to enter pattern editing mode. */\n\t\t\t\t\t  __( 'Edit pattern' ) }\n\t\t\t</ToolbarButton>\n\t\t</ToolbarGroup>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { isReusableBlock, isTemplatePart } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';\n\nexport default function EditSectionButton( { clientId } ) {\n\tconst {\n\t\tisSectionBlock,\n\t\tisEditingContentOnlySection,\n\t\teditContentOnlySection,\n\t\tstopEditingContentOnlySection,\n\t} = useContentOnlySectionEdit( clientId );\n\n\tconst blockType = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tconst { getBlockName } = select( blockEditorStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\treturn blockName ? { name: blockName } : null;\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Don't show for synced patterns or template parts — they already have\n\t// their own toolbar buttons (\"Edit original\").\n\t// Note: isSectionBlock returns false while the section is being edited,\n\t// so we also check isEditingContentOnlySection to show \"Exit pattern\".\n\tif (\n\t\t! clientId ||\n\t\t( ! isSectionBlock && ! isEditingContentOnlySection ) ||\n\t\tisReusableBlock( blockType ) ||\n\t\tisTemplatePart( blockType )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isEditing = isEditingContentOnlySection;\n\n\tconst handleClick = () => {\n\t\tif ( isEditing ) {\n\t\t\tstopEditingContentOnlySection();\n\t\t} else {\n\t\t\teditContentOnlySection( clientId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarButton onClick={ handleClick }>\n\t\t\t\t{ isEditing\n\t\t\t\t\t? /* translators: Button label to leave pattern editing mode. */\n\t\t\t\t\t  __( 'Exit pattern' )\n\t\t\t\t\t: /* translators: Button label to enter pattern editing mode. */\n\t\t\t\t\t  __( 'Edit pattern' ) }\n\t\t\t</ToolbarButton>\n\t\t</ToolbarGroup>\n\t);\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA4C;AAC5C,kBAAmB;AACnB,kBAA0B;AAC1B,oBAAgD;AAKhD,mBAA0C;AAC1C,2CAAsC;AA+CnC;AA7CY,SAAR,kBAAoC,EAAE,SAAS,GAAI;AACzD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,qCAAAA,SAA2B,QAAS;AAExC,QAAM,gBAAY;AAAA,IACjB,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM,EAAE,aAAa,IAAI,OAAQ,aAAAC,KAAiB;AAClD,YAAM,YAAY,aAAc,QAAS;AACzC,aAAO,YAAY,EAAE,MAAM,UAAU,IAAI;AAAA,IAC1C;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAMA,MACC,CAAE,YACA,CAAE,kBAAkB,CAAE,mCACxB,+BAAiB,SAAU,SAC3B,8BAAgB,SAAU,GACzB;AACD,WAAO;AAAA,EACR;AAEA,QAAM,YAAY;AAElB,QAAM,cAAc,MAAM;AACzB,QAAK,WAAY;AAChB,oCAA8B;AAAA,IAC/B,OAAO;AACN,6BAAwB,QAAS;AAAA,IAClC;AAAA,EACD;AAEA,SACC,4CAAC,kCACA,sDAAC,mCAAc,SAAU,aACtB;AAAA;AAAA,QAEC,gBAAI,cAAe;AAAA;AAAA;AAAA,QAEnB,gBAAI,cAAe;AAAA,KACvB,GACD;AAEF;",
   "names": ["useContentOnlySectionEdit", "blockEditorStore"]
 }

package/build/components/block-tools/use-block-toolbar-popover-props.cjs CHANGED Viewed

@@ -107,7 +107,13 @@ function useBlockToolbarPopoverProps({
         isSticky
       )
     ),
-    [contentElement, selectedBlockElement, scrollContainer, toolbarHeight]
+    [
+      contentElement,
+      selectedBlockElement,
+      scrollContainer,
+      toolbarHeight,
+      isSticky
+    ]
   );
   (0, import_element.useLayoutEffect)(updateProps, [blockIndex, updateProps]);
   (0, import_element.useLayoutEffect)(() => {
@@ -115,15 +121,15 @@ function useBlockToolbarPopoverProps({
       return;
     }
     const contentView = contentElement?.ownerDocument?.defaultView;
-    contentView?.addEventHandler?.("resize", updateProps);
+    contentView?.addEventListener?.("resize", updateProps);
     let resizeObserver;
     const blockView = selectedBlockElement?.ownerDocument?.defaultView;
-    if (blockView.ResizeObserver) {
+    if (blockView?.ResizeObserver) {
       resizeObserver = new blockView.ResizeObserver(updateProps);
       resizeObserver.observe(selectedBlockElement);
     }
     return () => {
-      contentView?.removeEventHandler?.("resize", updateProps);
+      contentView?.removeEventListener?.("resize", updateProps);
       if (resizeObserver) {
         resizeObserver.disconnect();
       }

package/build/components/block-tools/use-block-toolbar-popover-props.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-tools/use-block-toolbar-popover-props.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { getScrollContainer } from '@wordpress/dom';\nimport {\n\tuseCallback,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { hasStickyOrFixedPositionValue } from '../../hooks/position';\nimport { getElementBounds } from '../../utils/dom';\n\nconst COMMON_PROPS = {\n\tplacement: 'top-start',\n};\n\n// By default the toolbar sets the `shift` prop. If the user scrolls the page\n// down the toolbar will stay on screen by adopting a sticky position at the\n// top of the viewport.\nconst DEFAULT_PROPS = {\n\t...COMMON_PROPS,\n\tflip: false,\n\tshift: true,\n};\n\n// When there isn't enough height between the top of the block and the editor\n// canvas, the `shift` prop is set to `false`, as it will cause the block to be\n// obscured. The `flip` behavior is enabled, which positions the toolbar below\n// the block. This only happens if the block is smaller than the viewport, as\n// otherwise the toolbar will be off-screen.\nconst RESTRICTED_HEIGHT_PROPS = {\n\t...COMMON_PROPS,\n\tflip: true,\n\tshift: false,\n};\n\n/**\n * Get the popover props for the block toolbar, determined by the space at the top of the canvas and the toolbar height.\n *\n * @param {Element} contentElement       The DOM element that represents the editor content or canvas.\n * @param {Element} selectedBlockElement The outer DOM element of the first selected block.\n * @param {Element} scrollContainer      The scrollable container for the contentElement.\n * @param {number}  toolbarHeight        The height of the toolbar in pixels.\n * @param {boolean} isSticky             Whether or not the selected block is sticky or fixed.\n *\n * @return {Object} The popover props used to determine the position of the toolbar.\n */\nfunction getProps(\n\tcontentElement,\n\tselectedBlockElement,\n\tscrollContainer,\n\ttoolbarHeight,\n\tisSticky\n) {\n\tif ( ! contentElement || ! selectedBlockElement ) {\n\t\treturn DEFAULT_PROPS;\n\t}\n\n\t// Get how far the content area has been scrolled.\n\tconst scrollTop = scrollContainer?.scrollTop || 0;\n\n\tconst blockRect = getElementBounds( selectedBlockElement );\n\tconst contentRect = contentElement.getBoundingClientRect();\n\n\t// Get the vertical position of top of the visible content area.\n\tconst topOfContentElementInViewport = scrollTop + contentRect.top;\n\n\t// The document element's clientHeight represents the viewport height.\n\tconst viewportHeight =\n\t\tcontentElement.ownerDocument.documentElement.clientHeight;\n\n\t// The restricted height area is calculated as the sum of the\n\t// vertical position of the visible content area, plus the height\n\t// of the block toolbar.\n\tconst restrictedTopArea = topOfContentElementInViewport + toolbarHeight;\n\tconst hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;\n\n\tconst isBlockTallerThanViewport =\n\t\tblockRect.height > viewportHeight - toolbarHeight;\n\n\t// Sticky blocks are treated as if they will never have enough space for the toolbar above.\n\tif (\n\t\t! isSticky &&\n\t\t( hasSpaceForToolbarAbove || isBlockTallerThanViewport )\n\t) {\n\t\treturn DEFAULT_PROPS;\n\t}\n\n\treturn RESTRICTED_HEIGHT_PROPS;\n}\n\n/**\n * Determines the desired popover positioning behavior, returning a set of appropriate props.\n *\n * @param {Object}  elements\n * @param {Element} elements.contentElement The DOM element that represents the editor content or canvas.\n * @param {string}  elements.clientId       The clientId of the first selected block.\n *\n * @return {Object} The popover props used to determine the position of the toolbar.\n */\nexport default function useBlockToolbarPopoverProps( {\n\tcontentElement,\n\tclientId,\n} ) {\n\tconst selectedBlockElement = useBlockElement( clientId );\n\tconst [ toolbarHeight, setToolbarHeight ] = useState( 0 );\n\tconst { blockIndex, isSticky } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockIndex, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tblockIndex: getBlockIndex( clientId ),\n\t\t\t\tisSticky: hasStickyOrFixedPositionValue(\n\t\t\t\t\tgetBlockAttributes( clientId )\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst scrollContainer = useMemo( () => {\n\t\tif ( ! contentElement ) {\n\t\t\treturn;\n\t\t}\n\t\treturn getScrollContainer( contentElement );\n\t}, [ contentElement ] );\n\tconst [ props, setProps ] = useState( () =>\n\t\tgetProps(\n\t\t\tcontentElement,\n\t\t\tselectedBlockElement,\n\t\t\tscrollContainer,\n\t\t\ttoolbarHeight,\n\t\t\tisSticky\n\t\t)\n\t);\n\n\tconst popoverRef = useRefEffect( ( popoverNode ) => {\n\t\tsetToolbarHeight( popoverNode.offsetHeight );\n\t}, [] );\n\n\tconst updateProps = useCallback(\n\t\t() =>\n\t\t\tsetProps(\n\t\t\t\tgetProps(\n\t\t\t\t\tcontentElement,\n\t\t\t\t\tselectedBlockElement,\n\t\t\t\t\tscrollContainer,\n\t\t\t\t\ttoolbarHeight,\n\t\t\t\t\tisSticky\n\t\t\t\t)\n\t\t\t),\n\t\t[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]\n\t);\n\n\t// Update props when the block is moved. This also ensures the props are\n\t// correct on initial mount, and when the selected block or content element\n\t// changes (since the callback ref will update).\n\tuseLayoutEffect( updateProps, [ blockIndex, updateProps ] );\n\n\t// Update props when the viewport is resized or the block is resized.\n\tuseLayoutEffect( () => {\n\t\tif ( ! contentElement || ! selectedBlockElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update the toolbar props on viewport resize.\n\t\tconst contentView = contentElement?.ownerDocument?.defaultView;\n\t\tcontentView?.addEventHandler?.( 'resize', updateProps );\n\n\t\t// Update the toolbar props on block resize.\n\t\tlet resizeObserver;\n\t\tconst blockView = selectedBlockElement?.ownerDocument?.defaultView;\n\t\tif ( blockView.ResizeObserver ) {\n\t\t\tresizeObserver = new blockView.ResizeObserver( updateProps );\n\t\t\tresizeObserver.observe( selectedBlockElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\tcontentView?.removeEventHandler?.( 'resize', updateProps );\n\n\t\t\tif ( resizeObserver ) {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [ updateProps, contentElement, selectedBlockElement ] );\n\n\treturn {\n\t\t...props,\n\t\tref: popoverRef,\n\t};\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { getScrollContainer } from '@wordpress/dom';\nimport {\n\tuseCallback,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { hasStickyOrFixedPositionValue } from '../../hooks/position';\nimport { getElementBounds } from '../../utils/dom';\n\nconst COMMON_PROPS = {\n\tplacement: 'top-start',\n};\n\n// By default the toolbar sets the `shift` prop. If the user scrolls the page\n// down the toolbar will stay on screen by adopting a sticky position at the\n// top of the viewport.\nconst DEFAULT_PROPS = {\n\t...COMMON_PROPS,\n\tflip: false,\n\tshift: true,\n};\n\n// When there isn't enough height between the top of the block and the editor\n// canvas, the `shift` prop is set to `false`, as it will cause the block to be\n// obscured. The `flip` behavior is enabled, which positions the toolbar below\n// the block. This only happens if the block is smaller than the viewport, as\n// otherwise the toolbar will be off-screen.\nconst RESTRICTED_HEIGHT_PROPS = {\n\t...COMMON_PROPS,\n\tflip: true,\n\tshift: false,\n};\n\n/**\n * Get the popover props for the block toolbar, determined by the space at the top of the canvas and the toolbar height.\n *\n * @param {Element} contentElement       The DOM element that represents the editor content or canvas.\n * @param {Element} selectedBlockElement The outer DOM element of the first selected block.\n * @param {Element} scrollContainer      The scrollable container for the contentElement.\n * @param {number}  toolbarHeight        The height of the toolbar in pixels.\n * @param {boolean} isSticky             Whether or not the selected block is sticky or fixed.\n *\n * @return {Object} The popover props used to determine the position of the toolbar.\n */\nfunction getProps(\n\tcontentElement,\n\tselectedBlockElement,\n\tscrollContainer,\n\ttoolbarHeight,\n\tisSticky\n) {\n\tif ( ! contentElement || ! selectedBlockElement ) {\n\t\treturn DEFAULT_PROPS;\n\t}\n\n\t// Get how far the content area has been scrolled.\n\tconst scrollTop = scrollContainer?.scrollTop || 0;\n\n\tconst blockRect = getElementBounds( selectedBlockElement );\n\tconst contentRect = contentElement.getBoundingClientRect();\n\n\t// Get the vertical position of top of the visible content area.\n\tconst topOfContentElementInViewport = scrollTop + contentRect.top;\n\n\t// The document element's clientHeight represents the viewport height.\n\tconst viewportHeight =\n\t\tcontentElement.ownerDocument.documentElement.clientHeight;\n\n\t// The restricted height area is calculated as the sum of the\n\t// vertical position of the visible content area, plus the height\n\t// of the block toolbar.\n\tconst restrictedTopArea = topOfContentElementInViewport + toolbarHeight;\n\tconst hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;\n\n\tconst isBlockTallerThanViewport =\n\t\tblockRect.height > viewportHeight - toolbarHeight;\n\n\t// Sticky blocks are treated as if they will never have enough space for the toolbar above.\n\tif (\n\t\t! isSticky &&\n\t\t( hasSpaceForToolbarAbove || isBlockTallerThanViewport )\n\t) {\n\t\treturn DEFAULT_PROPS;\n\t}\n\n\treturn RESTRICTED_HEIGHT_PROPS;\n}\n\n/**\n * Determines the desired popover positioning behavior, returning a set of appropriate props.\n *\n * @param {Object}  elements\n * @param {Element} elements.contentElement The DOM element that represents the editor content or canvas.\n * @param {string}  elements.clientId       The clientId of the first selected block.\n *\n * @return {Object} The popover props used to determine the position of the toolbar.\n */\nexport default function useBlockToolbarPopoverProps( {\n\tcontentElement,\n\tclientId,\n} ) {\n\tconst selectedBlockElement = useBlockElement( clientId );\n\tconst [ toolbarHeight, setToolbarHeight ] = useState( 0 );\n\tconst { blockIndex, isSticky } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockIndex, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tblockIndex: getBlockIndex( clientId ),\n\t\t\t\tisSticky: hasStickyOrFixedPositionValue(\n\t\t\t\t\tgetBlockAttributes( clientId )\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst scrollContainer = useMemo( () => {\n\t\tif ( ! contentElement ) {\n\t\t\treturn;\n\t\t}\n\t\treturn getScrollContainer( contentElement );\n\t}, [ contentElement ] );\n\tconst [ props, setProps ] = useState( () =>\n\t\tgetProps(\n\t\t\tcontentElement,\n\t\t\tselectedBlockElement,\n\t\t\tscrollContainer,\n\t\t\ttoolbarHeight,\n\t\t\tisSticky\n\t\t)\n\t);\n\n\tconst popoverRef = useRefEffect( ( popoverNode ) => {\n\t\tsetToolbarHeight( popoverNode.offsetHeight );\n\t}, [] );\n\n\tconst updateProps = useCallback(\n\t\t() =>\n\t\t\tsetProps(\n\t\t\t\tgetProps(\n\t\t\t\t\tcontentElement,\n\t\t\t\t\tselectedBlockElement,\n\t\t\t\t\tscrollContainer,\n\t\t\t\t\ttoolbarHeight,\n\t\t\t\t\tisSticky\n\t\t\t\t)\n\t\t\t),\n\t\t[\n\t\t\tcontentElement,\n\t\t\tselectedBlockElement,\n\t\t\tscrollContainer,\n\t\t\ttoolbarHeight,\n\t\t\tisSticky,\n\t\t]\n\t);\n\n\t// Update props when the block is moved. This also ensures the props are\n\t// correct on initial mount, and when the selected block or content element\n\t// changes (since the callback ref will update).\n\tuseLayoutEffect( updateProps, [ blockIndex, updateProps ] );\n\n\t// Update props when the viewport is resized or the block is resized.\n\tuseLayoutEffect( () => {\n\t\tif ( ! contentElement || ! selectedBlockElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update the toolbar props on viewport resize.\n\t\tconst contentView = contentElement?.ownerDocument?.defaultView;\n\t\tcontentView?.addEventListener?.( 'resize', updateProps );\n\n\t\t// Update the toolbar props on block resize.\n\t\tlet resizeObserver;\n\t\tconst blockView = selectedBlockElement?.ownerDocument?.defaultView;\n\t\tif ( blockView?.ResizeObserver ) {\n\t\t\tresizeObserver = new blockView.ResizeObserver( updateProps );\n\t\t\tresizeObserver.observe( selectedBlockElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\tcontentView?.removeEventListener?.( 'resize', updateProps );\n\n\t\t\tif ( resizeObserver ) {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [ updateProps, contentElement, selectedBlockElement ] );\n\n\treturn {\n\t\t...props,\n\t\tref: popoverRef,\n\t};\n}\n"],
+  "mappings": "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",
   "names": ["import_dom", "blockEditorStore"]
 }

package/build/components/child-layout-control/index.cjs CHANGED Viewed

@@ -32,14 +32,36 @@ var import_use_get_number_of_blocks_before_cell = require("../grid/use-get-numbe
 var import_store = require("../../store/index.cjs");
 var import_use_settings = require("../use-settings/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-function helpText(selfStretch, parentLayout) {
-  const { orientation = "horizontal" } = parentLayout;
-  if (selfStretch === "fill") {
+var FLEX_CHILD_LAYOUT_VALUES = {
+  fit: "fit",
+  grow: "fill",
+  max: "fixed",
+  fixed: "fixedNoShrink"
+};
+var FLEX_SIZE_VALUES = [
+  FLEX_CHILD_LAYOUT_VALUES.max,
+  FLEX_CHILD_LAYOUT_VALUES.fixed
+];
+function isFlexSizeValue(value) {
+  return FLEX_SIZE_VALUES.includes(value);
+}
+function maxSizeLabel(parentLayout) {
+  const { orientation = "horizontal" } = parentLayout ?? {};
+  return orientation === "horizontal" ? (0, import_i18n._x)("Max", "Block with maximum width in flex layout") : (0, import_i18n._x)("Max", "Block with maximum height in flex layout");
+}
+function helpText(flexControlValue, parentLayout) {
+  const { orientation = "horizontal" } = parentLayout ?? {};
+  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow) {
     return (0, import_i18n.__)("Stretch to fill available space.");
   }
-  if (selfStretch === "fixed" && orientation === "horizontal") {
+  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max && orientation === "horizontal") {
+    return (0, import_i18n.__)("Specify a maximum width.");
+  } else if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max) {
+    return (0, import_i18n.__)("Specify a maximum height.");
+  }
+  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed && orientation === "horizontal") {
     return (0, import_i18n.__)("Specify a fixed width.");
-  } else if (selfStretch === "fixed") {
+  } else if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed) {
     return (0, import_i18n.__)("Specify a fixed height.");
   }
   return (0, import_i18n.__)("Fit contents.");
@@ -92,6 +114,8 @@ function FlexControls({
 }) {
   const { selfStretch, flexSize } = childLayout;
   const { orientation = "horizontal" } = parentLayout ?? {};
+  const flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;
+  const hasFlexSizeValue = isFlexSizeValue(flexControlValue);
   const hasFlexValue = () => !!selfStretch;
   const flexResetLabel = orientation === "horizontal" ? (0, import_i18n.__)("Width") : (0, import_i18n.__)("Height");
   const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
@@ -112,10 +136,10 @@ function FlexControls({
     });
   };
   (0, import_element.useEffect)(() => {
-    if (selfStretch === "fixed" && !flexSize) {
+    if (isFlexSizeValue(selfStretch) && !flexSize) {
       onChange({
         ...childLayout,
-        selfStretch: "fit"
+        selfStretch: FLEX_CHILD_LAYOUT_VALUES.fit
       });
     }
   }, []);
@@ -135,10 +159,10 @@ function FlexControls({
           {
             size: "__unstable-large",
             label: childLayoutOrientation(parentLayout),
-            value: selfStretch || "fit",
-            help: helpText(selfStretch, parentLayout),
+            value: flexControlValue,
+            help: helpText(flexControlValue, parentLayout),
             onChange: (value) => {
-              const newFlexSize = value !== "fixed" ? null : flexSize;
+              const newFlexSize = isFlexSizeValue(value) ? flexSize : null;
               onChange({
                 selfStretch: value,
                 flexSize: newFlexSize
@@ -149,47 +173,55 @@ function FlexControls({
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.__experimentalToggleGroupControlOption,
                 {
-                  value: "fit",
+                  value: FLEX_CHILD_LAYOUT_VALUES.fit,
                   label: (0, import_i18n._x)(
                     "Fit",
                     "Intrinsic block width in flex layout"
                   )
                 },
-                "fit"
+                FLEX_CHILD_LAYOUT_VALUES.fit
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.__experimentalToggleGroupControlOption,
                 {
-                  value: "fill",
+                  value: FLEX_CHILD_LAYOUT_VALUES.grow,
                   label: (0, import_i18n._x)(
                     "Grow",
                     "Block with expanding width in flex layout"
                   )
                 },
-                "fill"
+                FLEX_CHILD_LAYOUT_VALUES.grow
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.__experimentalToggleGroupControlOption,
                 {
-                  value: "fixed",
+                  value: FLEX_CHILD_LAYOUT_VALUES.max,
+                  label: maxSizeLabel(parentLayout)
+                },
+                FLEX_CHILD_LAYOUT_VALUES.max
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.__experimentalToggleGroupControlOption,
+                {
+                  value: FLEX_CHILD_LAYOUT_VALUES.fixed,
                   label: (0, import_i18n._x)(
                     "Fixed",
                     "Block with fixed width in flex layout"
                   )
                 },
-                "fixed"
+                FLEX_CHILD_LAYOUT_VALUES.fixed
               )
             ]
           }
         ),
-        selfStretch === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        hasFlexSizeValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_components.__experimentalUnitControl,
           {
             size: "__unstable-large",
             units,
             onChange: (value) => {
               onChange({
-                selfStretch,
+                selfStretch: flexControlValue,
                 flexSize: value
               });
             },
@@ -204,7 +236,7 @@ function FlexControls({
   );
 }
 function childLayoutOrientation(parentLayout) {
-  const { orientation = "horizontal" } = parentLayout;
+  const { orientation = "horizontal" } = parentLayout ?? {};
   return orientation === "horizontal" ? (0, import_i18n.__)("Width") : (0, import_i18n.__)("Height");
 }
 function GridControls({