@wordpress/block-editor 15.1.0 → 15.1.1-next.0f6f9d12c.0

package/src/components/rich-text/use-format-types.js

@@ -5,6 +5,11 @@ import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as richTextStore } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { essentialFormatKey } from '../../store/private-keys';
+
 function formatTypesSelector( select ) {
 	return select( richTextStore ).getFormatTypes();
 }
@@ -56,35 +61,53 @@ function getPrefixedSelectKeys( selected, prefix ) {
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
  *
- * @param {Object}  $0                              Options
- * @param {string}  $0.clientId                     Block client ID.
- * @param {string}  $0.identifier                   Block attribute.
- * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
- * @param {Array}   $0.allowedFormats               Allowed formats
+ * @param {Object}  options                                Options
+ * @param {string}  options.clientId                       Block client ID.
+ * @param {string}  options.identifier                     Block attribute.
+ * @param {Array}   options.allowedFormats                 Allowed formats
+ * @param {boolean} options.withoutInteractiveFormatting   Whether to clean the interactive formatting or not.
+ * @param {boolean} options.disableNoneEssentialFormatting Whether to disable none-essential formatting or not.
  */
 export function useFormatTypes( {
 	clientId,
 	identifier,
-	withoutInteractiveFormatting,
 	allowedFormats,
+	withoutInteractiveFormatting,
+	disableNoneEssentialFormatting = false,
 } ) {
 	const allFormatTypes = useSelect( formatTypesSelector, [] );
 	const formatTypes = useMemo( () => {
-		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
-			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
-				return false;
-			}
+		return allFormatTypes.filter(
+			( {
+				name,
+				interactive,
+				tagName,
+				[ essentialFormatKey ]: isEssential,
+			} ) => {
+				if ( allowedFormats && ! allowedFormats.includes( name ) ) {
+					return false;
+				}
 
-			if (
-				withoutInteractiveFormatting &&
-				( interactive || interactiveContentTags.has( tagName ) )
-			) {
-				return false;
-			}
+				if ( disableNoneEssentialFormatting && ! isEssential ) {
+					return false;
+				}
 
-			return true;
-		} );
-	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
+				if (
+					withoutInteractiveFormatting &&
+					( interactive || interactiveContentTags.has( tagName ) )
+				) {
+					return false;
+				}
+
+				return true;
+			}
+		);
+	}, [
+		allFormatTypes,
+		allowedFormats,
+		disableNoneEssentialFormatting,
+		withoutInteractiveFormatting,
+	] );
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {

package/src/hooks/duotone.js

@@ -32,7 +32,11 @@ import {
 } from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
-import { useBlockSettings, usePrivateStyleOverride } from './utils';
+import {
+	cleanEmptyObject,
+	useBlockSettings,
+	usePrivateStyleOverride,
+} from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
@@ -141,7 +145,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 								...newDuotone?.filter,
 							},
 						};
-						setAttributes( { style: newStyle } );
+						setAttributes( {
+							style: cleanEmptyObject( newStyle ),
+						} );
 					} }
 					settings={ settings }
 				/>
@@ -166,7 +172,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
 							},
 						};
-						setAttributes( { style: newStyle } );
+						setAttributes( {
+							style: cleanEmptyObject( newStyle ),
+						} );
 					} }
 					settings={ settings }
 				/>

package/src/hooks/utils.js

