@wordpress/block-editor 15.1.0 → 15.2.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 (100) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/components/block-settings-menu/block-settings-dropdown.js +6 -2
  3. package/build/components/block-settings-menu/block-settings-dropdown.js.map +1 -1
  4. package/build/components/block-toolbar/block-toolbar-menu.native.js +2 -2
  5. package/build/components/block-toolbar/block-toolbar-menu.native.js.map +1 -1
  6. package/build/components/border-radius-control/constants.js +41 -0
  7. package/build/components/border-radius-control/constants.js.map +1 -0
  8. package/build/components/border-radius-control/index.js +49 -58
  9. package/build/components/border-radius-control/index.js.map +1 -1
  10. package/build/components/border-radius-control/linked-button.js +1 -1
  11. package/build/components/border-radius-control/linked-button.js.map +1 -1
  12. package/build/components/border-radius-control/single-input-control.js +204 -0
  13. package/build/components/border-radius-control/single-input-control.js.map +1 -0
  14. package/build/components/border-radius-control/utils.js +161 -4
  15. package/build/components/border-radius-control/utils.js.map +1 -1
  16. package/build/components/global-styles/border-panel.js +12 -1
  17. package/build/components/global-styles/border-panel.js.map +1 -1
  18. package/build/components/global-styles/hooks.js +1 -1
  19. package/build/components/global-styles/hooks.js.map +1 -1
  20. package/build/components/global-styles/utils.js +5 -3
  21. package/build/components/global-styles/utils.js.map +1 -1
  22. package/build/components/rich-text/index.js +9 -4
  23. package/build/components/rich-text/index.js.map +1 -1
  24. package/build/components/rich-text/use-format-types.js +19 -8
  25. package/build/components/rich-text/use-format-types.js.map +1 -1
  26. package/build/components/use-block-drop-zone/index.js +7 -1
  27. package/build/components/use-block-drop-zone/index.js.map +1 -1
  28. package/build/hooks/duotone.js +2 -2
  29. package/build/hooks/duotone.js.map +1 -1
  30. package/build/hooks/utils.js +4 -3
  31. package/build/hooks/utils.js.map +1 -1
  32. package/build/private-apis.js +2 -1
  33. package/build/private-apis.js.map +1 -1
  34. package/build/store/private-keys.js +2 -1
  35. package/build/store/private-keys.js.map +1 -1
  36. package/build-module/components/block-settings-menu/block-settings-dropdown.js +6 -2
  37. package/build-module/components/block-settings-menu/block-settings-dropdown.js.map +1 -1
  38. package/build-module/components/block-toolbar/block-toolbar-menu.native.js +3 -3
  39. package/build-module/components/block-toolbar/block-toolbar-menu.native.js.map +1 -1
  40. package/build-module/components/border-radius-control/constants.js +34 -0
  41. package/build-module/components/border-radius-control/constants.js.map +1 -0
  42. package/build-module/components/border-radius-control/index.js +53 -62
  43. package/build-module/components/border-radius-control/index.js.map +1 -1
  44. package/build-module/components/border-radius-control/linked-button.js +1 -1
  45. package/build-module/components/border-radius-control/linked-button.js.map +1 -1
  46. package/build-module/components/border-radius-control/single-input-control.js +197 -0
  47. package/build-module/components/border-radius-control/single-input-control.js.map +1 -0
  48. package/build-module/components/border-radius-control/utils.js +154 -4
  49. package/build-module/components/border-radius-control/utils.js.map +1 -1
  50. package/build-module/components/global-styles/border-panel.js +12 -1
  51. package/build-module/components/global-styles/border-panel.js.map +1 -1
  52. package/build-module/components/global-styles/hooks.js +1 -1
  53. package/build-module/components/global-styles/hooks.js.map +1 -1
  54. package/build-module/components/global-styles/utils.js +5 -3
  55. package/build-module/components/global-styles/utils.js.map +1 -1
  56. package/build-module/components/rich-text/index.js +9 -4
  57. package/build-module/components/rich-text/index.js.map +1 -1
  58. package/build-module/components/rich-text/use-format-types.js +19 -8
  59. package/build-module/components/rich-text/use-format-types.js.map +1 -1
  60. package/build-module/components/use-block-drop-zone/index.js +7 -1
  61. package/build-module/components/use-block-drop-zone/index.js.map +1 -1
  62. package/build-module/hooks/duotone.js +3 -3
  63. package/build-module/hooks/duotone.js.map +1 -1
  64. package/build-module/hooks/utils.js +4 -3
  65. package/build-module/hooks/utils.js.map +1 -1
  66. package/build-module/private-apis.js +3 -2
  67. package/build-module/private-apis.js.map +1 -1
  68. package/build-module/store/private-keys.js +1 -0
  69. package/build-module/store/private-keys.js.map +1 -1
  70. package/build-style/style-rtl.css +16 -18
  71. package/build-style/style.css +16 -18
  72. package/package.json +34 -34
  73. package/src/components/block-settings-menu/block-settings-dropdown.js +22 -14
  74. package/src/components/block-toolbar/block-toolbar-menu.native.js +3 -3
  75. package/src/components/border-radius-control/constants.js +46 -0
  76. package/src/components/border-radius-control/index.js +71 -72
  77. package/src/components/border-radius-control/linked-button.js +1 -1
  78. package/src/components/border-radius-control/single-input-control.js +277 -0
  79. package/src/components/border-radius-control/style.scss +16 -21
  80. package/src/components/border-radius-control/utils.js +178 -5
  81. package/src/components/global-styles/border-panel.js +12 -1
  82. package/src/components/global-styles/hooks.js +1 -0
  83. package/src/components/global-styles/utils.js +6 -1
  84. package/src/components/rich-text/index.js +19 -10
  85. package/src/components/rich-text/use-format-types.js +42 -19
  86. package/src/components/use-block-drop-zone/index.js +12 -4
  87. package/src/hooks/duotone.js +11 -3
  88. package/src/hooks/utils.js +4 -0
  89. package/src/private-apis.js +2 -0
  90. package/src/store/private-keys.js +1 -0
  91. package/build/components/border-radius-control/all-input-control.js +0 -65
  92. package/build/components/border-radius-control/all-input-control.js.map +0 -1
  93. package/build/components/border-radius-control/input-controls.js +0 -82
  94. package/build/components/border-radius-control/input-controls.js.map +0 -1
  95. package/build-module/components/border-radius-control/all-input-control.js +0 -58
  96. package/build-module/components/border-radius-control/all-input-control.js.map +0 -1
  97. package/build-module/components/border-radius-control/input-controls.js +0 -75
  98. package/build-module/components/border-radius-control/input-controls.js.map +0 -1
  99. package/src/components/border-radius-control/all-input-control.js +0 -67
  100. package/src/components/border-radius-control/input-controls.js +0 -91
