@wordpress/block-library 10.0.1-next.v.202606191442.0 → 10.0.1
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.
- package/CHANGELOG.md +2 -1
- package/build/audio/edit.cjs +8 -1
- package/build/audio/edit.cjs.map +2 -2
- package/build/breadcrumbs/edit.cjs +0 -1
- package/build/breadcrumbs/edit.cjs.map +2 -2
- package/build/button/edit.cjs +0 -1
- package/build/button/edit.cjs.map +2 -2
- package/build/cover/edit/embed-video-url-input.cjs +0 -1
- package/build/cover/edit/embed-video-url-input.cjs.map +2 -2
- package/build/details/edit.cjs +0 -1
- package/build/details/edit.cjs.map +2 -2
- package/build/form/edit.cjs +0 -2
- package/build/form/edit.cjs.map +2 -2
- package/build/form-input/edit.cjs +0 -2
- package/build/form-input/edit.cjs.map +2 -2
- package/build/freeform/edit.cjs +5 -14
- package/build/freeform/edit.cjs.map +3 -3
- package/build/freeform/migration-notice.cjs.map +2 -2
- package/build/home-link/edit.cjs +0 -1
- package/build/home-link/edit.cjs.map +2 -2
- package/build/html/modal.cjs +6 -3
- package/build/html/modal.cjs.map +2 -2
- package/build/icon/edit.cjs +2 -4
- package/build/icon/edit.cjs.map +2 -2
- package/build/image/image.cjs +0 -2
- package/build/image/image.cjs.map +2 -2
- package/build/image/use-open-image-media-editor-modal.cjs +5 -25
- package/build/image/use-open-image-media-editor-modal.cjs.map +2 -2
- package/build/list/ordered-list-settings.cjs +0 -1
- package/build/list/ordered-list-settings.cjs.map +2 -2
- package/build/navigation/edit/index.cjs +9 -9
- package/build/navigation/edit/index.cjs.map +2 -2
- package/build/navigation/edit/navigation-menu-name-control.cjs +0 -1
- package/build/navigation/edit/navigation-menu-name-control.cjs.map +2 -2
- package/build/navigation-link/block.json +1 -1
- package/build/navigation-link/link-ui/page-creator.cjs +0 -1
- package/build/navigation-link/link-ui/page-creator.cjs.map +2 -2
- package/build/navigation-link/shared/controls.cjs +0 -2
- package/build/navigation-link/shared/controls.cjs.map +2 -2
- package/build/playlist-track/edit.cjs +0 -3
- package/build/playlist-track/edit.cjs.map +2 -2
- package/build/post-comment/edit.cjs +0 -1
- package/build/post-comment/edit.cjs.map +2 -2
- package/build/post-featured-image/edit.cjs +0 -1
- package/build/post-featured-image/edit.cjs.map +2 -2
- package/build/post-terms/edit.cjs +0 -1
- package/build/post-terms/edit.cjs.map +2 -2
- package/build/post-title/edit.cjs +0 -1
- package/build/post-title/edit.cjs.map +2 -2
- package/build/query/edit/enhanced-pagination-modal.cjs +10 -1
- package/build/query/edit/enhanced-pagination-modal.cjs.map +3 -3
- package/build/query/edit/inspector-controls/index.cjs +0 -1
- package/build/query/edit/inspector-controls/index.cjs.map +2 -2
- package/build/rss/edit.cjs +0 -1
- package/build/rss/edit.cjs.map +2 -2
- package/build/search/block.json +4 -0
- package/build/search/edit.cjs +242 -204
- package/build/search/edit.cjs.map +2 -2
- package/build/site-logo/edit.cjs +2 -1
- package/build/site-logo/edit.cjs.map +2 -2
- package/build/social-link/edit.cjs +0 -3
- package/build/social-link/edit.cjs.map +2 -2
- package/build/tab-list/block.json +2 -2
- package/build/tab-list/edit.cjs +14 -8
- package/build/tab-list/edit.cjs.map +2 -2
- package/build/tab-list/init.cjs +28 -0
- package/build/tab-list/init.cjs.map +7 -0
- package/build/tab-panel/edit.cjs +0 -9
- package/build/tab-panel/edit.cjs.map +2 -2
- package/build/tab-panel/save.cjs +2 -1
- package/build/tab-panel/save.cjs.map +2 -2
- package/build/tab-panels/block.json +0 -1
- package/build/tab-panels/init.cjs +28 -0
- package/build/tab-panels/init.cjs.map +7 -0
- package/build/table/edit.cjs +0 -2
- package/build/table/edit.cjs.map +2 -2
- package/build/tabs/view.cjs +20 -94
- package/build/tabs/view.cjs.map +2 -2
- package/build/template-part/edit/advanced-controls.cjs +0 -1
- package/build/template-part/edit/advanced-controls.cjs.map +2 -2
- package/build/template-part/edit/title-modal.cjs +1 -2
- package/build/template-part/edit/title-modal.cjs.map +2 -2
- package/build/video/edit.cjs +3 -2
- package/build/video/edit.cjs.map +2 -2
- package/build/video/tracks-editor.cjs +0 -2
- package/build/video/tracks-editor.cjs.map +2 -2
- package/build-module/audio/edit.mjs +8 -2
- package/build-module/audio/edit.mjs.map +2 -2
- package/build-module/breadcrumbs/edit.mjs +0 -1
- package/build-module/breadcrumbs/edit.mjs.map +2 -2
- package/build-module/button/edit.mjs +0 -1
- package/build-module/button/edit.mjs.map +2 -2
- package/build-module/cover/edit/embed-video-url-input.mjs +0 -1
- package/build-module/cover/edit/embed-video-url-input.mjs.map +2 -2
- package/build-module/details/edit.mjs +0 -1
- package/build-module/details/edit.mjs.map +2 -2
- package/build-module/form/edit.mjs +0 -2
- package/build-module/form/edit.mjs.map +2 -2
- package/build-module/form-input/edit.mjs +0 -2
- package/build-module/form-input/edit.mjs.map +2 -2
- package/build-module/freeform/edit.mjs +5 -14
- package/build-module/freeform/edit.mjs.map +2 -2
- package/build-module/freeform/migration-notice.mjs.map +2 -2
- package/build-module/home-link/edit.mjs +0 -1
- package/build-module/home-link/edit.mjs.map +2 -2
- package/build-module/html/modal.mjs +6 -3
- package/build-module/html/modal.mjs.map +2 -2
- package/build-module/icon/edit.mjs +2 -4
- package/build-module/icon/edit.mjs.map +2 -2
- package/build-module/image/image.mjs +0 -2
- package/build-module/image/image.mjs.map +2 -2
- package/build-module/image/use-open-image-media-editor-modal.mjs +5 -25
- package/build-module/image/use-open-image-media-editor-modal.mjs.map +2 -2
- package/build-module/list/ordered-list-settings.mjs +0 -1
- package/build-module/list/ordered-list-settings.mjs.map +2 -2
- package/build-module/navigation/edit/index.mjs +9 -9
- package/build-module/navigation/edit/index.mjs.map +2 -2
- package/build-module/navigation/edit/navigation-menu-name-control.mjs +0 -1
- package/build-module/navigation/edit/navigation-menu-name-control.mjs.map +2 -2
- package/build-module/navigation-link/block.json +1 -1
- package/build-module/navigation-link/link-ui/page-creator.mjs +0 -1
- package/build-module/navigation-link/link-ui/page-creator.mjs.map +2 -2
- package/build-module/navigation-link/shared/controls.mjs +0 -2
- package/build-module/navigation-link/shared/controls.mjs.map +2 -2
- package/build-module/playlist-track/edit.mjs +0 -3
- package/build-module/playlist-track/edit.mjs.map +2 -2
- package/build-module/post-comment/edit.mjs +0 -1
- package/build-module/post-comment/edit.mjs.map +2 -2
- package/build-module/post-featured-image/edit.mjs +0 -1
- package/build-module/post-featured-image/edit.mjs.map +2 -2
- package/build-module/post-terms/edit.mjs +0 -1
- package/build-module/post-terms/edit.mjs.map +2 -2
- package/build-module/post-title/edit.mjs +0 -1
- package/build-module/post-title/edit.mjs.map +2 -2
- package/build-module/query/edit/enhanced-pagination-modal.mjs +10 -1
- package/build-module/query/edit/enhanced-pagination-modal.mjs.map +2 -2
- package/build-module/query/edit/inspector-controls/index.mjs +0 -1
- package/build-module/query/edit/inspector-controls/index.mjs.map +2 -2
- package/build-module/rss/edit.mjs +0 -1
- package/build-module/rss/edit.mjs.map +2 -2
- package/build-module/search/block.json +4 -0
- package/build-module/search/edit.mjs +242 -204
- package/build-module/search/edit.mjs.map +2 -2
- package/build-module/site-logo/edit.mjs +2 -1
- package/build-module/site-logo/edit.mjs.map +2 -2
- package/build-module/social-link/edit.mjs +0 -3
- package/build-module/social-link/edit.mjs.map +2 -2
- package/build-module/tab-list/block.json +2 -2
- package/build-module/tab-list/edit.mjs +15 -9
- package/build-module/tab-list/edit.mjs.map +2 -2
- package/build-module/tab-list/init.mjs +7 -0
- package/build-module/tab-list/init.mjs.map +7 -0
- package/build-module/tab-panel/edit.mjs +1 -10
- package/build-module/tab-panel/edit.mjs.map +2 -2
- package/build-module/tab-panel/save.mjs +2 -1
- package/build-module/tab-panel/save.mjs.map +2 -2
- package/build-module/tab-panels/block.json +0 -1
- package/build-module/tab-panels/init.mjs +7 -0
- package/build-module/tab-panels/init.mjs.map +7 -0
- package/build-module/table/edit.mjs +0 -2
- package/build-module/table/edit.mjs.map +2 -2
- package/build-module/tabs/view.mjs +20 -94
- package/build-module/tabs/view.mjs.map +2 -2
- package/build-module/template-part/edit/advanced-controls.mjs +0 -1
- package/build-module/template-part/edit/advanced-controls.mjs.map +2 -2
- package/build-module/template-part/edit/title-modal.mjs +1 -2
- package/build-module/template-part/edit/title-modal.mjs.map +2 -2
- package/build-module/video/edit.mjs +3 -3
- package/build-module/video/edit.mjs.map +2 -2
- package/build-module/video/tracks-editor.mjs +0 -2
- package/build-module/video/tracks-editor.mjs.map +2 -2
- package/build-style/editor-rtl.css +0 -15
- package/build-style/editor.css +0 -15
- package/build-style/style-rtl.css +1 -1
- package/build-style/style.css +1 -1
- package/build-style/tab-list/style-rtl.css +1 -1
- package/build-style/tab-list/style.css +1 -1
- package/package.json +40 -40
- package/src/audio/edit.js +5 -9
- package/src/breadcrumbs/edit.js +0 -1
- package/src/button/edit.js +0 -1
- package/src/cover/edit/embed-video-url-input.js +0 -1
- package/src/cover/test/edit.js +51 -2
- package/src/details/edit.js +0 -1
- package/src/editor.scss +0 -1
- package/src/form/edit.js +0 -2
- package/src/form-input/edit.js +0 -2
- package/src/freeform/edit.js +6 -29
- package/src/freeform/migration-notice.js +2 -4
- package/src/home-link/edit.js +0 -1
- package/src/html/modal.js +3 -0
- package/src/icon/edit.js +0 -2
- package/src/image/image.js +0 -2
- package/src/image/test/use-open-image-media-editor-modal.js +20 -26
- package/src/image/use-open-image-media-editor-modal.js +24 -42
- package/src/list/ordered-list-settings.js +0 -1
- package/src/navigation/edit/index.js +9 -13
- package/src/navigation/edit/navigation-menu-name-control.js +0 -1
- package/src/navigation-link/README.md +1 -1
- package/src/navigation-link/block.json +1 -1
- package/src/navigation-link/link-ui/page-creator.js +0 -1
- package/src/navigation-link/shared/controls.js +0 -2
- package/src/navigation-link/test/__snapshots__/hooks.js.snap +5 -0
- package/src/playlist-track/edit.js +0 -3
- package/src/post-comment/edit.js +0 -1
- package/src/post-featured-image/edit.js +0 -1
- package/src/post-terms/edit.js +0 -1
- package/src/post-title/edit.js +0 -1
- package/src/query/edit/enhanced-pagination-modal.js +11 -1
- package/src/query/edit/inspector-controls/index.js +0 -1
- package/src/rss/edit.js +0 -1
- package/src/search/README.md +1 -0
- package/src/search/block.json +4 -0
- package/src/search/edit.js +106 -55
- package/src/search/index.php +25 -1
- package/src/site-logo/edit.js +3 -1
- package/src/social-link/edit.js +0 -3
- package/src/tab-list/README.md +1 -1
- package/src/tab-list/block.json +2 -2
- package/src/tab-list/edit.js +14 -8
- package/src/tab-list/index.php +4 -6
- package/src/tab-list/init.js +6 -0
- package/src/tab-list/style.scss +1 -2
- package/src/tab-panel/edit.js +1 -14
- package/src/tab-panel/index.php +2 -25
- package/src/tab-panel/save.js +1 -0
- package/src/tab-panels/block.json +0 -1
- package/src/tab-panels/init.js +6 -0
- package/src/table/edit.js +0 -2
- package/src/tabs/index.php +12 -19
- package/src/tabs/view.js +20 -100
- package/src/template-part/edit/advanced-controls.js +0 -1
- package/src/template-part/edit/title-modal.js +0 -1
- package/src/utils/test/style-state.js +26 -26
- package/src/video/edit.js +9 -16
- package/src/video/tracks-editor.js +0 -2
- package/build/freeform/convert-to-blocks-button.cjs +0 -40
- package/build/freeform/convert-to-blocks-button.cjs.map +0 -7
- package/build/list-item/utils.cjs +0 -57
- package/build/list-item/utils.cjs.map +0 -7
- package/build-module/freeform/convert-to-blocks-button.mjs +0 -19
- package/build-module/freeform/convert-to-blocks-button.mjs.map +0 -7
- package/build-module/list-item/utils.mjs +0 -32
- package/build-module/list-item/utils.mjs.map +0 -7
- package/build-style/tab-list/editor-rtl.css +0 -14
- package/build-style/tab-list/editor.css +0 -14
- package/src/freeform/convert-to-blocks-button.js +0 -18
- package/src/list-item/utils.js +0 -34
- package/src/tab-list/editor.scss +0 -17
|
@@ -29,6 +29,7 @@ import { useInstanceId } from "@wordpress/compose";
|
|
|
29
29
|
import { Icon, search } from "@wordpress/icons";
|
|
30
30
|
import { __, sprintf } from "@wordpress/i18n";
|
|
31
31
|
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
|
|
32
|
+
import { speak } from "@wordpress/a11y";
|
|
32
33
|
import {
|
|
33
34
|
PC_WIDTH_DEFAULT,
|
|
34
35
|
PX_WIDTH_DEFAULT,
|
|
@@ -37,6 +38,17 @@ import {
|
|
|
37
38
|
} from "./utils.mjs";
|
|
38
39
|
import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
|
|
39
40
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
41
|
+
var TAG_NAME_MESSAGES = {
|
|
42
|
+
"": __(
|
|
43
|
+
"Lets the theme decide. Uses the <search> landmark element if the theme opts in, otherwise a <form>."
|
|
44
|
+
),
|
|
45
|
+
search: __(
|
|
46
|
+
"Wraps the block in a <search> landmark, announced as a search region by assistive technologies."
|
|
47
|
+
),
|
|
48
|
+
form: __(
|
|
49
|
+
'Uses a <form role="search"> wrapper for backward compatibility with existing theme styles.'
|
|
50
|
+
)
|
|
51
|
+
};
|
|
40
52
|
var DEFAULT_INNER_PADDING = "4px";
|
|
41
53
|
var PERCENTAGE_WIDTHS = [25, 50, 75, 100];
|
|
42
54
|
function SearchEdit({
|
|
@@ -57,6 +69,7 @@ function SearchEdit({
|
|
|
57
69
|
buttonText,
|
|
58
70
|
buttonPosition,
|
|
59
71
|
buttonUseIcon,
|
|
72
|
+
tagName,
|
|
60
73
|
style
|
|
61
74
|
} = attributes;
|
|
62
75
|
const wasJustInsertedIntoNavigationBlock = useSelect(
|
|
@@ -238,169 +251,191 @@ function SearchEdit({
|
|
|
238
251
|
] });
|
|
239
252
|
};
|
|
240
253
|
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
|
|
241
|
-
const controls = /* @__PURE__ */
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
checked: showLabel,
|
|
271
|
-
label: __("Show label"),
|
|
272
|
-
onChange: (value) => setAttributes({
|
|
273
|
-
showLabel: value
|
|
274
|
-
})
|
|
275
|
-
}
|
|
276
|
-
)
|
|
277
|
-
}
|
|
278
|
-
),
|
|
279
|
-
/* @__PURE__ */ jsx(
|
|
280
|
-
ToolsPanelItem,
|
|
281
|
-
{
|
|
282
|
-
hasValue: () => buttonPosition !== "button-outside",
|
|
283
|
-
label: __("Button position"),
|
|
284
|
-
onDeselect: () => {
|
|
285
|
-
setAttributes({
|
|
286
|
-
buttonPosition: "button-outside"
|
|
287
|
-
});
|
|
288
|
-
},
|
|
289
|
-
isShownByDefault: true,
|
|
290
|
-
children: /* @__PURE__ */ jsx(
|
|
291
|
-
SelectControl,
|
|
292
|
-
{
|
|
293
|
-
value: buttonPosition,
|
|
294
|
-
__next40pxDefaultSize: true,
|
|
295
|
-
label: __("Button position"),
|
|
296
|
-
onChange: (value) => {
|
|
297
|
-
setAttributes({
|
|
298
|
-
buttonPosition: value
|
|
299
|
-
});
|
|
300
|
-
},
|
|
301
|
-
options: buttonPositionControls
|
|
302
|
-
}
|
|
303
|
-
)
|
|
304
|
-
}
|
|
305
|
-
),
|
|
306
|
-
buttonPosition !== "no-button" && /* @__PURE__ */ jsx(
|
|
307
|
-
ToolsPanelItem,
|
|
308
|
-
{
|
|
309
|
-
hasValue: () => !!buttonUseIcon,
|
|
310
|
-
label: __("Use button with icon"),
|
|
311
|
-
onDeselect: () => {
|
|
312
|
-
setAttributes({
|
|
313
|
-
buttonUseIcon: false
|
|
314
|
-
});
|
|
315
|
-
},
|
|
316
|
-
isShownByDefault: true,
|
|
317
|
-
children: /* @__PURE__ */ jsx(
|
|
318
|
-
ToggleControl,
|
|
319
|
-
{
|
|
320
|
-
checked: buttonUseIcon,
|
|
321
|
-
label: __("Use button with icon"),
|
|
322
|
-
onChange: (value) => setAttributes({
|
|
323
|
-
buttonUseIcon: value
|
|
324
|
-
})
|
|
325
|
-
}
|
|
326
|
-
)
|
|
327
|
-
}
|
|
328
|
-
),
|
|
329
|
-
/* @__PURE__ */ jsx(
|
|
330
|
-
ToolsPanelItem,
|
|
331
|
-
{
|
|
332
|
-
hasValue: () => !!width,
|
|
333
|
-
label: __("Width"),
|
|
334
|
-
onDeselect: () => {
|
|
335
|
-
setAttributes({
|
|
336
|
-
width: void 0,
|
|
337
|
-
widthUnit: void 0
|
|
338
|
-
});
|
|
339
|
-
},
|
|
340
|
-
isShownByDefault: true,
|
|
341
|
-
children: /* @__PURE__ */ jsxs(VStack, { children: [
|
|
342
|
-
/* @__PURE__ */ jsx(
|
|
343
|
-
UnitControl,
|
|
254
|
+
const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
255
|
+
/* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
|
|
256
|
+
ToolsPanel,
|
|
257
|
+
{
|
|
258
|
+
label: __("Settings"),
|
|
259
|
+
resetAll: () => {
|
|
260
|
+
setAttributes({
|
|
261
|
+
width: void 0,
|
|
262
|
+
widthUnit: void 0,
|
|
263
|
+
showLabel: true,
|
|
264
|
+
buttonUseIcon: false,
|
|
265
|
+
buttonPosition: "button-outside"
|
|
266
|
+
});
|
|
267
|
+
},
|
|
268
|
+
dropdownMenuProps,
|
|
269
|
+
children: [
|
|
270
|
+
/* @__PURE__ */ jsx(
|
|
271
|
+
ToolsPanelItem,
|
|
272
|
+
{
|
|
273
|
+
hasValue: () => !showLabel,
|
|
274
|
+
label: __("Show label"),
|
|
275
|
+
onDeselect: () => {
|
|
276
|
+
setAttributes({
|
|
277
|
+
showLabel: true
|
|
278
|
+
});
|
|
279
|
+
},
|
|
280
|
+
isShownByDefault: true,
|
|
281
|
+
children: /* @__PURE__ */ jsx(
|
|
282
|
+
ToggleControl,
|
|
344
283
|
{
|
|
284
|
+
checked: showLabel,
|
|
285
|
+
label: __("Show label"),
|
|
286
|
+
onChange: (value) => setAttributes({
|
|
287
|
+
showLabel: value
|
|
288
|
+
})
|
|
289
|
+
}
|
|
290
|
+
)
|
|
291
|
+
}
|
|
292
|
+
),
|
|
293
|
+
/* @__PURE__ */ jsx(
|
|
294
|
+
ToolsPanelItem,
|
|
295
|
+
{
|
|
296
|
+
hasValue: () => buttonPosition !== "button-outside",
|
|
297
|
+
label: __("Button position"),
|
|
298
|
+
onDeselect: () => {
|
|
299
|
+
setAttributes({
|
|
300
|
+
buttonPosition: "button-outside"
|
|
301
|
+
});
|
|
302
|
+
},
|
|
303
|
+
isShownByDefault: true,
|
|
304
|
+
children: /* @__PURE__ */ jsx(
|
|
305
|
+
SelectControl,
|
|
306
|
+
{
|
|
307
|
+
value: buttonPosition,
|
|
345
308
|
__next40pxDefaultSize: true,
|
|
346
|
-
label: __("
|
|
347
|
-
|
|
348
|
-
min: isPercentageUnit(widthUnit) ? 0 : MIN_WIDTH,
|
|
349
|
-
max: isPercentageUnit(widthUnit) ? 100 : void 0,
|
|
350
|
-
step: 1,
|
|
351
|
-
onChange: (newWidth) => {
|
|
352
|
-
const parsedNewWidth = newWidth === "" ? void 0 : parseInt(newWidth, 10);
|
|
353
|
-
setAttributes({
|
|
354
|
-
width: parsedNewWidth
|
|
355
|
-
});
|
|
356
|
-
},
|
|
357
|
-
onUnitChange: (newUnit) => {
|
|
309
|
+
label: __("Button position"),
|
|
310
|
+
onChange: (value) => {
|
|
358
311
|
setAttributes({
|
|
359
|
-
|
|
360
|
-
widthUnit: newUnit
|
|
312
|
+
buttonPosition: value
|
|
361
313
|
});
|
|
362
314
|
},
|
|
363
|
-
|
|
364
|
-
value: `${width}${widthUnit}`,
|
|
365
|
-
units
|
|
315
|
+
options: buttonPositionControls
|
|
366
316
|
}
|
|
367
|
-
)
|
|
368
|
-
|
|
369
|
-
|
|
317
|
+
)
|
|
318
|
+
}
|
|
319
|
+
),
|
|
320
|
+
buttonPosition !== "no-button" && /* @__PURE__ */ jsx(
|
|
321
|
+
ToolsPanelItem,
|
|
322
|
+
{
|
|
323
|
+
hasValue: () => !!buttonUseIcon,
|
|
324
|
+
label: __("Use button with icon"),
|
|
325
|
+
onDeselect: () => {
|
|
326
|
+
setAttributes({
|
|
327
|
+
buttonUseIcon: false
|
|
328
|
+
});
|
|
329
|
+
},
|
|
330
|
+
isShownByDefault: true,
|
|
331
|
+
children: /* @__PURE__ */ jsx(
|
|
332
|
+
ToggleControl,
|
|
370
333
|
{
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
setAttributes({
|
|
376
|
-
width: newWidth,
|
|
377
|
-
widthUnit: "%"
|
|
378
|
-
});
|
|
379
|
-
},
|
|
380
|
-
isBlock: true,
|
|
381
|
-
__next40pxDefaultSize: true,
|
|
382
|
-
children: PERCENTAGE_WIDTHS.map((widthValue) => {
|
|
383
|
-
return /* @__PURE__ */ jsx(
|
|
384
|
-
ToggleGroupControlOption,
|
|
385
|
-
{
|
|
386
|
-
value: widthValue,
|
|
387
|
-
label: sprintf(
|
|
388
|
-
/* translators: %d: Percentage value. */
|
|
389
|
-
__("%d%%"),
|
|
390
|
-
widthValue
|
|
391
|
-
)
|
|
392
|
-
},
|
|
393
|
-
widthValue
|
|
394
|
-
);
|
|
334
|
+
checked: buttonUseIcon,
|
|
335
|
+
label: __("Use button with icon"),
|
|
336
|
+
onChange: (value) => setAttributes({
|
|
337
|
+
buttonUseIcon: value
|
|
395
338
|
})
|
|
396
339
|
}
|
|
397
340
|
)
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
341
|
+
}
|
|
342
|
+
),
|
|
343
|
+
/* @__PURE__ */ jsx(
|
|
344
|
+
ToolsPanelItem,
|
|
345
|
+
{
|
|
346
|
+
hasValue: () => !!width,
|
|
347
|
+
label: __("Width"),
|
|
348
|
+
onDeselect: () => {
|
|
349
|
+
setAttributes({
|
|
350
|
+
width: void 0,
|
|
351
|
+
widthUnit: void 0
|
|
352
|
+
});
|
|
353
|
+
},
|
|
354
|
+
isShownByDefault: true,
|
|
355
|
+
children: /* @__PURE__ */ jsxs(VStack, { children: [
|
|
356
|
+
/* @__PURE__ */ jsx(
|
|
357
|
+
UnitControl,
|
|
358
|
+
{
|
|
359
|
+
__next40pxDefaultSize: true,
|
|
360
|
+
label: __("Width"),
|
|
361
|
+
id: unitControlInputId,
|
|
362
|
+
min: isPercentageUnit(widthUnit) ? 0 : MIN_WIDTH,
|
|
363
|
+
max: isPercentageUnit(widthUnit) ? 100 : void 0,
|
|
364
|
+
step: 1,
|
|
365
|
+
onChange: (newWidth) => {
|
|
366
|
+
const parsedNewWidth = newWidth === "" ? void 0 : parseInt(newWidth, 10);
|
|
367
|
+
setAttributes({
|
|
368
|
+
width: parsedNewWidth
|
|
369
|
+
});
|
|
370
|
+
},
|
|
371
|
+
onUnitChange: (newUnit) => {
|
|
372
|
+
setAttributes({
|
|
373
|
+
width: "%" === newUnit ? PC_WIDTH_DEFAULT : PX_WIDTH_DEFAULT,
|
|
374
|
+
widthUnit: newUnit
|
|
375
|
+
});
|
|
376
|
+
},
|
|
377
|
+
__unstableInputWidth: "80px",
|
|
378
|
+
value: `${width}${widthUnit}`,
|
|
379
|
+
units
|
|
380
|
+
}
|
|
381
|
+
),
|
|
382
|
+
/* @__PURE__ */ jsx(
|
|
383
|
+
ToggleGroupControl,
|
|
384
|
+
{
|
|
385
|
+
label: __("Percentage Width"),
|
|
386
|
+
value: PERCENTAGE_WIDTHS.includes(width) && widthUnit === "%" ? width : void 0,
|
|
387
|
+
hideLabelFromVision: true,
|
|
388
|
+
onChange: (newWidth) => {
|
|
389
|
+
setAttributes({
|
|
390
|
+
width: newWidth,
|
|
391
|
+
widthUnit: "%"
|
|
392
|
+
});
|
|
393
|
+
},
|
|
394
|
+
isBlock: true,
|
|
395
|
+
__next40pxDefaultSize: true,
|
|
396
|
+
children: PERCENTAGE_WIDTHS.map((widthValue) => {
|
|
397
|
+
return /* @__PURE__ */ jsx(
|
|
398
|
+
ToggleGroupControlOption,
|
|
399
|
+
{
|
|
400
|
+
value: widthValue,
|
|
401
|
+
label: sprintf(
|
|
402
|
+
/* translators: %d: Percentage value. */
|
|
403
|
+
__("%d%%"),
|
|
404
|
+
widthValue
|
|
405
|
+
)
|
|
406
|
+
},
|
|
407
|
+
widthValue
|
|
408
|
+
);
|
|
409
|
+
})
|
|
410
|
+
}
|
|
411
|
+
)
|
|
412
|
+
] })
|
|
413
|
+
}
|
|
414
|
+
)
|
|
415
|
+
]
|
|
416
|
+
}
|
|
417
|
+
) }),
|
|
418
|
+
/* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
|
|
419
|
+
SelectControl,
|
|
420
|
+
{
|
|
421
|
+
__next40pxDefaultSize: true,
|
|
422
|
+
label: __("HTML element"),
|
|
423
|
+
value: tagName ?? "",
|
|
424
|
+
options: [
|
|
425
|
+
{ label: __("Default"), value: "" },
|
|
426
|
+
{ label: "<search>", value: "search" },
|
|
427
|
+
{ label: "<form>", value: "form" }
|
|
428
|
+
],
|
|
429
|
+
onChange: (value) => {
|
|
430
|
+
setAttributes({ tagName: value });
|
|
431
|
+
speak(
|
|
432
|
+
TAG_NAME_MESSAGES[value].replace(/[<>]/g, "")
|
|
433
|
+
);
|
|
434
|
+
},
|
|
435
|
+
help: TAG_NAME_MESSAGES[tagName ?? ""]
|
|
436
|
+
}
|
|
437
|
+
) })
|
|
438
|
+
] });
|
|
404
439
|
const isNonZeroBorderRadius = (radius) => radius !== void 0 && parseInt(radius, 10) !== 0;
|
|
405
440
|
const padBorderRadius = (radius) => isNonZeroBorderRadius(radius) ? `calc(${radius} + ${DEFAULT_INNER_PADDING})` : void 0;
|
|
406
441
|
const getWrapperStyles = () => {
|
|
@@ -448,58 +483,61 @@ function SearchEdit({
|
|
|
448
483
|
"wp-block-search__label",
|
|
449
484
|
typographyProps.className
|
|
450
485
|
);
|
|
451
|
-
|
|
486
|
+
const Wrapper = "search" === tagName ? "search" : "div";
|
|
487
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
452
488
|
controls,
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
489
|
+
/* @__PURE__ */ jsxs(Wrapper, { ...blockProps, children: [
|
|
490
|
+
showLabel && /* @__PURE__ */ jsx(
|
|
491
|
+
RichText,
|
|
492
|
+
{
|
|
493
|
+
identifier: "label",
|
|
494
|
+
className: labelClassnames,
|
|
495
|
+
"aria-label": __("Label text"),
|
|
496
|
+
placeholder: __("Add label…"),
|
|
497
|
+
withoutInteractiveFormatting: true,
|
|
498
|
+
value: label,
|
|
499
|
+
onChange: (html) => setAttributes({ label: html }),
|
|
500
|
+
style: typographyProps.style
|
|
501
|
+
}
|
|
502
|
+
),
|
|
503
|
+
/* @__PURE__ */ jsxs(
|
|
504
|
+
ResizableBox,
|
|
505
|
+
{
|
|
506
|
+
size: {
|
|
507
|
+
width: width === void 0 ? "auto" : `${width}${widthUnit}`,
|
|
508
|
+
height: "auto"
|
|
509
|
+
},
|
|
510
|
+
className: clsx(
|
|
511
|
+
"wp-block-search__inside-wrapper",
|
|
512
|
+
isButtonPositionInside ? borderProps.className : void 0
|
|
513
|
+
),
|
|
514
|
+
style: getWrapperStyles(),
|
|
515
|
+
minWidth: MIN_WIDTH,
|
|
516
|
+
enable: getResizableSides(),
|
|
517
|
+
onResizeStart: (event, direction, elt) => {
|
|
518
|
+
setAttributes({
|
|
519
|
+
width: parseInt(elt.offsetWidth, 10),
|
|
520
|
+
widthUnit: "px"
|
|
521
|
+
});
|
|
522
|
+
toggleSelection(false);
|
|
523
|
+
},
|
|
524
|
+
onResizeStop: (event, direction, elt, delta) => {
|
|
525
|
+
setAttributes({
|
|
526
|
+
width: parseInt(width + delta.width, 10)
|
|
527
|
+
});
|
|
528
|
+
toggleSelection(true);
|
|
529
|
+
},
|
|
530
|
+
showHandle: isSelected,
|
|
531
|
+
children: [
|
|
532
|
+
(isButtonPositionInside || isButtonPositionOutside || hasOnlyButton) && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
533
|
+
renderTextField(),
|
|
534
|
+
renderButton()
|
|
535
|
+
] }),
|
|
536
|
+
hasNoButton && renderTextField()
|
|
537
|
+
]
|
|
538
|
+
}
|
|
539
|
+
)
|
|
540
|
+
] })
|
|
503
541
|
] });
|
|
504
542
|
}
|
|
505
543
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/search/edit.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tSelectControl,\n\tToggleControl,\n\tResizableBox,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tisPercentageUnit,\n} from './utils.js';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\nconst PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\tstyle,\n\t} = attributes;\n\n\tconst wasJustInsertedIntoNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( wasJustInsertedIntoNavigationBlock ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tshowLabel: false,\n\t\t\t\tbuttonUseIcon: true,\n\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t} );\n\t\t}\n\t}, [\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\twasJustInsertedIntoNavigationBlock,\n\t\tsetAttributes,\n\t] );\n\n\tconst borderRadius = style?.border?.radius;\n\tlet borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps = {\n\t\t\t...borderProps,\n\t\t\tstyle: {\n\t\t\t\t...borderProps.style,\n\t\t\t\tborderRadius: `${ borderRadius }px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst [ fluidTypographySettings, layout ] = useSettings(\n\t\t'typography.fluid',\n\t\t'layout'\n\t);\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst isSearchFieldHidden = hasOnlyButton && ! isSelected;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tconst getBlockClassNames = () => {\n\t\treturn clsx(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\tisSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\tlabel: __( 'Button outside' ),\n\t\t\tvalue: 'button-outside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button inside' ),\n\t\t\tvalue: 'button-inside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'No button' ),\n\t\t\tvalue: 'no-button',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button only' ),\n\t\t\tvalue: 'button-only',\n\t\t},\n\t];\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = clsx(\n\t\t\t'wp-block-search__input',\n\t\t\thasNoButton ? colorProps.className : undefined,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( hasNoButton ? colorProps.style : {} ),\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = clsx(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"buttonText\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text…' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst controls = (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => ! showLabel }\n\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tchecked={ showLabel }\n\t\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowLabel: value,\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</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => buttonPosition !== 'button-outside' }\n\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tvalue={ buttonPosition }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonPosition: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\toptions={ buttonPositionControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ buttonPosition !== 'no-button' && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\thasValue={ () => !! buttonUseIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tchecked={ buttonUseIcon }\n\t\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tbuttonUseIcon: value,\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</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\t\tid={ unitControlInputId } // Unused, kept for backwards compatibility\n\t\t\t\t\t\t\t\tmin={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: MIN_WIDTH\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tconst parsedNewWidth =\n\t\t\t\t\t\t\t\t\t\tnewWidth === ''\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( newWidth, 10 );\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: parsedNewWidth,\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\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\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\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tPERCENTAGE_WIDTHS.includes( width ) &&\n\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t? width\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\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\tisBlock\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\t\t\twidthValue\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\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</ToggleGroupControl>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst isNonZeroBorderRadius = ( radius ) =>\n\t\tradius !== undefined && parseInt( radius, 10 ) !== 0;\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tisNonZeroBorderRadius( radius )\n\t\t\t? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`\n\t\t\t: undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t };\n\n\t\tif ( isButtonPositionInside ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst {\n\t\t\t\t\tborderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius,\n\t\t\t\t} = borderProps.style;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tpadBorderRadius( borderTopRightRadius ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomLeftRadius\n\t\t\t\t\t),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomRightRadius\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = clsx(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\n\t\t\t{ showLabel && (\n\t\t\t\t<RichText\n\t\t\t\t\tidentifier=\"label\"\n\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add label…' ) }\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( html ) => setAttributes( { label: html } ) }\n\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<ResizableBox\n\t\t\t\tsize={ {\n\t\t\t\t\twidth:\n\t\t\t\t\t\twidth === undefined\n\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t: `${ width }${ widthUnit }`,\n\t\t\t\t\theight: 'auto',\n\t\t\t\t} }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\tisButtonPositionInside ? borderProps.className : undefined\n\t\t\t\t) }\n\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\tenable={ getResizableSides() }\n\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t} }\n\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t} );\n\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t} }\n\t\t\t\tshowHandle={ isSelected }\n\t\t\t>\n\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\n\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t</ResizableBox>\n\t\t</div>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,+BAA+B;AAAA,EAC/B,iCAAiC;AAAA,EACjC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,iBAAiB;AACvC,SAAS,WAAW,cAAc;AAClC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,6BAA6B;AAAA,EAC7B,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,EAC1C,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,EAChC,wBAAwB;AAAA,OAClB;AACP,SAAS,qBAAqB;AAC9B,SAAS,MAAM,cAAc;AAC7B,SAAS,IAAI,eAAe;AAC5B,SAAS,uBAAuB,iBAAiB;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tInspectorControls,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\tgetTypographyClassesAndStyles as useTypographyProps,\n\tstore as blockEditorStore,\n\t__experimentalGetElementClassName,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport {\n\tSelectControl,\n\tToggleControl,\n\tResizableBox,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Icon, search } from '@wordpress/icons';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport {\n\tPC_WIDTH_DEFAULT,\n\tPX_WIDTH_DEFAULT,\n\tMIN_WIDTH,\n\tisPercentageUnit,\n} from './utils.js';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\n// Help text describing each wrapper element option. Kept local to the block\n// because the choices and their guidance are specific to the Search block.\nconst TAG_NAME_MESSAGES = {\n\t'': __(\n\t\t'Lets the theme decide. Uses the <search> landmark element if the theme opts in, otherwise a <form>.'\n\t),\n\tsearch: __(\n\t\t'Wraps the block in a <search> landmark, announced as a search region by assistive technologies.'\n\t),\n\tform: __(\n\t\t'Uses a <form role=\"search\"> wrapper for backward compatibility with existing theme styles.'\n\t),\n};\n\n// Used to calculate border radius adjustment to avoid \"fat\" corners when\n// button is placed inside wrapper.\nconst DEFAULT_INNER_PADDING = '4px';\nconst PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];\n\nexport default function SearchEdit( {\n\tclassName,\n\tattributes,\n\tsetAttributes,\n\ttoggleSelection,\n\tisSelected,\n\tclientId,\n} ) {\n\tconst {\n\t\tlabel,\n\t\tshowLabel,\n\t\tplaceholder,\n\t\twidth,\n\t\twidthUnit,\n\t\talign,\n\t\tbuttonText,\n\t\tbuttonPosition,\n\t\tbuttonUseIcon,\n\t\ttagName,\n\t\tstyle,\n\t} = attributes;\n\n\tconst wasJustInsertedIntoNavigationBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockParentsByBlockName, wasBlockJustInserted } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn (\n\t\t\t\t!! getBlockParentsByBlockName( clientId, 'core/navigation' )\n\t\t\t\t\t?.length && wasBlockJustInserted( clientId )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( wasJustInsertedIntoNavigationBlock ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tshowLabel: false,\n\t\t\t\tbuttonUseIcon: true,\n\t\t\t\tbuttonPosition: 'button-inside',\n\t\t\t} );\n\t\t}\n\t}, [\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\twasJustInsertedIntoNavigationBlock,\n\t\tsetAttributes,\n\t] );\n\n\tconst borderRadius = style?.border?.radius;\n\tlet borderProps = useBorderProps( attributes );\n\n\t// Check for old deprecated numerical border radius. Done as a separate\n\t// check so that a borderRadius style won't overwrite the longhand\n\t// per-corner styles.\n\tif ( typeof borderRadius === 'number' ) {\n\t\tborderProps = {\n\t\t\t...borderProps,\n\t\t\tstyle: {\n\t\t\t\t...borderProps.style,\n\t\t\t\tborderRadius: `${ borderRadius }px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tconst colorProps = useColorProps( attributes );\n\tconst [ fluidTypographySettings, layout ] = useSettings(\n\t\t'typography.fluid',\n\t\t'layout'\n\t);\n\tconst typographyProps = useTypographyProps( attributes, {\n\t\ttypography: {\n\t\t\tfluid: fluidTypographySettings,\n\t\t},\n\t\tlayout: {\n\t\t\twideSize: layout?.wideSize,\n\t\t},\n\t} );\n\tconst unitControlInstanceId = useInstanceId( UnitControl );\n\tconst unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;\n\tconst isButtonPositionInside = 'button-inside' === buttonPosition;\n\tconst isButtonPositionOutside = 'button-outside' === buttonPosition;\n\tconst hasNoButton = 'no-button' === buttonPosition;\n\tconst hasOnlyButton = 'button-only' === buttonPosition;\n\tconst isSearchFieldHidden = hasOnlyButton && ! isSelected;\n\tconst searchFieldRef = useRef();\n\tconst buttonRef = useRef();\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: [ '%', 'px' ],\n\t\tdefaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },\n\t} );\n\n\tconst getBlockClassNames = () => {\n\t\treturn clsx(\n\t\t\tclassName,\n\t\t\tisButtonPositionInside\n\t\t\t\t? 'wp-block-search__button-inside'\n\t\t\t\t: undefined,\n\t\t\tisButtonPositionOutside\n\t\t\t\t? 'wp-block-search__button-outside'\n\t\t\t\t: undefined,\n\t\t\thasNoButton ? 'wp-block-search__no-button' : undefined,\n\t\t\thasOnlyButton ? 'wp-block-search__button-only' : undefined,\n\t\t\t! buttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__text-button'\n\t\t\t\t: undefined,\n\t\t\tbuttonUseIcon && ! hasNoButton\n\t\t\t\t? 'wp-block-search__icon-button'\n\t\t\t\t: undefined,\n\t\t\tisSearchFieldHidden\n\t\t\t\t? 'wp-block-search__searchfield-hidden'\n\t\t\t\t: undefined\n\t\t);\n\t};\n\n\tconst buttonPositionControls = [\n\t\t{\n\t\t\tlabel: __( 'Button outside' ),\n\t\t\tvalue: 'button-outside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button inside' ),\n\t\t\tvalue: 'button-inside',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'No button' ),\n\t\t\tvalue: 'no-button',\n\t\t},\n\t\t{\n\t\t\tlabel: __( 'Button only' ),\n\t\t\tvalue: 'button-only',\n\t\t},\n\t];\n\n\tconst getResizableSides = () => {\n\t\tif ( hasOnlyButton ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\tright: align !== 'right',\n\t\t\tleft: align === 'right',\n\t\t};\n\t};\n\n\tconst renderTextField = () => {\n\t\t// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.\n\t\tconst textFieldClasses = clsx(\n\t\t\t'wp-block-search__input',\n\t\t\thasNoButton ? colorProps.className : undefined,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\n\t\t\t...( hasNoButton ? colorProps.style : {} ),\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t\t...typographyProps.style,\n\t\t\ttextDecoration: undefined,\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"search\"\n\t\t\t\tclassName={ textFieldClasses }\n\t\t\t\tstyle={ textFieldStyles }\n\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t// which is confusing.\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t}\n\t\t\t\tvalue={ placeholder }\n\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t}\n\t\t\t\tref={ searchFieldRef }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderButton = () => {\n\t\t// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.\n\t\tconst buttonClasses = clsx(\n\t\t\t'wp-block-search__button',\n\t\t\tcolorProps.className,\n\t\t\ttypographyProps.className,\n\t\t\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\tbuttonUseIcon ? 'has-icon' : undefined,\n\t\t\t__experimentalGetElementClassName( 'button' )\n\t\t);\n\t\tconst buttonStyles = {\n\t\t\t...colorProps.style,\n\t\t\t...typographyProps.style,\n\t\t\t...( isButtonPositionInside\n\t\t\t\t? {\n\t\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopLeftRadius,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t\t }\n\t\t\t\t: borderProps.style ),\n\t\t};\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ buttonUseIcon && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tbuttonText\n\t\t\t\t\t\t\t\t? stripHTML( buttonText )\n\t\t\t\t\t\t\t\t: __( 'Search' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tref={ buttonRef }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t\t</button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! buttonUseIcon && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"buttonText\"\n\t\t\t\t\t\tclassName={ buttonClasses }\n\t\t\t\t\t\tstyle={ buttonStyles }\n\t\t\t\t\t\taria-label={ __( 'Button text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add button text…' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ buttonText }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { buttonText: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst controls = (\n\t\t<>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => ! showLabel }\n\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tshowLabel: true,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tchecked={ showLabel }\n\t\t\t\t\t\t\tlabel={ __( 'Show label' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowLabel: value,\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</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => buttonPosition !== 'button-outside' }\n\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tbuttonPosition: 'button-outside',\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tvalue={ buttonPosition }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Button position' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonPosition: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\toptions={ buttonPositionControls }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ buttonPosition !== 'no-button' && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\thasValue={ () => !! buttonUseIcon }\n\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tbuttonUseIcon: false,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tchecked={ buttonUseIcon }\n\t\t\t\t\t\t\t\tlabel={ __( 'Use button with icon' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tbuttonUseIcon: value,\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</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! width }\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\t\t\twidthUnit: undefined,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\t\tid={ unitControlInputId } // Unused, kept for backwards compatibility\n\t\t\t\t\t\t\t\tmin={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: MIN_WIDTH\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\t\tisPercentageUnit( widthUnit )\n\t\t\t\t\t\t\t\t\t\t? 100\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tconst parsedNewWidth =\n\t\t\t\t\t\t\t\t\t\tnewWidth === ''\n\t\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t\t: parseInt( newWidth, 10 );\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: parsedNewWidth,\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\tonUnitChange={ ( newUnit ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t'%' === newUnit\n\t\t\t\t\t\t\t\t\t\t\t\t? PC_WIDTH_DEFAULT\n\t\t\t\t\t\t\t\t\t\t\t\t: PX_WIDTH_DEFAULT,\n\t\t\t\t\t\t\t\t\t\twidthUnit: newUnit,\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\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\tvalue={ `${ width }${ widthUnit }` }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Percentage Width' ) }\n\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\tPERCENTAGE_WIDTHS.includes( width ) &&\n\t\t\t\t\t\t\t\t\twidthUnit === '%'\n\t\t\t\t\t\t\t\t\t\t? width\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tonChange={ ( newWidth ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\t\twidthUnit: '%',\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\tisBlock\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\t\t\tkey={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ widthValue }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: Percentage value. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%d%%' ),\n\t\t\t\t\t\t\t\t\t\t\t\twidthValue\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\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</ToggleGroupControl>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\tvalue={ tagName ?? '' }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default' ), value: '' },\n\t\t\t\t\t\t{ label: '<search>', value: 'search' },\n\t\t\t\t\t\t{ label: '<form>', value: 'form' },\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tsetAttributes( { tagName: value } );\n\t\t\t\t\t\t// The help text is updated via aria-describedby, which\n\t\t\t\t\t\t// is not re-announced while focus remains on the select.\n\t\t\t\t\t\t// Announce the new description so it is not missed.\n\t\t\t\t\t\t// speak() strips HTML-like tags, which would drop the\n\t\t\t\t\t\t// element names (e.g. <search>) entirely. Remove only the\n\t\t\t\t\t\t// angle brackets so the words are retained when spoken.\n\t\t\t\t\t\tspeak(\n\t\t\t\t\t\t\tTAG_NAME_MESSAGES[ value ].replace( /[<>]/g, '' )\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\thelp={ TAG_NAME_MESSAGES[ tagName ?? '' ] }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst isNonZeroBorderRadius = ( radius ) =>\n\t\tradius !== undefined && parseInt( radius, 10 ) !== 0;\n\n\tconst padBorderRadius = ( radius ) =>\n\t\tisNonZeroBorderRadius( radius )\n\t\t\t? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`\n\t\t\t: undefined;\n\n\tconst getWrapperStyles = () => {\n\t\tconst styles = isButtonPositionInside\n\t\t\t? borderProps.style\n\t\t\t: {\n\t\t\t\t\tborderRadius: borderProps.style?.borderRadius,\n\t\t\t\t\tborderTopLeftRadius: borderProps.style?.borderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\tborderProps.style?.borderBottomRightRadius,\n\t\t\t };\n\n\t\tif ( isButtonPositionInside ) {\n\t\t\t// We have button inside wrapper and a border radius value to apply.\n\t\t\t// Add default padding so we don't get \"fat\" corners.\n\t\t\t//\n\t\t\t// CSS calc() is used here to support non-pixel units. The inline\n\t\t\t// style using calc() will only apply if both values have units.\n\n\t\t\tif ( typeof borderRadius === 'object' ) {\n\t\t\t\t// Individual corner border radii present.\n\t\t\t\tconst {\n\t\t\t\t\tborderTopLeftRadius,\n\t\t\t\t\tborderTopRightRadius,\n\t\t\t\t\tborderBottomLeftRadius,\n\t\t\t\t\tborderBottomRightRadius,\n\t\t\t\t} = borderProps.style;\n\n\t\t\t\treturn {\n\t\t\t\t\t...styles,\n\t\t\t\t\tborderTopLeftRadius: padBorderRadius( borderTopLeftRadius ),\n\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\tpadBorderRadius( borderTopRightRadius ),\n\t\t\t\t\tborderBottomLeftRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomLeftRadius\n\t\t\t\t\t),\n\t\t\t\t\tborderBottomRightRadius: padBorderRadius(\n\t\t\t\t\t\tborderBottomRightRadius\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// The inline style using calc() will only apply if both values\n\t\t\t// supplied to calc() have units. Deprecated block's may have\n\t\t\t// unitless integer.\n\t\t\tconst radius = Number.isInteger( borderRadius )\n\t\t\t\t? `${ borderRadius }px`\n\t\t\t\t: borderRadius;\n\n\t\t\tstyles.borderRadius = `calc(${ radius } + ${ DEFAULT_INNER_PADDING })`;\n\t\t}\n\n\t\treturn styles;\n\t};\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: getBlockClassNames(),\n\t\tstyle: {\n\t\t\t...typographyProps.style,\n\t\t\t// Input opts out of text decoration.\n\t\t\ttextDecoration: undefined,\n\t\t},\n\t} );\n\n\tconst labelClassnames = clsx(\n\t\t'wp-block-search__label',\n\t\ttypographyProps.className\n\t);\n\n\t// Reflect an explicit <search> choice in the editor markup so wrapper\n\t// styles match the front end. The <form> and theme-deferred default keep\n\t// the historical <div> to avoid nesting a live <form> in the editor.\n\tconst Wrapper = 'search' === tagName ? 'search' : 'div';\n\n\treturn (\n\t\t<>\n\t\t\t{ controls }\n\t\t\t<Wrapper { ...blockProps }>\n\t\t\t\t{ showLabel && (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tidentifier=\"label\"\n\t\t\t\t\t\tclassName={ labelClassnames }\n\t\t\t\t\t\taria-label={ __( 'Label text' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Add label…' ) }\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tvalue={ label }\n\t\t\t\t\t\tonChange={ ( html ) =>\n\t\t\t\t\t\t\tsetAttributes( { label: html } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstyle={ typographyProps.style }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t<ResizableBox\n\t\t\t\t\tsize={ {\n\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\twidth === undefined\n\t\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t\t: `${ width }${ widthUnit }`,\n\t\t\t\t\t\theight: 'auto',\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'wp-block-search__inside-wrapper',\n\t\t\t\t\t\tisButtonPositionInside\n\t\t\t\t\t\t\t? borderProps.className\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ getWrapperStyles() }\n\t\t\t\t\tminWidth={ MIN_WIDTH }\n\t\t\t\t\tenable={ getResizableSides() }\n\t\t\t\t\tonResizeStart={ ( event, direction, elt ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: parseInt( elt.offsetWidth, 10 ),\n\t\t\t\t\t\t\twidthUnit: 'px',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\ttoggleSelection( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t\t\t} );\n\t\t\t\t\t\ttoggleSelection( true );\n\t\t\t\t\t} }\n\t\t\t\t\tshowHandle={ isSelected }\n\t\t\t\t>\n\t\t\t\t\t{ ( isButtonPositionInside ||\n\t\t\t\t\t\tisButtonPositionOutside ||\n\t\t\t\t\t\thasOnlyButton ) && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ renderTextField() }\n\t\t\t\t\t\t\t{ renderButton() }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasNoButton && renderTextField() }\n\t\t\t\t</ResizableBox>\n\t\t\t</Wrapper>\n\t\t</>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|