@@ -268,6 +268,7 @@ export function useBlockSettings( name, parentLayout ) {
 		borderRadius,
 		borderStyle,
 		borderWidth,
+		borderRadiusSizes,
 		customColorsEnabled,
 		customColors,
 		customDuotone,
@@ -325,6 +326,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'border.radius',
 		'border.style',
 		'border.width',
+		'border.radiusSizes',
 		'color.custom',
 		'color.palette.custom',
 		'color.customDuotone',
@@ -423,6 +425,7 @@ export function useBlockSettings( name, parentLayout ) {
 				radius: borderRadius,
 				style: borderStyle,
 				width: borderWidth,
+				radiusSizes: borderRadiusSizes,
 			},
 			dimensions: {
 				aspectRatio,
@@ -469,6 +472,7 @@ export function useBlockSettings( name, parentLayout ) {
 		borderRadius,
 		borderStyle,
 		borderWidth,
+		borderRadiusSizes,
 		customColorsEnabled,
 		customColors,
 		customDuotone,

package/src/private-apis.js

@@ -40,6 +40,7 @@ import {
 	globalStylesLinksDataKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
+	essentialFormatKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -101,4 +102,5 @@ lock( privateApis, {
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
 	mediaEditKey,
+	essentialFormatKey,
 } );

package/src/store/private-keys.js

@@ -4,3 +4,4 @@ export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
 export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
 export const mediaEditKey = Symbol( 'mediaEditKey' );
+export const essentialFormatKey = Symbol( 'essentialFormat' );

package/build/components/border-radius-control/all-input-control.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = AllInputControl;
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-function AllInputControl({
-  onChange,
-  selectedUnits,
-  setSelectedUnits,
-  values,
-  ...props
-}) {
-  let allValue = (0, _utils.getAllValue)(values);
-  if (allValue === undefined) {
-    // If we don't have any value set the unit to any current selection
-    // or the most common unit from the individual radii values.
-    allValue = (0, _utils.getAllUnit)(selectedUnits);
-  }
-  const hasValues = (0, _utils.hasDefinedValues)(values);
-  const isMixed = hasValues && (0, _utils.hasMixedValues)(values);
-  const allPlaceholder = isMixed ? (0, _i18n.__)('Mixed') : null;
-
-  // Filter out CSS-unit-only values to prevent invalid styles.
-  const handleOnChange = next => {
-    const isNumeric = !isNaN(parseFloat(next));
-    const nextValue = isNumeric ? next : undefined;
-    onChange(nextValue);
-  };
-
-  // Store current unit selection for use as fallback for individual
-  // radii controls.
-  const handleOnUnitChange = unit => {
-    setSelectedUnits({
-      topLeft: unit,
-      topRight: unit,
-      bottomLeft: unit,
-      bottomRight: unit
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
-    ...props,
-    "aria-label": (0, _i18n.__)('Border radius'),
-    disableUnits: isMixed,
-    isOnly: true,
-    value: allValue,
-    onChange: handleOnChange,
-    onUnitChange: handleOnUnitChange,
-    placeholder: allPlaceholder,
-    size: "__unstable-large"
-  });
-}
-//# sourceMappingURL=all-input-control.js.map

package/build/components/border-radius-control/all-input-control.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_i18n","_utils","_jsxRuntime","AllInputControl","onChange","selectedUnits","setSelectedUnits","values","props","allValue","getAllValue","undefined","getAllUnit","hasValues","hasDefinedValues","isMixed","hasMixedValues","allPlaceholder","__","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","handleOnUnitChange","unit","topLeft","topRight","bottomLeft","bottomRight","jsx","__experimentalUnitControl","disableUnits","isOnly","value","onUnitChange","placeholder","size"],"sources":["@wordpress/block-editor/src/components/border-radius-control/all-input-control.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUnitControl as UnitControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasMixedValues,\n\thasDefinedValues,\n} from './utils';\n\nexport default function AllInputControl( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues,\n\t...props\n} ) {\n\tlet allValue = getAllValue( values );\n\n\tif ( allValue === undefined ) {\n\t\t// If we don't have any value set the unit to any current selection\n\t\t// or the most common unit from the individual radii values.\n\t\tallValue = getAllUnit( selectedUnits );\n\t}\n\n\tconst hasValues = hasDefinedValues( values );\n\tconst isMixed = hasValues && hasMixedValues( values );\n\tconst allPlaceholder = isMixed ? __( 'Mixed' ) : null;\n\n\t// Filter out CSS-unit-only values to prevent invalid styles.\n\tconst handleOnChange = ( next ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tonChange( nextValue );\n\t};\n\n\t// Store current unit selection for use as fallback for individual\n\t// radii controls.\n\tconst handleOnUnitChange = ( unit ) => {\n\t\tsetSelectedUnits( {\n\t\t\ttopLeft: unit,\n\t\t\ttopRight: unit,\n\t\t\tbottomLeft: unit,\n\t\t\tbottomRight: unit,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\taria-label={ __( 'Border radius' ) }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t\tsize=\"__unstable-large\"\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAKiB,IAAAG,WAAA,GAAAH,OAAA;AAdjB;AACA;AACA;;AAIA;AACA;AACA;;AAQe,SAASI,eAAeA,CAAE;EACxCC,QAAQ;EACRC,aAAa;EACbC,gBAAgB;EAChBC,MAAM;EACN,GAAGC;AACJ,CAAC,EAAG;EACH,IAAIC,QAAQ,GAAG,IAAAC,kBAAW,EAAEH,MAAO,CAAC;EAEpC,IAAKE,QAAQ,KAAKE,SAAS,EAAG;IAC7B;IACA;IACAF,QAAQ,GAAG,IAAAG,iBAAU,EAAEP,aAAc,CAAC;EACvC;EAEA,MAAMQ,SAAS,GAAG,IAAAC,uBAAgB,EAAEP,MAAO,CAAC;EAC5C,MAAMQ,OAAO,GAAGF,SAAS,IAAI,IAAAG,qBAAc,EAAET,MAAO,CAAC;EACrD,MAAMU,cAAc,GAAGF,OAAO,GAAG,IAAAG,QAAE,EAAE,OAAQ,CAAC,GAAG,IAAI;;EAErD;EACA,MAAMC,cAAc,GAAKC,IAAI,IAAM;IAClC,MAAMC,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IAC/C,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGT,SAAS;IAC9CP,QAAQ,CAAEoB,SAAU,CAAC;EACtB,CAAC;;EAED;EACA;EACA,MAAMC,kBAAkB,GAAKC,IAAI,IAAM;IACtCpB,gBAAgB,CAAE;MACjBqB,OAAO,EAAED,IAAI;MACbE,QAAQ,EAAEF,IAAI;MACdG,UAAU,EAAEH,IAAI;MAChBI,WAAW,EAAEJ;IACd,CAAE,CAAC;EACJ,CAAC;EAED,oBACC,IAAAxB,WAAA,CAAA6B,GAAA,EAACjC,WAAA,CAAAkC,yBAAW;IAAA,GACNxB,KAAK;IACV,cAAa,IAAAU,QAAE,EAAE,eAAgB,CAAG;IACpCe,YAAY,EAAGlB,OAAS;IACxBmB,MAAM;IACNC,KAAK,EAAG1B,QAAU;IAClBL,QAAQ,EAAGe,cAAgB;IAC3BiB,YAAY,EAAGX,kBAAoB;IACnCY,WAAW,EAAGpB,cAAgB;IAC9BqB,IAAI,EAAC;EAAkB,CACvB,CAAC;AAEJ","ignoreList":[]}

package/build/components/border-radius-control/input-controls.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BoxInputControls;
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-const CORNERS = {
-  topLeft: (0, _i18n.__)('Top left'),
-  topRight: (0, _i18n.__)('Top right'),
-  bottomLeft: (0, _i18n.__)('Bottom left'),
-  bottomRight: (0, _i18n.__)('Bottom right')
-};
-function BoxInputControls({
-  onChange,
-  selectedUnits,
-  setSelectedUnits,
-  values: valuesProp,
-  ...props
-}) {
-  const createHandleOnChange = corner => next => {
-    if (!onChange) {
-      return;
-    }
-
-    // Filter out CSS-unit-only values to prevent invalid styles.
-    const isNumeric = !isNaN(parseFloat(next));
-    const nextValue = isNumeric ? next : undefined;
-    onChange({
-      ...values,
-      [corner]: nextValue
-    });
-  };
-  const createHandleOnUnitChange = side => next => {
-    const newUnits = {
-      ...selectedUnits
-    };
-    newUnits[side] = next;
-    setSelectedUnits(newUnits);
-  };
-
-  // For shorthand style & backwards compatibility, handle flat string value.
-  const values = typeof valuesProp !== 'string' ? valuesProp : {
-    topLeft: valuesProp,
-    topRight: valuesProp,
-    bottomLeft: valuesProp,
-    bottomRight: valuesProp
-  };
-
-  // Controls are wrapped in tooltips as visible labels aren't desired here.
-  // Tooltip rendering also requires the UnitControl to be wrapped. See:
-  // https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "components-border-radius-control__input-controls-wrapper",
-    children: Object.entries(CORNERS).map(([corner, label]) => {
-      const [parsedQuantity, parsedUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values[corner]);
-      const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
-        text: label,
-        placement: "top",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "components-border-radius-control__tooltip-wrapper",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
-            ...props,
-            "aria-label": label,
-            value: [parsedQuantity, computedUnit].join(''),
-            onChange: createHandleOnChange(corner),
-            onUnitChange: createHandleOnUnitChange(corner),
-            size: "__unstable-large"
-          })
-        })
-      }, corner);
-    })
-  });
-}
-//# sourceMappingURL=input-controls.js.map