@@ -5,6 +5,11 @@ import { useMemo } from '@wordpress/element';
5
5
  import { useSelect, useDispatch } from '@wordpress/data';
6
6
  import { store as richTextStore } from '@wordpress/rich-text';
7
7
 
8
+ /**
9
+ * Internal dependencies
10
+ */
11
+ import { essentialFormatKey } from '../../store/private-keys';
12
+
8
13
  function formatTypesSelector( select ) {
9
14
  return select( richTextStore ).getFormatTypes();
10
15
  }
@@ -56,35 +61,53 @@ function getPrefixedSelectKeys( selected, prefix ) {
56
61
  * This hook provides RichText with the `formatTypes` and its derived props from
57
62
  * experimental format type settings.
58
63
  *
59
- * @param {Object} $0 Options
60
- * @param {string} $0.clientId Block client ID.
61
- * @param {string} $0.identifier Block attribute.
62
- * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
63
- * @param {Array} $0.allowedFormats Allowed formats
64
+ * @param {Object} options Options
65
+ * @param {string} options.clientId Block client ID.
66
+ * @param {string} options.identifier Block attribute.
67
+ * @param {Array} options.allowedFormats Allowed formats
68
+ * @param {boolean} options.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
69
+ * @param {boolean} options.disableNoneEssentialFormatting Whether to disable none-essential formatting or not.
64
70
  */
65
71
  export function useFormatTypes( {
66
72
  clientId,
67
73
  identifier,
68
- withoutInteractiveFormatting,
69
74
  allowedFormats,
75
+ withoutInteractiveFormatting,
76
+ disableNoneEssentialFormatting = false,
70
77
  } ) {
71
78
  const allFormatTypes = useSelect( formatTypesSelector, [] );
72
79
  const formatTypes = useMemo( () => {
73
- return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
74
- if ( allowedFormats && ! allowedFormats.includes( name ) ) {
75
- return false;
76
- }
80
+ return allFormatTypes.filter(
81
+ ( {
82
+ name,
83
+ interactive,
84
+ tagName,
85
+ [ essentialFormatKey ]: isEssential,
86
+ } ) => {
87
+ if ( allowedFormats && ! allowedFormats.includes( name ) ) {
88
+ return false;
89
+ }
77
90
 
78
- if (
79
- withoutInteractiveFormatting &&
80
- ( interactive || interactiveContentTags.has( tagName ) )
81
- ) {
82
- return false;
83
- }
91
+ if ( disableNoneEssentialFormatting && ! isEssential ) {
92
+ return false;
93
+ }
84
94
 
85
- return true;
86
- } );
87
- }, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
95
+ if (
96
+ withoutInteractiveFormatting &&
97
+ ( interactive || interactiveContentTags.has( tagName ) )
98
+ ) {
99
+ return false;
100
+ }
101
+
102
+ return true;
103
+ }
104
+ );
105
+ }, [
106
+ allFormatTypes,
107
+ allowedFormats,
108
+ disableNoneEssentialFormatting,
109
+ withoutInteractiveFormatting,
110
+ ] );
88
111
  const keyedSelected = useSelect(
89
112
  ( select ) =>
90
113
  formatTypes.reduce( ( accumulator, type ) => {
@@ -148,6 +148,10 @@ export function getDropTargetPosition(
148
148
  } ) => {
149
149
  const rect = getBoundingClientRect();
150
150
 
151
+ if ( ! rect ) {
152
+ return;
153
+ }
154
+
151
155
  let [ distance, edge ] = getDistanceToNearestEdge(
152
156
  position,
153
157
  rect,
@@ -428,10 +432,14 @@ export default function useBlockDropZone( {
428
432
  return {
429
433
  isUnmodifiedDefaultBlock:
430
434
  getIsUnmodifiedDefaultBlock( block ),
431
- getBoundingClientRect: () =>
432
- ownerDocument
433
- .getElementById( `block-${ clientId }` )
434
- .getBoundingClientRect(),
435
+ getBoundingClientRect: () => {
436
+ const blockElement = ownerDocument.getElementById(
437
+ `block-${ clientId }`
438
+ );
439
+ return blockElement
440
+ ? blockElement.getBoundingClientRect()
441
+ : null;
442
+ },
435
443
  blockIndex: getBlockIndex( clientId ),
436
444
  blockOrientation:
437
445
  getBlockListSettings( clientId )?.orientation,
@@ -32,7 +32,11 @@ import {
32
32
  } from '../components/duotone/utils';
33
33
  import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
34
34
  import { scopeSelector } from '../components/global-styles/utils';
35
- import { useBlockSettings, usePrivateStyleOverride } from './utils';
35
+ import {
36
+ cleanEmptyObject,
37
+ useBlockSettings,
38
+ usePrivateStyleOverride,
39
+ } from './utils';
36
40
  import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
37
41
  import { useBlockEditingMode } from '../components/block-editing-mode';
38
42
  import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
@@ -141,7 +145,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
141
145
  ...newDuotone?.filter,
142
146
  },
143
147
  };
144
- setAttributes( { style: newStyle } );
148
+ setAttributes( {
149
+ style: cleanEmptyObject( newStyle ),
150
+ } );
145
151
  } }
146
152
  settings={ settings }
147
153
  />
@@ -166,7 +172,9 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
166
172
  duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
167
173
  },
168
174
  };
169
- setAttributes( { style: newStyle } );
175
+ setAttributes( {
176
+ style: cleanEmptyObject( newStyle ),
177
+ } );
170
178
  } }
