npm - @wordpress/block-editor - Versions diffs - 15.23.0 → 16.0.0 - Mend

@wordpress/block-editor 15.23.0 → 16.0.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 (684) hide show

package/build/components/block-visibility/viewport-toolbar.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-visibility/viewport-toolbar.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { seen, unseen } from '@wordpress/icons';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nexport default function BlockVisibilityViewportToolbar( { clientIds } ) {\n\tconst hasBlockVisibilityButtonShownRef = useRef( false );\n\tconst { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocksByClientId, getBlockName, isBlockHiddenAnywhere } =\n\t\t\t\tunlock( select( blockEditorStore ) );\n\t\t\tconst _blocks = getBlocksByClientId( clientIds );\n\t\t\treturn {\n\t\t\t\tcanToggleBlockVisibility: _blocks.every( ( { clientId } ) =>\n\t\t\t\t\thasBlockSupport(\n\t\t\t\t\t\tgetBlockName( clientId ),\n\t\t\t\t\t\t'visibility',\n\t\t\t\t\t\ttrue\n\t\t\t\t\t)\n\t\t\t\t),\n\t\t\t\tareBlocksHiddenAnywhere: clientIds?.every( ( clientId ) =>\n\t\t\t\t\tisBlockHiddenAnywhere( clientId )\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\n\t\t[ clientIds ]\n\t);\n\tconst blockEditorDispatch = useDispatch( blockEditorStore );\n\n\t/*\n\t * If the block visibility button has been shown, we don't want to\n\t * remove it from the toolbar until the toolbar is rendered again\n\t * without it. Removing it beforehand can cause focus loss issues.\n\t * It needs to return focus from whence it came, and to do that,\n\t * we need to leave the button in the toolbar.\n\t */\n\tuseEffect( () => {\n\t\tif ( areBlocksHiddenAnywhere ) {\n\t\t\thasBlockVisibilityButtonShownRef.current = true;\n\t\t}\n\t}, [ areBlocksHiddenAnywhere ] );\n\n\tif (\n\t\t! areBlocksHiddenAnywhere &&\n\t\t! hasBlockVisibilityButtonShownRef.current\n\t) {\n\t\treturn null;\n\t}\n\n\tconst { showViewportModal } = unlock( blockEditorDispatch );\n\n\treturn (\n\t\t<ToolbarGroup className=\"block-editor-block-visibility-toolbar\">\n\t\t\t<ToolbarButton\n\t\t\t\tdisabled={ ! canToggleBlockVisibility }\n\t\t\t\ticon={ areBlocksHiddenAnywhere ? unseen : seen }\n\t\t\t\tlabel={\n\t\t\t\t\tareBlocksHiddenAnywhere ? __( 'Hidden' ) : __( 'Visible' )\n\t\t\t\t}\n\t\t\t\tonClick={ () => showViewportModal( clientIds ) }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAA4C;AAC5C,qBAAkC;AAClC,mBAA6B;AAC7B,oBAAgC;AAChC,kBAAuC;AAKvC,mBAA0C;AAC1C,yBAAuB;AAmDpB;AAjDY,SAAR,+BAAiD,EAAE,UAAU,GAAI;AACvE,QAAM,uCAAmC,uBAAQ,KAAM;AACvD,QAAM,EAAE,0BAA0B,wBAAwB,QAAI;AAAA,IAC7D,CAAE,WAAY;AACb,YAAM,EAAE,qBAAqB,cAAc,sBAAsB,QAChE,2BAAQ,OAAQ,aAAAA,KAAiB,CAAE;AACpC,YAAM,UAAU,oBAAqB,SAAU;AAC/C,aAAO;AAAA,QACN,0BAA0B,QAAQ;AAAA,UAAO,CAAE,EAAE,SAAS,UACrD;AAAA,YACC,aAAc,QAAS;AAAA,YACvB;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,QACA,yBAAyB,WAAW;AAAA,UAAO,CAAE,aAC5C,sBAAuB,QAAS;AAAA,QACjC;AAAA,MACD;AAAA,IACD;AAAA,IAEA,CAAE,SAAU;AAAA,EACb;AACA,QAAM,0BAAsB,yBAAa,aAAAA,KAAiB;AAS1D,gCAAW,MAAM;AAChB,QAAK,yBAA0B;AAC9B,uCAAiC,UAAU;AAAA,IAC5C;AAAA,EACD,GAAG,CAAE,uBAAwB,CAAE;AAE/B,MACC,CAAE,2BACF,CAAE,iCAAiC,SAClC;AACD,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,kBAAkB,QAAI,2BAAQ,mBAAoB;AAE1D,SACC,4CAAC,kCAAa,WAAU,yCACvB;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAE;AAAA,MACb,MAAO,0BAA0B,sBAAS;AAAA,MAC1C,OACC,8BAA0B,gBAAI,QAAS,QAAI,gBAAI,SAAU;AAAA,MAE1D,SAAU,MAAM,kBAAmB,SAAU;AAAA,MAC7C,iBAAc;AAAA;AAAA,EACf,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToolbarButton, ToolbarGroup } from '@wordpress/components';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { seen, unseen } from '@wordpress/icons';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport { useSettings } from '../use-settings';\n\nexport default function BlockVisibilityViewportToolbar( { clientIds } ) {\n\tconst hasBlockVisibilityButtonShownRef = useRef( false );\n\tconst [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );\n\tconst { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocksByClientId, getBlockName, isBlockHiddenAnywhere } =\n\t\t\t\tunlock( select( blockEditorStore ) );\n\t\t\tconst _blocks = getBlocksByClientId( clientIds );\n\t\t\treturn {\n\t\t\t\tcanToggleBlockVisibility: _blocks.every( ( { clientId } ) =>\n\t\t\t\t\thasBlockSupport(\n\t\t\t\t\t\tgetBlockName( clientId ),\n\t\t\t\t\t\t'visibility',\n\t\t\t\t\t\ttrue\n\t\t\t\t\t)\n\t\t\t\t),\n\t\t\t\tareBlocksHiddenAnywhere: clientIds?.every( ( clientId ) =>\n\t\t\t\t\tisBlockHiddenAnywhere( clientId )\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\n\t\t[ clientIds ]\n\t);\n\tconst blockEditorDispatch = useDispatch( blockEditorStore );\n\n\t/*\n\t * If the block visibility button has been shown, we don't want to\n\t * remove it from the toolbar until the toolbar is rendered again\n\t * without it. Removing it beforehand can cause focus loss issues.\n\t * It needs to return focus from whence it came, and to do that,\n\t * we need to leave the button in the toolbar.\n\t */\n\tuseEffect( () => {\n\t\tif ( areBlocksHiddenAnywhere ) {\n\t\t\thasBlockVisibilityButtonShownRef.current = true;\n\t\t}\n\t}, [ areBlocksHiddenAnywhere ] );\n\n\tif ( blockVisibility === false ) {\n\t\treturn null;\n\t}\n\n\tif (\n\t\t! areBlocksHiddenAnywhere &&\n\t\t! hasBlockVisibilityButtonShownRef.current\n\t) {\n\t\treturn null;\n\t}\n\n\tconst { showViewportModal } = unlock( blockEditorDispatch );\n\n\treturn (\n\t\t<ToolbarGroup className=\"block-editor-block-visibility-toolbar\">\n\t\t\t<ToolbarButton\n\t\t\t\tdisabled={ ! canToggleBlockVisibility }\n\t\t\t\ticon={ areBlocksHiddenAnywhere ? unseen : seen }\n\t\t\t\tlabel={\n\t\t\t\t\tareBlocksHiddenAnywhere ? __( 'Hidden' ) : __( 'Visible' )\n\t\t\t\t}\n\t\t\t\tonClick={ () => showViewportModal( clientIds ) }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAA4C;AAC5C,qBAAkC;AAClC,mBAA6B;AAC7B,oBAAgC;AAChC,kBAAuC;AAKvC,mBAA0C;AAC1C,yBAAuB;AACvB,0BAA4B;AAwDzB;AAtDY,SAAR,+BAAiD,EAAE,UAAU,GAAI;AACvE,QAAM,uCAAmC,uBAAQ,KAAM;AACvD,QAAM,CAAE,eAAgB,QAAI,iCAAa,8BAA+B;AACxE,QAAM,EAAE,0BAA0B,wBAAwB,QAAI;AAAA,IAC7D,CAAE,WAAY;AACb,YAAM,EAAE,qBAAqB,cAAc,sBAAsB,QAChE,2BAAQ,OAAQ,aAAAA,KAAiB,CAAE;AACpC,YAAM,UAAU,oBAAqB,SAAU;AAC/C,aAAO;AAAA,QACN,0BAA0B,QAAQ;AAAA,UAAO,CAAE,EAAE,SAAS,UACrD;AAAA,YACC,aAAc,QAAS;AAAA,YACvB;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,QACA,yBAAyB,WAAW;AAAA,UAAO,CAAE,aAC5C,sBAAuB,QAAS;AAAA,QACjC;AAAA,MACD;AAAA,IACD;AAAA,IAEA,CAAE,SAAU;AAAA,EACb;AACA,QAAM,0BAAsB,yBAAa,aAAAA,KAAiB;AAS1D,gCAAW,MAAM;AAChB,QAAK,yBAA0B;AAC9B,uCAAiC,UAAU;AAAA,IAC5C;AAAA,EACD,GAAG,CAAE,uBAAwB,CAAE;AAE/B,MAAK,oBAAoB,OAAQ;AAChC,WAAO;AAAA,EACR;AAEA,MACC,CAAE,2BACF,CAAE,iCAAiC,SAClC;AACD,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,kBAAkB,QAAI,2BAAQ,mBAAoB;AAE1D,SACC,4CAAC,kCAAa,WAAU,yCACvB;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAE;AAAA,MACb,MAAO,0BAA0B,sBAAS;AAAA,MAC1C,OACC,8BAA0B,gBAAI,QAAS,QAAI,gBAAI,SAAU;AAAA,MAE1D,SAAU,MAAM,kBAAmB,SAAU;AAAA,MAC7C,iBAAc;AAAA;AAAA,EACf,GACD;AAEF;",
   "names": ["blockEditorStore"]
 }

package/build/components/block-visibility/viewport-visibility-info.cjs CHANGED Viewed

@@ -54,6 +54,7 @@ function ViewportVisibilityInfo({ clientId }) {
   const {
     currentBlockVisibility,
     selectedDeviceType,
+    viewportSettings,
     hasParentHiddenEverywhere
   } = (0, import_data.useSelect)(
     (select) => {
@@ -65,9 +66,11 @@ function ViewportVisibilityInfo({ clientId }) {
         isBlockParentHiddenEverywhere,
         getSettings
       } = (0, import_lock_unlock.unlock)(select(import_store.store));
+      const settings = getSettings();
       return {
         currentBlockVisibility: getBlockAttributes(clientId)?.metadata?.blockVisibility,
-        selectedDeviceType: getSettings()?.[import_private_keys.deviceTypeKey]?.toLowerCase() || import_constants.BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+        selectedDeviceType: settings?.[import_private_keys.deviceTypeKey]?.toLowerCase() || import_constants.BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+        viewportSettings: settings?.__experimentalFeatures?.viewport,
         hasParentHiddenEverywhere: isBlockParentHiddenEverywhere(clientId)
       };
     },
@@ -79,6 +82,7 @@ function ViewportVisibilityInfo({ clientId }) {
   const { isBlockCurrentlyHidden, currentViewport } = (0, import_use_block_visibility.default)({
     blockVisibility: currentBlockVisibility,
     deviceType: selectedDeviceType,
+    viewportSettings,
     view: canvasView
   });
   const isBlockParentHiddenAtViewport = (0, import_data.useSelect)(

package/build/components/block-visibility/viewport-visibility-info.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-visibility/viewport-visibility-info.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon as WCIcon,\n\t__experimentalText as WCText,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { unseen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockVisibility from './use-block-visibility';\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { deviceTypeKey } from '../../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from './constants';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\nconst DEFAULT_VISIBILITY_STATE = {\n\tcurrentBlockVisibility: undefined,\n\thasParentHiddenEverywhere: false,\n\tselectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.key,\n};\n\nexport default function ViewportVisibilityInfo( { clientId } ) {\n\tconst {\n\t\tcurrentBlockVisibility,\n\t\tselectedDeviceType,\n\t\thasParentHiddenEverywhere,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn DEFAULT_VISIBILITY_STATE;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockParentHiddenEverywhere,\n\t\t\t\tgetSettings,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tcurrentBlockVisibility:\n\t\t\t\t\tgetBlockAttributes( clientId )?.metadata?.blockVisibility,\n\t\t\t\tselectedDeviceType:\n\t\t\t\t\tgetSettings()?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.key,\n\t\t\t\thasParentHiddenEverywhere:\n\t\t\t\t\tisBlockParentHiddenEverywhere( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Get the block's DOM element to derive the canvas iframe window,\n\t// so viewport detection matches the actual block rendering context.\n\tconst blockElement = useBlockElement( clientId );\n\tconst rawCanvasView = blockElement?.ownerDocument?.defaultView;\n\tconst canvasView = rawCanvasView === null ? undefined : rawCanvasView;\n\n\tconst { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {\n\t\tblockVisibility: currentBlockVisibility,\n\t\tdeviceType: selectedDeviceType,\n\t\tview: canvasView,\n\t} );\n\n\t/*\n\t * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.\n\t * Separated because it depends on currentViewport from the hook above.\n\t */\n\tconst isBlockParentHiddenAtViewport = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId || ! currentViewport ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t).isBlockParentHiddenAtViewport( clientId, currentViewport );\n\t\t},\n\t\t[ clientId, currentViewport ]\n\t);\n\n\tif (\n\t\t! (\n\t\t\tisBlockCurrentlyHidden ||\n\t\t\thasParentHiddenEverywhere ||\n\t\t\tisBlockParentHiddenAtViewport\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\t// Determine label based on whether block or parent is hidden\n\tlet label;\n\tif ( isBlockCurrentlyHidden ) {\n\t\t// Block is currently hidden - check if hidden everywhere or at specific viewport\n\t\tif ( currentBlockVisibility === false ) {\n\t\t\tlabel = __( 'Block is hidden' );\n\t\t} else {\n\t\t\tconst viewportLabel =\n\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\t\tcurrentViewport;\n\t\t\tlabel = sprintf(\n\t\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t\t__( 'Block is hidden on %s' ),\n\t\t\t\tviewportLabel\n\t\t\t);\n\t\t}\n\t}\n\n\t// Parent is hidden - check if hidden everywhere or at specific viewport\n\tif ( hasParentHiddenEverywhere ) {\n\t\tlabel = __( 'Parent block is hidden' );\n\t} else if ( isBlockParentHiddenAtViewport ) {\n\t\tconst viewportLabel =\n\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\tcurrentViewport;\n\t\tlabel = sprintf(\n\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t__( 'Parent block is hidden on %s' ),\n\t\t\tviewportLabel\n\t\t);\n\t}\n\n\treturn (\n\t\t<WCBadge className=\"block-editor-block-visibility-info\">\n\t\t\t<HStack spacing={ 2 } justify=\"start\">\n\t\t\t\t<WCIcon icon={ unseen } />\n\t\t\t\t<WCText>{ label }</WCText>\n\t\t\t</HStack>\n\t\t</WCBadge>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAKO;AACP,kBAA0B;AAC1B,kBAA4B;AAC5B,mBAAuB;AAKvB,yBAAuB;AACvB,mBAA0C;AAC1C,kCAA+B;AAC/B,4BAAgC;AAChC,0BAA8B;AAC9B,uBAA2C;AA8GxC;AA5GH,IAAM,EAAE,OAAO,QAAQ,QAAI,2BAAQ,kBAAAA,WAAsB;AACzD,IAAM,2BAA2B;AAAA,EAChC,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,oBAAoB,4CAA2B,QAAQ;AACxD;AAEe,SAAR,uBAAyC,EAAE,SAAS,GAAI;AAC9D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,QAAI,2BAAQ,OAAQ,aAAAC,KAAiB,CAAE;AAEvC,aAAO;AAAA,QACN,wBACC,mBAAoB,QAAS,GAAG,UAAU;AAAA,QAC3C,oBACC,YAAY,IAAK,iCAAc,GAAG,YAAY,KAC9C,4CAA2B,QAAQ;AAAA,QACpC,2BACC,8BAA+B,QAAS;AAAA,MAC1C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAIA,QAAM,mBAAe,uCAAiB,QAAS;AAC/C,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,aAAa,kBAAkB,OAAO,SAAY;AAExD,QAAM,EAAE,wBAAwB,gBAAgB,QAAI,4BAAAC,SAAoB;AAAA,IACvE,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,MAAM;AAAA,EACP,CAAE;AAMF,QAAM,oCAAgC;AAAA,IACrC,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,iBAAkB;AACtC,eAAO;AAAA,MACR;AACA,iBAAO;AAAA,QACN,OAAQ,aAAAD,KAAiB;AAAA,MAC1B,EAAE,8BAA+B,UAAU,eAAgB;AAAA,IAC5D;AAAA,IACA,CAAE,UAAU,eAAgB;AAAA,EAC7B;AAEA,MACC,EACC,0BACA,6BACA,gCAEA;AACD,WAAO;AAAA,EACR;AAGA,MAAI;AACJ,MAAK,wBAAyB;AAE7B,QAAK,2BAA2B,OAAQ;AACvC,kBAAQ,gBAAI,iBAAkB;AAAA,IAC/B,OAAO;AACN,YAAM,gBACL,4CAA4B,eAAgB,GAAG,SAC/C;AACD,kBAAQ;AAAA;AAAA,YAEP,gBAAI,uBAAwB;AAAA,QAC5B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,MAAK,2BAA4B;AAChC,gBAAQ,gBAAI,wBAAyB;AAAA,EACtC,WAAY,+BAAgC;AAC3C,UAAM,gBACL,4CAA4B,eAAgB,GAAG,SAC/C;AACD,gBAAQ;AAAA;AAAA,UAEP,gBAAI,8BAA+B;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AAEA,SACC,4CAAC,WAAQ,WAAU,sCAClB,uDAAC,kBAAAE,sBAAA,EAAO,SAAU,GAAI,SAAQ,SAC7B;AAAA,gDAAC,kBAAAC,MAAA,EAAO,MAAO,qBAAS;AAAA,IACxB,4CAAC,kBAAAC,oBAAA,EAAS,iBAAO;AAAA,KAClB,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon as WCIcon,\n\t__experimentalText as WCText,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { unseen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockVisibility from './use-block-visibility';\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { deviceTypeKey } from '../../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from './constants';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\nconst DEFAULT_VISIBILITY_STATE = {\n\tcurrentBlockVisibility: undefined,\n\thasParentHiddenEverywhere: false,\n\tselectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.key,\n};\n\nexport default function ViewportVisibilityInfo( { clientId } ) {\n\tconst {\n\t\tcurrentBlockVisibility,\n\t\tselectedDeviceType,\n\t\tviewportSettings,\n\t\thasParentHiddenEverywhere,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn DEFAULT_VISIBILITY_STATE;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockParentHiddenEverywhere,\n\t\t\t\tgetSettings,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\t\t\tconst settings = getSettings();\n\n\t\t\treturn {\n\t\t\t\tcurrentBlockVisibility:\n\t\t\t\t\tgetBlockAttributes( clientId )?.metadata?.blockVisibility,\n\t\t\t\tselectedDeviceType:\n\t\t\t\t\tsettings?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.key,\n\t\t\t\tviewportSettings: settings?.__experimentalFeatures?.viewport,\n\t\t\t\thasParentHiddenEverywhere:\n\t\t\t\t\tisBlockParentHiddenEverywhere( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Get the block's DOM element to derive the canvas iframe window,\n\t// so viewport detection matches the actual block rendering context.\n\tconst blockElement = useBlockElement( clientId );\n\tconst rawCanvasView = blockElement?.ownerDocument?.defaultView;\n\tconst canvasView = rawCanvasView === null ? undefined : rawCanvasView;\n\n\tconst { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {\n\t\tblockVisibility: currentBlockVisibility,\n\t\tdeviceType: selectedDeviceType,\n\t\tviewportSettings,\n\t\tview: canvasView,\n\t} );\n\n\t/*\n\t * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.\n\t * Separated because it depends on currentViewport from the hook above.\n\t */\n\tconst isBlockParentHiddenAtViewport = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId || ! currentViewport ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t).isBlockParentHiddenAtViewport( clientId, currentViewport );\n\t\t},\n\t\t[ clientId, currentViewport ]\n\t);\n\n\tif (\n\t\t! (\n\t\t\tisBlockCurrentlyHidden ||\n\t\t\thasParentHiddenEverywhere ||\n\t\t\tisBlockParentHiddenAtViewport\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\t// Determine label based on whether block or parent is hidden\n\tlet label;\n\tif ( isBlockCurrentlyHidden ) {\n\t\t// Block is currently hidden - check if hidden everywhere or at specific viewport\n\t\tif ( currentBlockVisibility === false ) {\n\t\t\tlabel = __( 'Block is hidden' );\n\t\t} else {\n\t\t\tconst viewportLabel =\n\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\t\tcurrentViewport;\n\t\t\tlabel = sprintf(\n\t\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t\t__( 'Block is hidden on %s' ),\n\t\t\t\tviewportLabel\n\t\t\t);\n\t\t}\n\t}\n\n\t// Parent is hidden - check if hidden everywhere or at specific viewport\n\tif ( hasParentHiddenEverywhere ) {\n\t\tlabel = __( 'Parent block is hidden' );\n\t} else if ( isBlockParentHiddenAtViewport ) {\n\t\tconst viewportLabel =\n\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\tcurrentViewport;\n\t\tlabel = sprintf(\n\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t__( 'Parent block is hidden on %s' ),\n\t\t\tviewportLabel\n\t\t);\n\t}\n\n\treturn (\n\t\t<WCBadge className=\"block-editor-block-visibility-info\">\n\t\t\t<HStack spacing={ 2 } justify=\"start\">\n\t\t\t\t<WCIcon icon={ unseen } />\n\t\t\t\t<WCText>{ label }</WCText>\n\t\t\t</HStack>\n\t\t</WCBadge>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAKO;AACP,kBAA0B;AAC1B,kBAA4B;AAC5B,mBAAuB;AAKvB,yBAAuB;AACvB,mBAA0C;AAC1C,kCAA+B;AAC/B,4BAAgC;AAChC,0BAA8B;AAC9B,uBAA2C;AAkHxC;AAhHH,IAAM,EAAE,OAAO,QAAQ,QAAI,2BAAQ,kBAAAA,WAAsB;AACzD,IAAM,2BAA2B;AAAA,EAChC,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,oBAAoB,4CAA2B,QAAQ;AACxD;AAEe,SAAR,uBAAyC,EAAE,SAAS,GAAI;AAC9D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,QAAI,2BAAQ,OAAQ,aAAAC,KAAiB,CAAE;AACvC,YAAM,WAAW,YAAY;AAE7B,aAAO;AAAA,QACN,wBACC,mBAAoB,QAAS,GAAG,UAAU;AAAA,QAC3C,oBACC,WAAY,iCAAc,GAAG,YAAY,KACzC,4CAA2B,QAAQ;AAAA,QACpC,kBAAkB,UAAU,wBAAwB;AAAA,QACpD,2BACC,8BAA+B,QAAS;AAAA,MAC1C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAIA,QAAM,mBAAe,uCAAiB,QAAS;AAC/C,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,aAAa,kBAAkB,OAAO,SAAY;AAExD,QAAM,EAAE,wBAAwB,gBAAgB,QAAI,4BAAAC,SAAoB;AAAA,IACvE,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,EACP,CAAE;AAMF,QAAM,oCAAgC;AAAA,IACrC,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,iBAAkB;AACtC,eAAO;AAAA,MACR;AACA,iBAAO;AAAA,QACN,OAAQ,aAAAD,KAAiB;AAAA,MAC1B,EAAE,8BAA+B,UAAU,eAAgB;AAAA,IAC5D;AAAA,IACA,CAAE,UAAU,eAAgB;AAAA,EAC7B;AAEA,MACC,EACC,0BACA,6BACA,gCAEA;AACD,WAAO;AAAA,EACR;AAGA,MAAI;AACJ,MAAK,wBAAyB;AAE7B,QAAK,2BAA2B,OAAQ;AACvC,kBAAQ,gBAAI,iBAAkB;AAAA,IAC/B,OAAO;AACN,YAAM,gBACL,4CAA4B,eAAgB,GAAG,SAC/C;AACD,kBAAQ;AAAA;AAAA,YAEP,gBAAI,uBAAwB;AAAA,QAC5B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,MAAK,2BAA4B;AAChC,gBAAQ,gBAAI,wBAAyB;AAAA,EACtC,WAAY,+BAAgC;AAC3C,UAAM,gBACL,4CAA4B,eAAgB,GAAG,SAC/C;AACD,gBAAQ;AAAA;AAAA,UAEP,gBAAI,8BAA+B;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AAEA,SACC,4CAAC,WAAQ,WAAU,sCAClB,uDAAC,kBAAAE,sBAAA,EAAO,SAAU,GAAI,SAAQ,SAC7B;AAAA,gDAAC,kBAAAC,MAAA,EAAO,MAAO,qBAAS;AAAA,IACxB,4CAAC,kBAAAC,oBAAA,EAAS,iBAAO;AAAA,KAClB,GACD;AAEF;",
   "names": ["componentsPrivateApis", "blockEditorStore", "useBlockVisibility", "HStack", "WCIcon", "WCText"]
 }

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

@@ -157,7 +157,6 @@ function FlexControls({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_components.__experimentalToggleGroupControl,
           {
-            size: "__unstable-large",
             label: childLayoutOrientation(parentLayout),
             value: flexControlValue,
             help: helpText(flexControlValue, parentLayout),
@@ -217,7 +216,6 @@ function FlexControls({
         hasFlexSizeValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_components.__experimentalUnitControl,
           {
-            size: "__unstable-large",
             units,
             onChange: (value) => {
               onChange({
@@ -289,7 +287,6 @@ function GridControls({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalInputControl,
             {
-              size: "__unstable-large",
               label: (0, import_i18n.__)("Column span"),
               type: "number",
               onChange: (value) => {
@@ -310,7 +307,6 @@ function GridControls({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalInputControl,
             {
-              size: "__unstable-large",
               label: (0, import_i18n.__)("Row span"),
               type: "number",
               onChange: (value) => {
@@ -347,7 +343,6 @@ function GridControls({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalInputControl,
             {
-              size: "__unstable-large",
               label: (0, import_i18n.__)("Column"),
               type: "number",
               onChange: (value) => {
@@ -377,7 +372,6 @@ function GridControls({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalInputControl,
             {
-              size: "__unstable-large",
               label: (0, import_i18n.__)("Row"),
               type: "number",
               onChange: (value) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/child-layout-control/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';\nimport { store as blockEditorStore } from '../../store';\nimport { useSettings } from '../use-settings';\n\n// These are the serialized `selfStretch` values. `max` used to be called\n// \"Fixed\" in the UI, but was renamed and replaced by `fixedNoShrink`.\nconst FLEX_CHILD_LAYOUT_VALUES = {\n\tfit: 'fit',\n\tgrow: 'fill',\n\tmax: 'fixed',\n\tfixed: 'fixedNoShrink',\n};\n\nconst FLEX_SIZE_VALUES = [\n\tFLEX_CHILD_LAYOUT_VALUES.max,\n\tFLEX_CHILD_LAYOUT_VALUES.fixed,\n];\n\nfunction isFlexSizeValue( value ) {\n\treturn FLEX_SIZE_VALUES.includes( value );\n}\n\nfunction maxSizeLabel( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal'\n\t\t? _x( 'Max', 'Block with maximum width in flex layout' )\n\t\t: _x( 'Max', 'Block with maximum height in flex layout' );\n}\n\nfunction helpText( flexControlValue, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\n\tif ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.max &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a maximum width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max ) {\n\t\treturn __( 'Specify a maximum height.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                      Props.\n * @param {Object}   props.value                The child layout value.\n * @param {Function} props.onChange             Function to update the child layout value.\n * @param {Object}   props.parentLayout         The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault     Whether the control is shown by default.\n * @param {string}   props.panelId              The panel ID.\n * @param {boolean}  props.showGridSpanDefaults Whether unset grid span controls should show default values.\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults = true,\n} ) {\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tif ( parentLayoutType === 'flex' ) {\n\t\treturn (\n\t\t\t<FlexControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t/>\n\t\t);\n\t} else if ( parentLayoutType === 'grid' ) {\n\t\treturn (\n\t\t\t<GridControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tshowGridSpanDefaults={ showGridSpanDefaults }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction FlexControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\tconst flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;\n\tconst hasFlexSizeValue = isFlexSizeValue( flexControlValue );\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( isFlexSizeValue( selfStretch ) && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: FLEX_CHILD_LAYOUT_VALUES.fit,\n\t\t\t} );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\thasValue={ hasFlexValue }\n\t\t\tlabel={ flexResetLabel }\n\t\t\tonDeselect={ resetFlex }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ flexControlValue }\n\t\t\t\thelp={ helpText( flexControlValue, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = isFlexSizeValue( value )\n\t\t\t\t\t\t? flexSize\n\t\t\t\t\t\t: null;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fit',\n\t\t\t\t\t\t'Intrinsic block width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Grow',\n\t\t\t\t\t\t'Block with expanding width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tlabel={ maxSizeLabel( parentLayout ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fixed',\n\t\t\t\t\t\t'Block with fixed width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ hasFlexSizeValue && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tselfStretch: flexControlValue,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n\nfunction GridControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults,\n} ) {\n\tconst { columnStart, rowStart, columnSpan, rowSpan } = childLayout;\n\tconst { columnCount, rowCount } = parentLayout ?? {};\n\tconst rootClientId = useSelect( ( select ) =>\n\t\tselect( blockEditorStore ).getBlockRootClientId( panelId )\n\t);\n\tconst { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\trootClientId,\n\t\tcolumnCount || 3\n\t);\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\t// Calculate max column span based on current position and grid width\n\tconst maxColumnSpan = columnCount\n\t\t? columnCount - ( columnStart ?? 1 ) + 1\n\t\t: undefined;\n\n\t// Calculate max row span based on current position and grid height\n\tconst maxRowSpan =\n\t\twindow.__experimentalEnableGridInteractivity && rowCount\n\t\t\t? rowCount - ( rowStart ?? 1 ) + 1\n\t\t\t: undefined;\n\tconst columnSpanValue =\n\t\tcolumnSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\tconst rowSpanValue = rowSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\n\treturn (\n\t\t<>\n\t\t\t<Flex\n\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\tconst newColumnSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxColumnSpan\n\t\t\t\t\t\t\t\t? Math.min( newColumnSpan, maxColumnSpan )\n\t\t\t\t\t\t\t\t: newColumnSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\tcolumnSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ columnSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxColumnSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newRowSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxRowSpan\n\t\t\t\t\t\t\t\t? Math.min( newRowSpan, maxRowSpan )\n\t\t\t\t\t\t\t\t: newRowSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\trowSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ rowSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxRowSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\n\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t// sized incorrectly.\n\t\t\t\t<Flex\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newColumnStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart: newColumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tnewColumnStart,\n\t\t\t\t\t\t\t\t\t\trowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tcolumnCount\n\t\t\t\t\t\t\t\t\t? columnCount - ( columnSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newRowStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart: newRowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\tnewRowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\trowCount\n\t\t\t\t\t\t\t\t\t? rowCount - ( rowSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';\nimport { store as blockEditorStore } from '../../store';\nimport { useSettings } from '../use-settings';\n\n// These are the serialized `selfStretch` values. `max` used to be called\n// \"Fixed\" in the UI, but was renamed and replaced by `fixedNoShrink`.\nconst FLEX_CHILD_LAYOUT_VALUES = {\n\tfit: 'fit',\n\tgrow: 'fill',\n\tmax: 'fixed',\n\tfixed: 'fixedNoShrink',\n};\n\nconst FLEX_SIZE_VALUES = [\n\tFLEX_CHILD_LAYOUT_VALUES.max,\n\tFLEX_CHILD_LAYOUT_VALUES.fixed,\n];\n\nfunction isFlexSizeValue( value ) {\n\treturn FLEX_SIZE_VALUES.includes( value );\n}\n\nfunction maxSizeLabel( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal'\n\t\t? _x( 'Max', 'Block with maximum width in flex layout' )\n\t\t: _x( 'Max', 'Block with maximum height in flex layout' );\n}\n\nfunction helpText( flexControlValue, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\n\tif ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.max &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a maximum width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max ) {\n\t\treturn __( 'Specify a maximum height.' );\n\t}\n\tif (\n\t\tflexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed &&\n\t\torientation === 'horizontal'\n\t) {\n\t\treturn __( 'Specify a fixed width.' );\n\t} else if ( flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed ) {\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Form to edit the child layout value.\n *\n * @param {Object}   props                      Props.\n * @param {Object}   props.value                The child layout value.\n * @param {Function} props.onChange             Function to update the child layout value.\n * @param {Object}   props.parentLayout         The parent layout value.\n *\n * @param {boolean}  props.isShownByDefault     Whether the control is shown by default.\n * @param {string}   props.panelId              The panel ID.\n * @param {boolean}  props.showGridSpanDefaults Whether unset grid span controls should show default values.\n * @return {Element} child layout edit element.\n */\nexport default function ChildLayoutControl( {\n\tvalue: childLayout = {},\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults = true,\n} ) {\n\tconst {\n\t\ttype: parentType,\n\t\tdefault: { type: defaultParentType = 'default' } = {},\n\t} = parentLayout ?? {};\n\tconst parentLayoutType = parentType || defaultParentType;\n\n\tif ( parentLayoutType === 'flex' ) {\n\t\treturn (\n\t\t\t<FlexControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t/>\n\t\t);\n\t} else if ( parentLayoutType === 'grid' ) {\n\t\treturn (\n\t\t\t<GridControls\n\t\t\t\tchildLayout={ childLayout }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tshowGridSpanDefaults={ showGridSpanDefaults }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn null;\n}\n\nfunction FlexControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n} ) {\n\tconst { selfStretch, flexSize } = childLayout;\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\tconst flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;\n\tconst hasFlexSizeValue = isFlexSizeValue( flexControlValue );\n\tconst hasFlexValue = () => !! selfStretch;\n\tconst flexResetLabel =\n\t\torientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\tconst resetFlex = () => {\n\t\tonChange( {\n\t\t\tselfStretch: undefined,\n\t\t\tflexSize: undefined,\n\t\t} );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( isFlexSizeValue( selfStretch ) && ! flexSize ) {\n\t\t\tonChange( {\n\t\t\t\t...childLayout,\n\t\t\t\tselfStretch: FLEX_CHILD_LAYOUT_VALUES.fit,\n\t\t\t} );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\thasValue={ hasFlexValue }\n\t\t\tlabel={ flexResetLabel }\n\t\t\tonDeselect={ resetFlex }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ flexControlValue }\n\t\t\t\thelp={ helpText( flexControlValue, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = isFlexSizeValue( value )\n\t\t\t\t\t\t? flexSize\n\t\t\t\t\t\t: null;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fit }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fit',\n\t\t\t\t\t\t'Intrinsic block width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.grow }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Grow',\n\t\t\t\t\t\t'Block with expanding width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.max }\n\t\t\t\t\tlabel={ maxSizeLabel( parentLayout ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tvalue={ FLEX_CHILD_LAYOUT_VALUES.fixed }\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Fixed',\n\t\t\t\t\t\t'Block with fixed width in flex layout'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ hasFlexSizeValue && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tselfStretch: flexControlValue,\n\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tlabel={ flexResetLabel }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout ?? {};\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n\nfunction GridControls( {\n\tchildLayout,\n\tonChange,\n\tparentLayout,\n\tisShownByDefault,\n\tpanelId,\n\tshowGridSpanDefaults,\n} ) {\n\tconst { columnStart, rowStart, columnSpan, rowSpan } = childLayout;\n\tconst { columnCount, rowCount } = parentLayout ?? {};\n\tconst rootClientId = useSelect( ( select ) =>\n\t\tselect( blockEditorStore ).getBlockRootClientId( panelId )\n\t);\n\tconst { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(\n\t\trootClientId,\n\t\tcolumnCount || 3\n\t);\n\tconst hasStartValue = () => !! columnStart || !! rowStart;\n\tconst hasSpanValue = () => !! columnSpan || !! rowSpan;\n\tconst resetGridStarts = () => {\n\t\tonChange( {\n\t\t\tcolumnStart: undefined,\n\t\t\trowStart: undefined,\n\t\t} );\n\t};\n\tconst resetGridSpans = () => {\n\t\tonChange( {\n\t\t\tcolumnSpan: undefined,\n\t\t\trowSpan: undefined,\n\t\t} );\n\t};\n\n\t// Calculate max column span based on current position and grid width\n\tconst maxColumnSpan = columnCount\n\t\t? columnCount - ( columnStart ?? 1 ) + 1\n\t\t: undefined;\n\n\t// Calculate max row span based on current position and grid height\n\tconst maxRowSpan =\n\t\twindow.__experimentalEnableGridInteractivity && rowCount\n\t\t\t? rowCount - ( rowStart ?? 1 ) + 1\n\t\t\t: undefined;\n\tconst columnSpanValue =\n\t\tcolumnSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\tconst rowSpanValue = rowSpan ?? ( showGridSpanDefaults ? 1 : undefined );\n\n\treturn (\n\t\t<>\n\t\t\t<Flex\n\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\thasValue={ hasSpanValue }\n\t\t\t\tlabel={ __( 'Grid span' ) }\n\t\t\t\tonDeselect={ resetGridSpans }\n\t\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\t\tpanelId={ panelId }\n\t\t\t>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tlabel={ __( 'Column span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\tconst newColumnSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxColumnSpan\n\t\t\t\t\t\t\t\t? Math.min( newColumnSpan, maxColumnSpan )\n\t\t\t\t\t\t\t\t: newColumnSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\tcolumnSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ columnSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxColumnSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tlabel={ __( 'Row span' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst newRowSpan =\n\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\tconst constrainedValue = maxRowSpan\n\t\t\t\t\t\t\t\t? Math.min( newRowSpan, maxRowSpan )\n\t\t\t\t\t\t\t\t: newRowSpan;\n\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\trowSpan: constrainedValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={ rowSpanValue }\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ maxRowSpan }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\n\t\t\t{ window.__experimentalEnableGridInteractivity && (\n\t\t\t\t// Use Flex with an explicit width on the FlexItem instead of HStack to\n\t\t\t\t// work around an issue in webkit where inputs with a max attribute are\n\t\t\t\t// sized incorrectly.\n\t\t\t\t<Flex\n\t\t\t\t\tas={ ToolsPanelItem }\n\t\t\t\t\thasValue={ hasStartValue }\n\t\t\t\t\tlabel={ __( 'Grid placement' ) }\n\t\t\t\t\tonDeselect={ resetGridStarts }\n\t\t\t\t\tisShownByDefault={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tlabel={ __( 'Column' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newColumnStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart: newColumnStart,\n\t\t\t\t\t\t\t\t\trowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tnewColumnStart,\n\t\t\t\t\t\t\t\t\t\trowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ columnStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tcolumnCount\n\t\t\t\t\t\t\t\t\t? columnCount - ( columnSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem style={ { width: '50%' } }>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tlabel={ __( 'Row' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t// Don't allow unsetting.\n\t\t\t\t\t\t\t\tconst newRowStart =\n\t\t\t\t\t\t\t\t\tvalue === '' ? 1 : parseInt( value, 10 );\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\trowStart: newRowStart,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\t\t\t\t\tmoveBlocksToPosition(\n\t\t\t\t\t\t\t\t\t[ panelId ],\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\trootClientId,\n\t\t\t\t\t\t\t\t\tgetNumberOfBlocksBeforeCell(\n\t\t\t\t\t\t\t\t\t\tcolumnStart,\n\t\t\t\t\t\t\t\t\t\tnewRowStart\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={ rowStart ?? 1 }\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\trowCount\n\t\t\t\t\t\t\t\t\t? rowCount - ( rowSpan ?? 1 ) + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["useCustomUnits", "VStack", "ToolsPanelItem", "ToggleGroupControl", "ToggleGroupControlOption", "UnitControl", "blockEditorStore", "InputControl"]
 }

package/build/components/colors-gradients/control.cjs CHANGED Viewed

@@ -92,12 +92,12 @@ function ColorGradientControlInner({
     // The `ColorPalette` must stay at a stable position in the tree whether
     // or not a notice is present. Wrapping it in a `VStack` only when a
     // notice appears remounts it, which resets the custom color picker back
-    // to the swatch view mid-edit. Keep `ColorPalette` last and toggle only
-    // the notice ahead of it; the notice's own bottom margin provides the
-    // spacing the wrapper used to.
+    // to the swatch view mid-edit. Keep `ColorPalette` first and toggle only
+    // the trailing notice after it, so the palette holds a stable index and
+    // the notice sits at the bottom of the popover.
     [TAB_IDS.color]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      noticeProps && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Notice, { isDismissible: false, ...noticeProps }),
-      colorPalette
+      colorPalette,
+      noticeProps && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Notice, { isDismissible: false, ...noticeProps })
     ] }),
     [TAB_IDS.gradient]: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.GradientPicker,

package/build/components/colors-gradients/control.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/control.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tcolorSlug,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` last and toggle only\n\t\t// the notice ahead of it; the notice's own bottom margin provides the\n\t\t// spacing the wrapper used to.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\n\t\t\t\t{ colorPalette }\n\t\t\t</>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tcolorSlug,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,wBAOO;AAKP,0BAA4B;AAC5B,yBAAuB;AAkDrB;AAhDF,IAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAC/C,IAAM,wBAAwB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEA,IAAM,UAAU,EAAE,OAAO,SAAS,UAAU,WAAW;AAEvD,SAAS,0BAA2B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,kBACL,kBACI,UAAU,OAAO,SAAS,KAAO,CAAE;AACxC,QAAM,qBACL,qBACI,aAAa,UAAU,SAAS,KAAO,CAAE;AAE9C,MAAK,CAAE,mBAAmB,CAAE,oBAAqB;AAChD,WAAO;AAAA,EACR;AAEA,QAAM,uBAAuB,qBAC1B,CAAE,UAAU,QAAQ,YAAa;AACjC,kBAAe,UAAU,OAAQ;AACjC,qBAAiB;AAAA,EACjB,IACA,CAAE,UAAU,QAAQ,YAAa,cAAe,UAAU,OAAQ;AAErE,QAAM,eACL;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR,cAAe;AAAA,MACf,UAAW;AAAA,MACT,GAAG,EAAE,QAAQ,oBAAoB;AAAA,MACnC;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD;AAGD,QAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOjB,CAAE,QAAQ,KAAM,GACf,4EACG;AAAA;AAAA,MACA,eACD,4CAAC,4BAAO,eAAgB,OAAU,GAAG,aAAc;AAAA,OAErD;AAAA,IAED,CAAE,QAAQ,QAAS,GAClB;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,UACC,kBACG,CAAE,gBAAiB;AACnB,2BAAkB,WAAY;AAC9B,wBAAc;AAAA,QACd,IACA;AAAA,QAEF,GAAG,EAAE,WAAW,uBAAuB;AAAA,QACzC;AAAA,QAGA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,QAAM,kBAAkB,CAAE,SACzB,4CAAC,SAAI,WAAU,8CACZ,oBAAW,IAAK,GACnB;AAGD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MAEA,sDAAC,cAAS,WAAU,iDACnB,uDAAC,kBAAAC,sBAAA,EAAO,SAAU,GACf;AAAA,qBACD,4CAAC,YACA,sDAAC,SAAI,WAAU,wDACd,sDAAC,8BAAY,aAAZ,EACE,iBACH,GACD,GACD;AAAA,QAEC,mBAAmB,sBACpB,4CAAC,SACA;AAAA,UAAC;AAAA;AAAA,YACA,cACC,gBACG,QAAQ,WACR,CAAC,CAAE,mBAAmB,QAAQ;AAAA,YAGlC;AAAA,2DAAC,KAAK,SAAL,EACA;AAAA,4DAAC,KAAK,KAAL,EAAS,OAAQ,QAAQ,OACvB,8BAAI,OAAQ,GACf;AAAA,gBACA,4CAAC,KAAK,KAAL,EAAS,OAAQ,QAAQ,UACvB,8BAAI,UAAW,GAClB;AAAA,iBACD;AAAA,cACA;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBACA,OAAQ,QAAQ;AAAA,kBAChB,WAAU;AAAA,kBACV,WAAY;AAAA,kBAEV,oBAAU;AAAA;AAAA,cACb;AAAA,cACA;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBACA,OAAQ,QAAQ;AAAA,kBAChB,WAAU;AAAA,kBACV,WAAY;AAAA,kBAEV,oBAAU;AAAA;AAAA,cACb;AAAA;AAAA;AAAA,QACD,GACD;AAAA,QAGC,CAAE,sBAAsB,gBAAiB,QAAQ,KAAM;AAAA,QACvD,CAAE,mBAAmB,gBAAiB,QAAQ,QAAS;AAAA,SAC1D,GACD;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,2BAA4B,OAAQ;AAC5C,QAAM,CAAE,QAAQ,WAAW,cAAc,eAAgB,QAAI;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAsB,CAAE;AAAA,MACxB,wBAAyB,CAAE;AAAA,MACzB,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,SAAS,qBAAsB,OAAQ;AACtC,MACC,sBAAsB,MAAO,CAAE,QAAS,MAAM,eAAgB,GAAI,CAAE,GACnE;AACD,WAAO,4CAAC,6BAA4B,GAAG,OAAQ;AAAA,EAChD;AACA,SAAO,4CAAC,8BAA6B,GAAG,OAAQ;AACjD;AAEA,IAAO,kBAAQ;",
   "names": ["componentsPrivateApis", "clsx", "VStack"]
 }

package/build/components/date-format-picker/index.cjs CHANGED Viewed

@@ -109,7 +109,6 @@ function NonDefaultControls({ format, onChange }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.CustomSelectControl,
       {
-        __next40pxDefaultSize: true,
         label: (0, import_i18n.__)("Choose a format"),
         options: [...suggestedOptions, customOption],
         value: isCustom ? customOption : suggestedOptions.find(

package/build/components/date-format-picker/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/date-format-picker/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somewhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}      props\n * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.\n * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.\n * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tas=\"fieldset\"\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"block-editor-date-format-picker\"\n\t\t>\n\t\t\t<VisuallyHidden render={ <legend /> }>\n\t\t\t\t{ __( 'Date format' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuB;AACvB,kBAAwC;AACxC,qBAAmD;AACnD,wBAMO;AACP,gBAA+B;AA6B7B;AAzBF,IAAM,cAAc,oBAAI,KAAK;AAC7B,YAAY,QAAS,EAAG;AACxB,YAAY,SAAU,YAAY,SAAS,IAAI,CAAE;AACjD,IAAK,YAAY,SAAS,MAAM,GAAI;AAEnC,cAAY,SAAU,CAAE;AACzB;AAae,SAAR,iBAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,IAAG;AAAA,MACH,SAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,oDAAC,4BAAe,QAAS,4CAAC,YAAO,GAC9B,8BAAI,aAAc,GACrB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAQ,gBAAI,gBAAiB;AAAA,YAC7B,MAAO,OAAI,gBAAI,UAAW,CAAE,SAAM;AAAA,cACjC;AAAA,cACA;AAAA,YACD,CAAE;AAAA,YACF,SAAU,CAAE;AAAA,YACZ,UAAW,CAAE,YACZ,SAAU,UAAU,OAAO,aAAc;AAAA;AAAA,QAE3C;AAAA,QACE,UACD,4CAAC,sBAAmB,QAAkB,UAAsB;AAAA;AAAA;AAAA,EAE9D;AAEF;AAEA,SAAS,mBAAoB,EAAE,QAAQ,SAAS,GAAI;AAQnD,QAAM,mBAAmB;AAAA,IACxB,GAAG,oBAAI,IAAK;AAAA;AAAA,MAEX;AAAA;AAAA,UAEA,gBAAI,SAAS,mBAAoB;AAAA;AAAA,UAEjC,gBAAI,eAAe,6BAA8B;AAAA;AAAA,UAEjD,gBAAI,UAAU,oBAAqB;AAAA;AAAA,UAEnC,gBAAI,gBAAgB,8BAA+B;AAAA;AAAA,UAEnD,gBAAI,UAAU,kBAAmB;AAAA;AAAA,UAEjC,gBAAI,OAAO,oCAAqC;AAAA,IACjD,CAAE;AAAA,EACH;AAEA,QAAM,mBAAmB;AAAA,IACxB,GAAG,iBAAiB,IAAK,CAAE,iBAAiB,WAAa;AAAA,MACxD,KAAK,aAAc,KAAM;AAAA,MACzB,UAAM,sBAAU,iBAAiB,WAAY;AAAA,MAC7C,QAAQ;AAAA,IACT,EAAI;AAAA,IACJ;AAAA,MACC,KAAK;AAAA,MACL,UAAM,2BAAe,WAAY;AAAA,MACjC,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,QAAM,eAAe;AAAA,IACpB,KAAK;AAAA,IACL,UAAM,gBAAI,QAAS;AAAA,IACnB,WACC;AAAA,IACD,UAAM,gBAAI,4BAA6B;AAAA,EACxC;AAEA,QAAM,CAAE,UAAU,WAAY,QAAI;AAAA,IACjC,MACC,CAAC,CAAE,UACH,CAAE,iBAAiB,KAAM,CAAE,WAAY,OAAO,WAAW,MAAO;AAAA,EAClE;AAEA,SACC,6CAAC,kBAAAA,sBAAA,EACA;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,WAAQ,gBAAI,iBAAkB;AAAA,QAC9B,SAAU,CAAE,GAAG,kBAAkB,YAAa;AAAA,QAC9C,OACC,WACG,eACA,iBAAiB;AAAA,UACjB,CAAE,WAAY,OAAO,WAAW;AAAA,QAChC,KAAK;AAAA,QAET,UAAW,CAAE,EAAE,aAAa,MAAO;AAClC,cAAK,iBAAiB,cAAe;AACpC,wBAAa,IAAK;AAAA,UACnB,OAAO;AACN,wBAAa,KAAM;AACnB,qBAAU,aAAa,MAAO;AAAA,UAC/B;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACE,YACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,eAAgB;AAAA,QAC5B,qBAAmB;AAAA,QACnB,UAAO;AAAA,cACN;AAAA,YACC;AAAA,UACD;AAAA,UACA;AAAA,YACC,MACC;AAAA,cAAC;AAAA;AAAA,gBACA,UAAO;AAAA,kBACN;AAAA,gBACD;AAAA;AAAA,YACD;AAAA,UAEF;AAAA,QACD;AAAA,QACA,OAAQ;AAAA,QACR,UAAW,CAAE,UAAW,SAAU,KAAM;AAAA;AAAA,IACzC;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somewhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object}      props\n * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.\n * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.\n * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<VStack\n\t\t\tas=\"fieldset\"\n\t\t\tspacing={ 4 }\n\t\t\tclassName=\"block-editor-date-format-picker\"\n\t\t>\n\t\t\t<VisuallyHidden render={ <legend /> }>\n\t\t\t\t{ __( 'Date format' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) }  ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t  ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["VStack"]
 }

package/build/components/dimensions-tool/aspect-ratio-tool.cjs CHANGED Viewed

@@ -82,8 +82,7 @@ function AspectRatioTool({
           label: (0, import_i18n.__)("Aspect ratio"),
           value: displayValue,
           options: options ?? aspectRatioOptions,
-          onChange,
-          size: "__unstable-large"
+          onChange
         }
       )
     }

package/build/components/dimensions-tool/aspect-ratio-tool.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/aspect-ratio-tool.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options ?? aspectRatioOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAuB;AAIvB,0BAA4B;AA8EzB;AAxDY,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AACpB,GAAI;AAEH,QAAM,eAAe,SAAS;AAE9B,QAAM,CAAE,eAAe,aAAa,iBAAkB,QAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,eAAe,aAAa,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IAC/D,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,iBAAiB,eAAe,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IACnE,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,qBAAqB;AAAA,IAC1B;AAAA,MACC,WAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO;AAAA,IACR;AAAA,IACA,GAAK,oBAAoB,iBAAiB,CAAC;AAAA,IAC3C,GAAK,eAAe,eAAe,CAAC;AAAA,IACpC;AAAA,MACC,WAAO,gBAAI,UAAU,4CAA6C;AAAA,MAClE,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,UACC,WAAW,WAAW,MAAM,iBAAiB;AAAA,MAE9C,WAAQ,gBAAI,cAAe;AAAA,MAC3B,YAAa,MAAM,SAAU,MAAU;AAAA,MACvC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAQ,gBAAI,cAAe;AAAA,UAC3B,OAAQ;AAAA,UACR,SAAU,WAAW;AAAA,UACrB;AAAA,UACA,MAAK;AAAA;AAAA,MACN;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options ?? aspectRatioOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAuB;AAIvB,0BAA4B;AA8EzB;AAxDY,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AACpB,GAAI;AAEH,QAAM,eAAe,SAAS;AAE9B,QAAM,CAAE,eAAe,aAAa,iBAAkB,QAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,eAAe,aAAa,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IAC/D,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,iBAAiB,eAAe,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IACnE,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,qBAAqB;AAAA,IAC1B;AAAA,MACC,WAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO;AAAA,IACR;AAAA,IACA,GAAK,oBAAoB,iBAAiB,CAAC;AAAA,IAC3C,GAAK,eAAe,eAAe,CAAC;AAAA,IACpC;AAAA,MACC,WAAO,gBAAI,UAAU,4CAA6C;AAAA,MAClE,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,UACC,WAAW,WAAW,MAAM,iBAAiB;AAAA,MAE9C,WAAQ,gBAAI,cAAe;AAAA,MAC3B,YAAa,MAAM,SAAU,MAAU;AAAA,MACvC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,WAAQ,gBAAI,cAAe;AAAA,UAC3B,OAAQ;AAAA,UACR,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
   "names": ["ToolsPanelItem"]
 }

package/build/components/dimensions-tool/scale-tool.cjs CHANGED Viewed

@@ -89,7 +89,6 @@ function ScaleTool({
           help: scaleHelp[displayValue],
           value: displayValue,
           onChange,
-          size: "__unstable-large",
           children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalToggleGroupControlOption,
             {

package/build/components/dimensions-tool/scale-tool.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/scale-tool.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {React.ReactElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\tconst displayValue = value ?? defaultValue;\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAwB;AACxB,kBAAuB;AAyGlB;AA1FL,IAAM,wBAAwB;AAAA,EAC7B;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM,gBAAI,2CAA4C;AAAA,EACvD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,WAAW,qCAAsC;AAAA,IAC5D,UAAM,gBAAI,gDAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,SAAS,qCAAsC;AAAA,IAC1D,UAAM,gBAAI,8CAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,cAAc,qCAAsC;AAAA,IAC/D,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AA0Be,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe,sBAAuB,CAAE,EAAE;AAAA,EAC1C,mBAAmB;AACpB,GAAI;AACH,QAAM,eAAe,SAAS;AAE9B,QAAM,gBAAY,wBAAS,MAAM;AAChC,WAAO,QAAQ,OAAQ,CAAE,KAAK,WAAY;AACzC,UAAK,OAAO,KAAM,IAAI,OAAO;AAC7B,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,EACP,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,MAC7C;AAAA,MACA,UAAW,MAAM,iBAAiB;AAAA,MAClC,YAAa,MAAM,SAAU,YAAa;AAAA,MAC1C;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,UAC7C,SAAO;AAAA,UACP,MAAO,UAAW,YAAa;AAAA,UAC/B,OAAQ;AAAA,UACR;AAAA,UACA,MAAK;AAAA,UAEH,kBAAQ,IAAK,CAAE,WAChB;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA;AAAA,YADC,OAAO;AAAA,UAEd,CACC;AAAA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {React.ReactElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\tconst displayValue = value ?? defaultValue;\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAwB;AACxB,kBAAuB;AAwGlB;AAzFL,IAAM,wBAAwB;AAAA,EAC7B;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM,gBAAI,2CAA4C;AAAA,EACvD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,WAAW,qCAAsC;AAAA,IAC5D,UAAM,gBAAI,gDAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,SAAS,qCAAsC;AAAA,IAC1D,UAAM,gBAAI,8CAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,cAAc,qCAAsC;AAAA,IAC/D,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AA0Be,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe,sBAAuB,CAAE,EAAE;AAAA,EAC1C,mBAAmB;AACpB,GAAI;AACH,QAAM,eAAe,SAAS;AAE9B,QAAM,gBAAY,wBAAS,MAAM;AAChC,WAAO,QAAQ,OAAQ,CAAE,KAAK,WAAY;AACzC,UAAK,OAAO,KAAM,IAAI,OAAO;AAC7B,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,EACP,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,MAC7C;AAAA,MACA,UAAW,MAAM,iBAAiB;AAAA,MAClC,YAAa,MAAM,SAAU,YAAa;AAAA,MAC1C;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,UAC7C,SAAO;AAAA,UACP,MAAO,UAAW,YAAa;AAAA,UAC/B,OAAQ;AAAA,UACR;AAAA,UAEE,kBAAQ,IAAK,CAAE,WAChB;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA;AAAA,YADC,OAAO;AAAA,UAEd,CACC;AAAA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
   "names": ["ToolsPanelItem", "ToggleGroupControl", "ToggleGroupControlOption"]
 }

package/build/components/dimensions-tool/width-height-tool.cjs CHANGED Viewed

@@ -64,8 +64,7 @@ function WidthHeightTool({
             units,
             min: 0,
             value: width,
-            onChange: onDimensionChange("width"),
-            size: "__unstable-large"
+            onChange: onDimensionChange("width")
           }
         )
       }
@@ -88,8 +87,7 @@ function WidthHeightTool({
             units,
             min: 0,
             value: height,
-            onChange: onDimensionChange("height"),
-            size: "__unstable-large"
+            onChange: onDimensionChange("height")
           }
         )
       }

package/build/components/dimensions-tool/width-height-tool.cjs.map CHANGED Viewed

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

package/build/components/font-appearance-control/index.cjs CHANGED Viewed

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 // packages/block-editor/src/components/font-appearance-control/index.js
@@ -34,7 +24,6 @@ __export(font_appearance_control_exports, {
 });
 module.exports = __toCommonJS(font_appearance_control_exports);
 var import_components = require("@wordpress/components");
-var import_deprecated = __toESM(require("@wordpress/deprecated"));
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
 var import_get_font_styles_and_weights = require("../../utils/get-font-styles-and-weights.cjs");
@@ -50,8 +39,12 @@ var getFontAppearanceLabel = (hasFontStyles, hasFontWeights) => {
 };
 function FontAppearanceControl(props) {
   const {
-    /** Start opting into the larger default height that will become the default size in a future version. */
-    __next40pxDefaultSize = false,
+    /**
+     * Start opting into the larger default height that will become the default size in a future version.
+     *
+     * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+     */
+    __next40pxDefaultSize: _next40pxDefaultSize,
     onChange,
     hasFontStyles = true,
     hasFontWeights = true,
@@ -134,23 +127,11 @@ function FontAppearanceControl(props) {
       currentSelection.name
     );
   };
-  if (!__next40pxDefaultSize && (otherProps.size === void 0 || otherProps.size === "default")) {
-    (0, import_deprecated.default)(
-      `36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
-      {
-        since: "6.8",
-        version: "7.1",
-        hint: "Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version."
-      }
-    );
-  }
   return hasStylesOrWeights && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.CustomSelectControl,
     {
       ...otherProps,
       className: "components-font-appearance-control",
-      __next40pxDefaultSize,
-      __shouldNotWarnDeprecated36pxSize: true,
       label,
       describedBy: getDescribedBy(),
       options: selectOptions,