package/build/components/border-radius-control/input-controls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_i18n","_jsxRuntime","CORNERS","topLeft","__","topRight","bottomLeft","bottomRight","BoxInputControls","onChange","selectedUnits","setSelectedUnits","values","valuesProp","props","createHandleOnChange","corner","next","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","side","newUnits","jsx","className","children","Object","entries","map","label","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","flat","Tooltip","text","placement","__experimentalUnitControl","value","join","onUnitChange","size"],"sources":["@wordpress/block-editor/src/components/border-radius-control/input-controls.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst CORNERS = {\n\ttopLeft: __( 'Top left' ),\n\ttopRight: __( 'Top right' ),\n\tbottomLeft: __( 'Bottom left' ),\n\tbottomRight: __( 'Bottom right' ),\n};\n\nexport default function BoxInputControls( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\t...props\n} ) {\n\tconst createHandleOnChange = ( corner ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tonChange( {\n\t\t\t...values,\n\t\t\t[ corner ]: nextValue,\n\t\t} );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tnewUnits[ side ] = next;\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t  };\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ corner ] );\n\n\t\t\t\tconst computedUnit = values[ corner ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ corner ] || selectedUnits.flat;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip text={ label } placement=\"top\" key={ corner }>\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\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\tonChange={ createHandleOnChange( corner ) }\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tcorner\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AAAqC,IAAAE,WAAA,GAAAF,OAAA;AARrC;AACA;AACA;;AAQA,MAAMG,OAAO,GAAG;EACfC,OAAO,EAAE,IAAAC,QAAE,EAAE,UAAW,CAAC;EACzBC,QAAQ,EAAE,IAAAD,QAAE,EAAE,WAAY,CAAC;EAC3BE,UAAU,EAAE,IAAAF,QAAE,EAAE,aAAc,CAAC;EAC/BG,WAAW,EAAE,IAAAH,QAAE,EAAE,cAAe;AACjC,CAAC;AAEc,SAASI,gBAAgBA,CAAE;EACzCC,QAAQ;EACRC,aAAa;EACbC,gBAAgB;EAChBC,MAAM,EAAEC,UAAU;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,oBAAoB,GAAKC,MAAM,IAAQC,IAAI,IAAM;IACtD,IAAK,CAAER,QAAQ,EAAG;MACjB;IACD;;IAEA;IACA,MAAMS,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IAC/C,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGK,SAAS;IAE9Cb,QAAQ,CAAE;MACT,GAAGG,MAAM;MACT,CAAEI,MAAM,GAAIK;IACb,CAAE,CAAC;EACJ,CAAC;EAED,MAAME,wBAAwB,GAAKC,IAAI,IAAQP,IAAI,IAAM;IACxD,MAAMQ,QAAQ,GAAG;MAAE,GAAGf;IAAc,CAAC;IACrCe,QAAQ,CAAED,IAAI,CAAE,GAAGP,IAAI;IACvBN,gBAAgB,CAAEc,QAAS,CAAC;EAC7B,CAAC;;EAED;EACA,MAAMb,MAAM,GACX,OAAOC,UAAU,KAAK,QAAQ,GAC3BA,UAAU,GACV;IACAV,OAAO,EAAEU,UAAU;IACnBR,QAAQ,EAAEQ,UAAU;IACpBP,UAAU,EAAEO,UAAU;IACtBN,WAAW,EAAEM;EACb,CAAC;;EAEL;EACA;EACA;EACA,oBACC,IAAAZ,WAAA,CAAAyB,GAAA;IAAKC,SAAS,EAAC,0DAA0D;IAAAC,QAAA,EACtEC,MAAM,CAACC,OAAO,CAAE5B,OAAQ,CAAC,CAAC6B,GAAG,CAAE,CAAE,CAAEf,MAAM,EAAEgB,KAAK,CAAE,KAAM;MACzD,MAAM,CAAEC,cAAc,EAAEC,UAAU,CAAE,GACnC,IAAAC,0DAAgC,EAAEvB,MAAM,CAAEI,MAAM,CAAG,CAAC;MAErD,MAAMoB,YAAY,GAAGxB,MAAM,CAAEI,MAAM,CAAE,GAClCkB,UAAU,GACVxB,aAAa,CAAEM,MAAM,CAAE,IAAIN,aAAa,CAAC2B,IAAI;MAEhD,oBACC,IAAApC,WAAA,CAAAyB,GAAA,EAAC5B,WAAA,CAAAwC,OAAO;QAACC,IAAI,EAAGP,KAAO;QAACQ,SAAS,EAAC,KAAK;QAAAZ,QAAA,eACtC,IAAA3B,WAAA,CAAAyB,GAAA;UAAKC,SAAS,EAAC,mDAAmD;UAAAC,QAAA,eACjE,IAAA3B,WAAA,CAAAyB,GAAA,EAAC5B,WAAA,CAAA2C,yBAAW;YAAA,GACN3B,KAAK;YACV,cAAakB,KAAO;YACpBU,KAAK,EAAG,CAAET,cAAc,EAAEG,YAAY,CAAE,CAACO,IAAI,CAC5C,EACD,CAAG;YACHlC,QAAQ,EAAGM,oBAAoB,CAAEC,MAAO,CAAG;YAC3C4B,YAAY,EAAGrB,wBAAwB,CACtCP,MACD,CAAG;YACH6B,IAAI,EAAC;UAAkB,CACvB;QAAC,CACE;MAAC,GAduC7B,MAerC,CAAC;IAEZ,CAAE;EAAC,CACC,CAAC;AAER","ignoreList":[]}