171
179
  settings={ settings }
172
180
  />
@@ -268,6 +268,7 @@ export function useBlockSettings( name, parentLayout ) {
268
268
  borderRadius,
269
269
  borderStyle,
270
270
  borderWidth,
271
+ borderRadiusSizes,
271
272
  customColorsEnabled,
272
273
  customColors,
273
274
  customDuotone,
@@ -325,6 +326,7 @@ export function useBlockSettings( name, parentLayout ) {
325
326
  'border.radius',
326
327
  'border.style',
327
328
  'border.width',
329
+ 'border.radiusSizes',
328
330
  'color.custom',
329
331
  'color.palette.custom',
330
332
  'color.customDuotone',
@@ -423,6 +425,7 @@ export function useBlockSettings( name, parentLayout ) {
423
425
  radius: borderRadius,
424
426
  style: borderStyle,
425
427
  width: borderWidth,
428
+ radiusSizes: borderRadiusSizes,
426
429
  },
427
430
  dimensions: {
428
431
  aspectRatio,
@@ -469,6 +472,7 @@ export function useBlockSettings( name, parentLayout ) {
469
472
  borderRadius,
470
473
  borderStyle,
471
474
  borderWidth,
475
+ borderRadiusSizes,
472
476
  customColorsEnabled,
473
477
  customColors,
474
478
  customDuotone,
@@ -40,6 +40,7 @@ import {
40
40
  globalStylesLinksDataKey,
41
41
  sectionRootClientIdKey,
42
42
  mediaEditKey,
43
+ essentialFormatKey,
43
44
  } from './store/private-keys';
44
45
  import { requiresWrapperOnCopy } from './components/writing-flow/utils';
45
46
  import { PrivateRichText } from './components/rich-text/';
@@ -101,4 +102,5 @@ lock( privateApis, {
101
102
  CommentIconSlotFill,
102
103
  CommentIconToolbarSlotFill,
103
104
  mediaEditKey,
105
+ essentialFormatKey,
104
106
  } );
@@ -4,3 +4,4 @@ export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
4
4
  export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
5
5
  export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
6
6
  export const mediaEditKey = Symbol( 'mediaEditKey' );
7
+ export const essentialFormatKey = Symbol( 'essentialFormat' );
@@ -1,65 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = AllInputControl;
7
- var _components = require("@wordpress/components");
8
- var _i18n = require("@wordpress/i18n");
9
- var _utils = require("./utils");
10
- var _jsxRuntime = require("react/jsx-runtime");
11
- /**
12
- * WordPress dependencies
13
- */
14
-
15
- /**
16
- * Internal dependencies
17
- */
18
-
19
- function AllInputControl({
20
- onChange,
21
- selectedUnits,
22
- setSelectedUnits,
23
- values,
24
- ...props
25
- }) {
26
- let allValue = (0, _utils.getAllValue)(values);
27
- if (allValue === undefined) {
28
- // If we don't have any value set the unit to any current selection
29
- // or the most common unit from the individual radii values.
30
- allValue = (0, _utils.getAllUnit)(selectedUnits);
31
- }
32
- const hasValues = (0, _utils.hasDefinedValues)(values);
33
- const isMixed = hasValues && (0, _utils.hasMixedValues)(values);
34
- const allPlaceholder = isMixed ? (0, _i18n.__)('Mixed') : null;
35
-
36
- // Filter out CSS-unit-only values to prevent invalid styles.
37
- const handleOnChange = next => {
38
- const isNumeric = !isNaN(parseFloat(next));
39
- const nextValue = isNumeric ? next : undefined;
40
- onChange(nextValue);
41
- };
42
-
43
- // Store current unit selection for use as fallback for individual
44
- // radii controls.
45
- const handleOnUnitChange = unit => {
46
- setSelectedUnits({
47
- topLeft: unit,
48
- topRight: unit,
49
- bottomLeft: unit,
50
- bottomRight: unit
51
- });
52
- };
53
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
54
- ...props,
55
- "aria-label": (0, _i18n.__)('Border radius'),
56
- disableUnits: isMixed,
57
- isOnly: true,
58
- value: allValue,
59
- onChange: handleOnChange,
60
- onUnitChange: handleOnUnitChange,
61
- placeholder: allPlaceholder,
62
- size: "__unstable-large"
63
- });
64
- }
65
- //# sourceMappingURL=all-input-control.js.map
@@ -1 +0,0 @@
1
- {"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":[]}
@@ -1,82 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = BoxInputControls;
7
- var _components = require("@wordpress/components");
8
- var _i18n = require("@wordpress/i18n");
9
- var _jsxRuntime = require("react/jsx-runtime");
10
- /**
11
- * WordPress dependencies
12
- */
13
-
14
- const CORNERS = {
15
- topLeft: (0, _i18n.__)('Top left'),
16
- topRight: (0, _i18n.__)('Top right'),
17
- bottomLeft: (0, _i18n.__)('Bottom left'),
18
- bottomRight: (0, _i18n.__)('Bottom right')
19
- };
20
- function BoxInputControls({
21
- onChange,
22
- selectedUnits,
23
- setSelectedUnits,
24
- values: valuesProp,
25
- ...props
26
- }) {
27
- const createHandleOnChange = corner => next => {
28
- if (!onChange) {
29
- return;
30
- }
31
-
32
- // Filter out CSS-unit-only values to prevent invalid styles.
33
- const isNumeric = !isNaN(parseFloat(next));
34
- const nextValue = isNumeric ? next : undefined;
35
- onChange({
36
- ...values,
37
- [corner]: nextValue
38
- });
39
- };
40
- const createHandleOnUnitChange = side => next => {
41
- const newUnits = {
42
- ...selectedUnits
43
- };
44
- newUnits[side] = next;
45
- setSelectedUnits(newUnits);
46
- };
47
-
48
- // For shorthand style & backwards compatibility, handle flat string value.
49
- const values = typeof valuesProp !== 'string' ? valuesProp : {
50
- topLeft: valuesProp,
51
- topRight: valuesProp,
52
- bottomLeft: valuesProp,
53
- bottomRight: valuesProp
54
- };
55
-
56
- // Controls are wrapped in tooltips as visible labels aren't desired here.
57
- // Tooltip rendering also requires the UnitControl to be wrapped. See:
58
- // https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
59
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
60
- className: "components-border-radius-control__input-controls-wrapper",
61
- children: Object.entries(CORNERS).map(([corner, label]) => {
62
- const [parsedQuantity, parsedUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values[corner]);
63
- const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
64
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
65
- text: label,
66
- placement: "top",
67
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
68
- className: "components-border-radius-control__tooltip-wrapper",
69
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
70
- ...props,
71
- "aria-label": label,
72
- value: [parsedQuantity, computedUnit].join(''),
73
- onChange: createHandleOnChange(corner),
74
- onUnitChange: createHandleOnUnitChange(corner),
75
- size: "__unstable-large"
76
- })
77
- })
78
- }, corner);
79
- })
80
- });
81
- }
82
- //# sourceMappingURL=input-controls.js.map
@@ -1 +0,0 @@
1
- {"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":[]}
@@ -1,58 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
5
- import { __ } from '@wordpress/i18n';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import { getAllValue, getAllUnit, hasMixedValues, hasDefinedValues } from './utils';
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
- export default function AllInputControl({
13
- onChange,
14
- selectedUnits,
15
- setSelectedUnits,
16
- values,
17
- ...props
18
- }) {
19
- let allValue = getAllValue(values);
20
- if (allValue === undefined) {
21
- // If we don't have any value set the unit to any current selection
22
- // or the most common unit from the individual radii values.
23
- allValue = getAllUnit(selectedUnits);
24
- }
25
- const hasValues = hasDefinedValues(values);
26
- const isMixed = hasValues && hasMixedValues(values);
27
- const allPlaceholder = isMixed ? __('Mixed') : null;
28
-
29
- // Filter out CSS-unit-only values to prevent invalid styles.
30
- const handleOnChange = next => {
31
- const isNumeric = !isNaN(parseFloat(next));
32
- const nextValue = isNumeric ? next : undefined;
33
- onChange(nextValue);
34
- };
35
-
36
- // Store current unit selection for use as fallback for individual
37
- // radii controls.
38
- const handleOnUnitChange = unit => {
39
- setSelectedUnits({
40
- topLeft: unit,
41
- topRight: unit,
42
- bottomLeft: unit,
43
- bottomRight: unit
44
- });
45
- };
46
- return /*#__PURE__*/_jsx(UnitControl, {
47
- ...props,
48
- "aria-label": __('Border radius'),
49
- disableUnits: isMixed,
50
- isOnly: true,
51
- value: allValue,
52
- onChange: handleOnChange,
53
- onUnitChange: handleOnUnitChange,
54
- placeholder: allPlaceholder,
55
- size: "__unstable-large"
56
- });
57
- }
58
- //# sourceMappingURL=all-input-control.js.map
@@ -1 +0,0 @@
1
- {"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":[]}
@@ -1,75 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, __experimentalUnitControl as UnitControl, Tooltip } from '@wordpress/components';
5
- import { __ } from '@wordpress/i18n';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- const CORNERS = {
8
- topLeft: __('Top left'),
9
- topRight: __('Top right'),
10
- bottomLeft: __('Bottom left'),
11
- bottomRight: __('Bottom right')
12
- };
13
- export default function BoxInputControls({
14
- onChange,
15
- selectedUnits,
16
- setSelectedUnits,
17
- values: valuesProp,
18
- ...props
19
- }) {
20
- const createHandleOnChange = corner => next => {
21
- if (!onChange) {
22
- return;
23
- }
24
-
25
- // Filter out CSS-unit-only values to prevent invalid styles.
26
- const isNumeric = !isNaN(parseFloat(next));
27
- const nextValue = isNumeric ? next : undefined;
28
- onChange({
29
- ...values,
30
- [corner]: nextValue
31
- });
32
- };
33
- const createHandleOnUnitChange = side => next => {
34
- const newUnits = {
35
- ...selectedUnits
36
- };
37
- newUnits[side] = next;
38
- setSelectedUnits(newUnits);
39
- };
40
-
41
- // For shorthand style & backwards compatibility, handle flat string value.
42
- const values = typeof valuesProp !== 'string' ? valuesProp : {
43
- topLeft: valuesProp,
44
- topRight: valuesProp,
45
- bottomLeft: valuesProp,
46
- bottomRight: valuesProp
47
- };
48
-
49
- // Controls are wrapped in tooltips as visible labels aren't desired here.
50
- // Tooltip rendering also requires the UnitControl to be wrapped. See:
51
- // https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
52
- return /*#__PURE__*/_jsx("div", {
53
- className: "components-border-radius-control__input-controls-wrapper",
54
- children: Object.entries(CORNERS).map(([corner, label]) => {
55
- const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[corner]);
56
- const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
57
- return /*#__PURE__*/_jsx(Tooltip, {
58
- text: label,
59
- placement: "top",
60
- children: /*#__PURE__*/_jsx("div", {
61
- className: "components-border-radius-control__tooltip-wrapper",
62
- children: /*#__PURE__*/_jsx(UnitControl, {
63
- ...props,
64
- "aria-label": label,
65
- value: [parsedQuantity, computedUnit].join(''),
66
- onChange: createHandleOnChange(corner),
67
- onUnitChange: createHandleOnUnitChange(corner),
68
- size: "__unstable-large"
69
- })
70
- })
71
- }, corner);
72
- })
73
- });
74
- }
75
- //# sourceMappingURL=input-controls.js.map
@@ -1 +0,0 @@
1
- {"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":[]}
@@ -1,67 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
5
- import { __ } from '@wordpress/i18n';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import {
11
- getAllValue,
12
- getAllUnit,
13
- hasMixedValues,
14
- hasDefinedValues,
15
- } from './utils';
16
-
17
- export default function AllInputControl( {
18
- onChange,
19
- selectedUnits,
20
- setSelectedUnits,
21
- values,
22
- ...props
23
- } ) {
24
- let allValue = getAllValue( values );
25
-
26
- if ( allValue === undefined ) {
27
- // If we don't have any value set the unit to any current selection
28
- // or the most common unit from the individual radii values.
29
- allValue = getAllUnit( selectedUnits );
30
- }
31
-
32
- const hasValues = hasDefinedValues( values );
33
- const isMixed = hasValues && hasMixedValues( values );
34
- const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
35
-
36
- // Filter out CSS-unit-only values to prevent invalid styles.
37
- const handleOnChange = ( next ) => {
38
- const isNumeric = ! isNaN( parseFloat( next ) );
39
- const nextValue = isNumeric ? next : undefined;
40
- onChange( nextValue );
41
- };
42
-
43
- // Store current unit selection for use as fallback for individual
44
- // radii controls.
45
- const handleOnUnitChange = ( unit ) => {
46
- setSelectedUnits( {
47
- topLeft: unit,
48
- topRight: unit,
49
- bottomLeft: unit,
50
- bottomRight: unit,
51
- } );
52
- };
53
-
54
- return (
55
- <UnitControl
56
- { ...props }
57
- aria-label={ __( 'Border radius' ) }
58
- disableUnits={ isMixed }
59
- isOnly
60
- value={ allValue }
61
- onChange={ handleOnChange }
62
- onUnitChange={ handleOnUnitChange }
63
- placeholder={ allPlaceholder }
64
- size="__unstable-large"
65
- />
66
- );
67
- }