package/build-module/components/border-radius-control/all-input-control.js

@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getAllValue, getAllUnit, hasMixedValues, hasDefinedValues } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function AllInputControl({
-  onChange,
-  selectedUnits,
-  setSelectedUnits,
-  values,
-  ...props
-}) {
-  let allValue = getAllValue(values);
-  if (allValue === undefined) {
-    // If we don't have any value set the unit to any current selection
-    // or the most common unit from the individual radii values.
-    allValue = getAllUnit(selectedUnits);
-  }
-  const hasValues = hasDefinedValues(values);
-  const isMixed = hasValues && hasMixedValues(values);
-  const allPlaceholder = isMixed ? __('Mixed') : null;
-
-  // Filter out CSS-unit-only values to prevent invalid styles.
-  const handleOnChange = next => {
-    const isNumeric = !isNaN(parseFloat(next));
-    const nextValue = isNumeric ? next : undefined;
-    onChange(nextValue);
-  };
-
-  // Store current unit selection for use as fallback for individual
-  // radii controls.
-  const handleOnUnitChange = unit => {
-    setSelectedUnits({
-      topLeft: unit,
-      topRight: unit,
-      bottomLeft: unit,
-      bottomRight: unit
-    });
-  };
-  return /*#__PURE__*/_jsx(UnitControl, {
-    ...props,
-    "aria-label": __('Border radius'),
-    disableUnits: isMixed,
-    isOnly: true,
-    value: allValue,
-    onChange: handleOnChange,
-    onUnitChange: handleOnUnitChange,
-    placeholder: allPlaceholder,
-    size: "__unstable-large"
-  });
-}
-//# sourceMappingURL=all-input-control.js.map

package/build-module/components/border-radius-control/all-input-control.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__experimentalUnitControl","UnitControl","__","getAllValue","getAllUnit","hasMixedValues","hasDefinedValues","jsx","_jsx","AllInputControl","onChange","selectedUnits","setSelectedUnits","values","props","allValue","undefined","hasValues","isMixed","allPlaceholder","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","handleOnUnitChange","unit","topLeft","topRight","bottomLeft","bottomRight","disableUnits","isOnly","value","onUnitChange","placeholder","size"],"sources":["@wordpress/block-editor/src/components/border-radius-control/all-input-control.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUnitControl as UnitControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetAllUnit,\n\thasMixedValues,\n\thasDefinedValues,\n} from './utils';\n\nexport default function AllInputControl( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues,\n\t...props\n} ) {\n\tlet allValue = getAllValue( values );\n\n\tif ( allValue === undefined ) {\n\t\t// If we don't have any value set the unit to any current selection\n\t\t// or the most common unit from the individual radii values.\n\t\tallValue = getAllUnit( selectedUnits );\n\t}\n\n\tconst hasValues = hasDefinedValues( values );\n\tconst isMixed = hasValues && hasMixedValues( values );\n\tconst allPlaceholder = isMixed ? __( 'Mixed' ) : null;\n\n\t// Filter out CSS-unit-only values to prevent invalid styles.\n\tconst handleOnChange = ( next ) => {\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tonChange( nextValue );\n\t};\n\n\t// Store current unit selection for use as fallback for individual\n\t// radii controls.\n\tconst handleOnUnitChange = ( unit ) => {\n\t\tsetSelectedUnits( {\n\t\t\ttopLeft: unit,\n\t\t\ttopRight: unit,\n\t\t\tbottomLeft: unit,\n\t\t\tbottomRight: unit,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\taria-label={ __( 'Border radius' ) }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t\tsize=\"__unstable-large\"\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,yBAAyB,IAAIC,WAAW,QAAQ,uBAAuB;AAChF,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SACCC,WAAW,EACXC,UAAU,EACVC,cAAc,EACdC,gBAAgB,QACV,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjB,eAAe,SAASC,eAAeA,CAAE;EACxCC,QAAQ;EACRC,aAAa;EACbC,gBAAgB;EAChBC,MAAM;EACN,GAAGC;AACJ,CAAC,EAAG;EACH,IAAIC,QAAQ,GAAGZ,WAAW,CAAEU,MAAO,CAAC;EAEpC,IAAKE,QAAQ,KAAKC,SAAS,EAAG;IAC7B;IACA;IACAD,QAAQ,GAAGX,UAAU,CAAEO,aAAc,CAAC;EACvC;EAEA,MAAMM,SAAS,GAAGX,gBAAgB,CAAEO,MAAO,CAAC;EAC5C,MAAMK,OAAO,GAAGD,SAAS,IAAIZ,cAAc,CAAEQ,MAAO,CAAC;EACrD,MAAMM,cAAc,GAAGD,OAAO,GAAGhB,EAAE,CAAE,OAAQ,CAAC,GAAG,IAAI;;EAErD;EACA,MAAMkB,cAAc,GAAKC,IAAI,IAAM;IAClC,MAAMC,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IAC/C,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGL,SAAS;IAC9CN,QAAQ,CAAEe,SAAU,CAAC;EACtB,CAAC;;EAED;EACA;EACA,MAAMC,kBAAkB,GAAKC,IAAI,IAAM;IACtCf,gBAAgB,CAAE;MACjBgB,OAAO,EAAED,IAAI;MACbE,QAAQ,EAAEF,IAAI;MACdG,UAAU,EAAEH,IAAI;MAChBI,WAAW,EAAEJ;IACd,CAAE,CAAC;EACJ,CAAC;EAED,oBACCnB,IAAA,CAACP,WAAW;IAAA,GACNa,KAAK;IACV,cAAaZ,EAAE,CAAE,eAAgB,CAAG;IACpC8B,YAAY,EAAGd,OAAS;IACxBe,MAAM;IACNC,KAAK,EAAGnB,QAAU;IAClBL,QAAQ,EAAGU,cAAgB;IAC3Be,YAAY,EAAGT,kBAAoB;IACnCU,WAAW,EAAGjB,cAAgB;IAC9BkB,IAAI,EAAC;EAAkB,CACvB,CAAC;AAEJ","ignoreList":[]}

package/build-module/components/border-radius-control/input-controls.js

@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUnitControl as UnitControl, Tooltip } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { jsx as _jsx } from "react/jsx-runtime";
-const CORNERS = {
-  topLeft: __('Top left'),
-  topRight: __('Top right'),
-  bottomLeft: __('Bottom left'),
-  bottomRight: __('Bottom right')
-};
-export default function BoxInputControls({
-  onChange,
-  selectedUnits,
-  setSelectedUnits,
-  values: valuesProp,
-  ...props
-}) {
-  const createHandleOnChange = corner => next => {
-    if (!onChange) {
-      return;
-    }
-
-    // Filter out CSS-unit-only values to prevent invalid styles.
-    const isNumeric = !isNaN(parseFloat(next));
-    const nextValue = isNumeric ? next : undefined;
-    onChange({
-      ...values,
-      [corner]: nextValue
-    });
-  };
-  const createHandleOnUnitChange = side => next => {
-    const newUnits = {
-      ...selectedUnits
-    };
-    newUnits[side] = next;
-    setSelectedUnits(newUnits);
-  };
-
-  // For shorthand style & backwards compatibility, handle flat string value.
-  const values = typeof valuesProp !== 'string' ? valuesProp : {
-    topLeft: valuesProp,
-    topRight: valuesProp,
-    bottomLeft: valuesProp,
-    bottomRight: valuesProp
-  };
-
-  // Controls are wrapped in tooltips as visible labels aren't desired here.
-  // Tooltip rendering also requires the UnitControl to be wrapped. See:
-  // https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
-  return /*#__PURE__*/_jsx("div", {
-    className: "components-border-radius-control__input-controls-wrapper",
-    children: Object.entries(CORNERS).map(([corner, label]) => {
-      const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[corner]);
-      const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
-      return /*#__PURE__*/_jsx(Tooltip, {
-        text: label,
-        placement: "top",
-        children: /*#__PURE__*/_jsx("div", {
-          className: "components-border-radius-control__tooltip-wrapper",
-          children: /*#__PURE__*/_jsx(UnitControl, {
-            ...props,
-            "aria-label": label,
-            value: [parsedQuantity, computedUnit].join(''),
-            onChange: createHandleOnChange(corner),
-            onUnitChange: createHandleOnUnitChange(corner),
-            size: "__unstable-large"
-          })
-        })
-      }, corner);
-    })
-  });
-}
-//# sourceMappingURL=input-controls.js.map

package/build-module/components/border-radius-control/input-controls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__experimentalParseQuantityAndUnitFromRawValue","parseQuantityAndUnitFromRawValue","__experimentalUnitControl","UnitControl","Tooltip","__","jsx","_jsx","CORNERS","topLeft","topRight","bottomLeft","bottomRight","BoxInputControls","onChange","selectedUnits","setSelectedUnits","values","valuesProp","props","createHandleOnChange","corner","next","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","side","newUnits","className","children","Object","entries","map","label","parsedQuantity","parsedUnit","computedUnit","flat","text","placement","value","join","onUnitChange","size"],"sources":["@wordpress/block-editor/src/components/border-radius-control/input-controls.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\tTooltip,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst CORNERS = {\n\ttopLeft: __( 'Top left' ),\n\ttopRight: __( 'Top right' ),\n\tbottomLeft: __( 'Bottom left' ),\n\tbottomRight: __( 'Bottom right' ),\n};\n\nexport default function BoxInputControls( {\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\t...props\n} ) {\n\tconst createHandleOnChange = ( corner ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tonChange( {\n\t\t\t...values,\n\t\t\t[ corner ]: nextValue,\n\t\t} );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tnewUnits[ side ] = next;\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t  };\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ corner ] );\n\n\t\t\t\tconst computedUnit = values[ corner ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ corner ] || selectedUnits.flat;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip text={ label } placement=\"top\" key={ corner }>\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\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\tonChange={ createHandleOnChange( corner ) }\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tcorner\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,8CAA8C,IAAIC,gCAAgC,EAClFC,yBAAyB,IAAIC,WAAW,EACxCC,OAAO,QACD,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAErC,MAAMC,OAAO,GAAG;EACfC,OAAO,EAAEJ,EAAE,CAAE,UAAW,CAAC;EACzBK,QAAQ,EAAEL,EAAE,CAAE,WAAY,CAAC;EAC3BM,UAAU,EAAEN,EAAE,CAAE,aAAc,CAAC;EAC/BO,WAAW,EAAEP,EAAE,CAAE,cAAe;AACjC,CAAC;AAED,eAAe,SAASQ,gBAAgBA,CAAE;EACzCC,QAAQ;EACRC,aAAa;EACbC,gBAAgB;EAChBC,MAAM,EAAEC,UAAU;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,oBAAoB,GAAKC,MAAM,IAAQC,IAAI,IAAM;IACtD,IAAK,CAAER,QAAQ,EAAG;MACjB;IACD;;IAEA;IACA,MAAMS,SAAS,GAAG,CAAEC,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IAC/C,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGK,SAAS;IAE9Cb,QAAQ,CAAE;MACT,GAAGG,MAAM;MACT,CAAEI,MAAM,GAAIK;IACb,CAAE,CAAC;EACJ,CAAC;EAED,MAAME,wBAAwB,GAAKC,IAAI,IAAQP,IAAI,IAAM;IACxD,MAAMQ,QAAQ,GAAG;MAAE,GAAGf;IAAc,CAAC;IACrCe,QAAQ,CAAED,IAAI,CAAE,GAAGP,IAAI;IACvBN,gBAAgB,CAAEc,QAAS,CAAC;EAC7B,CAAC;;EAED;EACA,MAAMb,MAAM,GACX,OAAOC,UAAU,KAAK,QAAQ,GAC3BA,UAAU,GACV;IACAT,OAAO,EAAES,UAAU;IACnBR,QAAQ,EAAEQ,UAAU;IACpBP,UAAU,EAAEO,UAAU;IACtBN,WAAW,EAAEM;EACb,CAAC;;EAEL;EACA;EACA;EACA,oBACCX,IAAA;IAAKwB,SAAS,EAAC,0DAA0D;IAAAC,QAAA,EACtEC,MAAM,CAACC,OAAO,CAAE1B,OAAQ,CAAC,CAAC2B,GAAG,CAAE,CAAE,CAAEd,MAAM,EAAEe,KAAK,CAAE,KAAM;MACzD,MAAM,CAAEC,cAAc,EAAEC,UAAU,CAAE,GACnCrC,gCAAgC,CAAEgB,MAAM,CAAEI,MAAM,CAAG,CAAC;MAErD,MAAMkB,YAAY,GAAGtB,MAAM,CAAEI,MAAM,CAAE,GAClCiB,UAAU,GACVvB,aAAa,CAAEM,MAAM,CAAE,IAAIN,aAAa,CAACyB,IAAI;MAEhD,oBACCjC,IAAA,CAACH,OAAO;QAACqC,IAAI,EAAGL,KAAO;QAACM,SAAS,EAAC,KAAK;QAAAV,QAAA,eACtCzB,IAAA;UAAKwB,SAAS,EAAC,mDAAmD;UAAAC,QAAA,eACjEzB,IAAA,CAACJ,WAAW;YAAA,GACNgB,KAAK;YACV,cAAaiB,KAAO;YACpBO,KAAK,EAAG,CAAEN,cAAc,EAAEE,YAAY,CAAE,CAACK,IAAI,CAC5C,EACD,CAAG;YACH9B,QAAQ,EAAGM,oBAAoB,CAAEC,MAAO,CAAG;YAC3CwB,YAAY,EAAGjB,wBAAwB,CACtCP,MACD,CAAG;YACHyB,IAAI,EAAC;UAAkB,CACvB;QAAC,CACE;MAAC,GAduCzB,MAerC,CAAC;IAEZ,CAAE;EAAC,CACC,CAAC;AAER","ignoreList":[]}

package/src/components/border-radius-control/all-input-control.js

@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	getAllValue,
-	getAllUnit,
-	hasMixedValues,
-	hasDefinedValues,
-} from './utils';
-
-export default function AllInputControl( {
-	onChange,
-	selectedUnits,
-	setSelectedUnits,
-	values,
-	...props
-} ) {
-	let allValue = getAllValue( values );
-
-	if ( allValue === undefined ) {
-		// If we don't have any value set the unit to any current selection
-		// or the most common unit from the individual radii values.
-		allValue = getAllUnit( selectedUnits );
-	}
-
-	const hasValues = hasDefinedValues( values );
-	const isMixed = hasValues && hasMixedValues( values );
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
-
-	// Filter out CSS-unit-only values to prevent invalid styles.
-	const handleOnChange = ( next ) => {
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-		onChange( nextValue );
-	};
-
-	// Store current unit selection for use as fallback for individual
-	// radii controls.
-	const handleOnUnitChange = ( unit ) => {
-		setSelectedUnits( {
-			topLeft: unit,
-			topRight: unit,
-			bottomLeft: unit,
-			bottomRight: unit,
-		} );
-	};
-
-	return (
-		<UnitControl
-			{ ...props }
-			aria-label={ __( 'Border radius' ) }
-			disableUnits={ isMixed }
-			isOnly
-			value={ allValue }
-			onChange={ handleOnChange }
-			onUnitChange={ handleOnUnitChange }
-			placeholder={ allPlaceholder }
-			size="__unstable-large"
-		/>
-	);
-}

package/src/components/border-radius-control/input-controls.js

@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	__experimentalUnitControl as UnitControl,
-	Tooltip,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-const CORNERS = {
-	topLeft: __( 'Top left' ),
-	topRight: __( 'Top right' ),
-	bottomLeft: __( 'Bottom left' ),
-	bottomRight: __( 'Bottom right' ),
-};
-
-export default function BoxInputControls( {
-	onChange,
-	selectedUnits,
-	setSelectedUnits,
-	values: valuesProp,
-	...props
-} ) {
-	const createHandleOnChange = ( corner ) => ( next ) => {
-		if ( ! onChange ) {
-			return;
-		}
-
-		// Filter out CSS-unit-only values to prevent invalid styles.
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-
-		onChange( {
-			...values,
-			[ corner ]: nextValue,
-		} );
-	};
-
-	const createHandleOnUnitChange = ( side ) => ( next ) => {
-		const newUnits = { ...selectedUnits };
-		newUnits[ side ] = next;
-		setSelectedUnits( newUnits );
-	};
-
-	// For shorthand style & backwards compatibility, handle flat string value.
-	const values =
-		typeof valuesProp !== 'string'
-			? valuesProp
-			: {
-					topLeft: valuesProp,
-					topRight: valuesProp,
-					bottomLeft: valuesProp,
-					bottomRight: valuesProp,
-			  };
-
-	// Controls are wrapped in tooltips as visible labels aren't desired here.
-	// Tooltip rendering also requires the UnitControl to be wrapped. See:
-	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
-	return (
-		<div className="components-border-radius-control__input-controls-wrapper">
-			{ Object.entries( CORNERS ).map( ( [ corner, label ] ) => {
-				const [ parsedQuantity, parsedUnit ] =
-					parseQuantityAndUnitFromRawValue( values[ corner ] );
-
-				const computedUnit = values[ corner ]
-					? parsedUnit
-					: selectedUnits[ corner ] || selectedUnits.flat;
-
-				return (
-					<Tooltip text={ label } placement="top" key={ corner }>
-						<div className="components-border-radius-control__tooltip-wrapper">
-							<UnitControl
-								{ ...props }
-								aria-label={ label }
-								value={ [ parsedQuantity, computedUnit ].join(
-									''
-								) }
-								onChange={ createHandleOnChange( corner ) }
-								onUnitChange={ createHandleOnUnitChange(
-									corner
-								) }
-								size="__unstable-large"
-							/>
-						</div>
-					</Tooltip>
-				);
-			} ) }
-		</div>
-	);
-}