@wordpress/block-library 9.36.0 → 9.36.1-next.738bb1424.0

package/build/search/edit.cjs

@@ -0,0 +1,538 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-library/src/search/edit.js
+var edit_exports = {};
+__export(edit_exports, {
+  default: () => SearchEdit
+});
+module.exports = __toCommonJS(edit_exports);
+var import_clsx = __toESM(require("clsx"), 1);
+var import_block_editor = require("@wordpress/block-editor");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_icons = require("@wordpress/icons");
+var import_i18n = require("@wordpress/i18n");
+var import_dom = require("@wordpress/dom");
+var import_utils = require("./utils.cjs");
+var import_hooks = require("../utils/hooks.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_INNER_PADDING = "4px";
+var PERCENTAGE_WIDTHS = [25, 50, 75, 100];
+function SearchEdit({
+  className,
+  attributes,
+  setAttributes,
+  toggleSelection,
+  isSelected,
+  clientId
+}) {
+  const {
+    label,
+    showLabel,
+    placeholder,
+    width,
+    widthUnit,
+    align,
+    buttonText,
+    buttonPosition,
+    buttonUseIcon,
+    isSearchFieldHidden,
+    style
+  } = attributes;
+  const wasJustInsertedIntoNavigationBlock = (0, import_data.useSelect)(
+    (select) => {
+      const { getBlockParentsByBlockName, wasBlockJustInserted } = select(import_block_editor.store);
+      return !!getBlockParentsByBlockName(clientId, "core/navigation")?.length && wasBlockJustInserted(clientId);
+    },
+    [clientId]
+  );
+  const { __unstableMarkNextChangeAsNotPersistent } = (0, import_data.useDispatch)(import_block_editor.store);
+  (0, import_element.useEffect)(() => {
+    if (wasJustInsertedIntoNavigationBlock) {
+      __unstableMarkNextChangeAsNotPersistent();
+      setAttributes({
+        showLabel: false,
+        buttonUseIcon: true,
+        buttonPosition: "button-inside"
+      });
+    }
+  }, [
+    __unstableMarkNextChangeAsNotPersistent,
+    wasJustInsertedIntoNavigationBlock,
+    setAttributes
+  ]);
+  const borderRadius = style?.border?.radius;
+  let borderProps = (0, import_block_editor.__experimentalUseBorderProps)(attributes);
+  if (typeof borderRadius === "number") {
+    borderProps = {
+      ...borderProps,
+      style: {
+        ...borderProps.style,
+        borderRadius: `${borderRadius}px`
+      }
+    };
+  }
+  const colorProps = (0, import_block_editor.__experimentalUseColorProps)(attributes);
+  const [fluidTypographySettings, layout] = (0, import_block_editor.useSettings)(
+    "typography.fluid",
+    "layout"
+  );
+  const typographyProps = (0, import_block_editor.getTypographyClassesAndStyles)(attributes, {
+    typography: {
+      fluid: fluidTypographySettings
+    },
+    layout: {
+      wideSize: layout?.wideSize
+    }
+  });
+  const unitControlInstanceId = (0, import_compose.useInstanceId)(import_components.__experimentalUnitControl);
+  const unitControlInputId = `wp-block-search__width-${unitControlInstanceId}`;
+  const isButtonPositionInside = "button-inside" === buttonPosition;
+  const isButtonPositionOutside = "button-outside" === buttonPosition;
+  const hasNoButton = "no-button" === buttonPosition;
+  const hasOnlyButton = "button-only" === buttonPosition;
+  const searchFieldRef = (0, import_element.useRef)();
+  const buttonRef = (0, import_element.useRef)();
+  const units = (0, import_components.__experimentalUseCustomUnits)({
+    availableUnits: ["%", "px"],
+    defaultValues: { "%": import_utils.PC_WIDTH_DEFAULT, px: import_utils.PX_WIDTH_DEFAULT }
+  });
+  (0, import_element.useEffect)(() => {
+    if (hasOnlyButton && !isSelected) {
+      setAttributes({
+        isSearchFieldHidden: true
+      });
+    }
+  }, [hasOnlyButton, isSelected, setAttributes]);
+  (0, import_element.useEffect)(() => {
+    if (!hasOnlyButton || !isSelected) {
+      return;
+    }
+    setAttributes({
+      isSearchFieldHidden: false
+    });
+  }, [hasOnlyButton, isSelected, setAttributes, width]);
+  const getBlockClassNames = () => {
+    return (0, import_clsx.default)(
+      className,
+      isButtonPositionInside ? "wp-block-search__button-inside" : void 0,
+      isButtonPositionOutside ? "wp-block-search__button-outside" : void 0,
+      hasNoButton ? "wp-block-search__no-button" : void 0,
+      hasOnlyButton ? "wp-block-search__button-only" : void 0,
+      !buttonUseIcon && !hasNoButton ? "wp-block-search__text-button" : void 0,
+      buttonUseIcon && !hasNoButton ? "wp-block-search__icon-button" : void 0,
+      hasOnlyButton && isSearchFieldHidden ? "wp-block-search__searchfield-hidden" : void 0
+    );
+  };
+  const buttonPositionControls = [
+    {
+      label: (0, import_i18n.__)("Button outside"),
+      value: "button-outside"
+    },
+    {
+      label: (0, import_i18n.__)("Button inside"),
+      value: "button-inside"
+    },
+    {
+      label: (0, import_i18n.__)("No button"),
+      value: "no-button"
+    },
+    {
+      label: (0, import_i18n.__)("Button only"),
+      value: "button-only"
+    }
+  ];
+  const getResizableSides = () => {
+    if (hasOnlyButton) {
+      return {};
+    }
+    return {
+      right: align !== "right",
+      left: align === "right"
+    };
+  };
+  const renderTextField = () => {
+    const textFieldClasses = (0, import_clsx.default)(
+      "wp-block-search__input",
+      isButtonPositionInside ? void 0 : borderProps.className,
+      typographyProps.className
+    );
+    const textFieldStyles = {
+      ...isButtonPositionInside ? {
+        borderRadius: borderProps.style?.borderRadius,
+        borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+        borderTopRightRadius: borderProps.style?.borderTopRightRadius,
+        borderBottomLeftRadius: borderProps.style?.borderBottomLeftRadius,
+        borderBottomRightRadius: borderProps.style?.borderBottomRightRadius
+      } : borderProps.style,
+      ...typographyProps.style,
+      textDecoration: void 0
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "search",
+        className: textFieldClasses,
+        style: textFieldStyles,
+        "aria-label": (0, import_i18n.__)("Optional placeholder text"),
+        placeholder: placeholder ? void 0 : (0, import_i18n.__)("Optional placeholder\u2026"),
+        value: placeholder,
+        onChange: (event) => setAttributes({ placeholder: event.target.value }),
+        ref: searchFieldRef
+      }
+    );
+  };
+  const renderButton = () => {
+    const buttonClasses = (0, import_clsx.default)(
+      "wp-block-search__button",
+      colorProps.className,
+      typographyProps.className,
+      isButtonPositionInside ? void 0 : borderProps.className,
+      buttonUseIcon ? "has-icon" : void 0,
+      (0, import_block_editor.__experimentalGetElementClassName)("button")
+    );
+    const buttonStyles = {
+      ...colorProps.style,
+      ...typographyProps.style,
+      ...isButtonPositionInside ? {
+        borderRadius: borderProps.style?.borderRadius,
+        borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+        borderTopRightRadius: borderProps.style?.borderTopRightRadius,
+        borderBottomLeftRadius: borderProps.style?.borderBottomLeftRadius,
+        borderBottomRightRadius: borderProps.style?.borderBottomRightRadius
+      } : borderProps.style
+    };
+    const handleButtonClick = () => {
+      if (hasOnlyButton) {
+        setAttributes({
+          isSearchFieldHidden: !isSearchFieldHidden
+        });
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      buttonUseIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClasses,
+          style: buttonStyles,
+          "aria-label": buttonText ? (0, import_dom.__unstableStripHTML)(buttonText) : (0, import_i18n.__)("Search"),
+          onClick: handleButtonClick,
+          ref: buttonRef,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.search })
+        }
+      ),
+      !buttonUseIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.RichText,
+        {
+          identifier: "buttonText",
+          className: buttonClasses,
+          style: buttonStyles,
+          "aria-label": (0, import_i18n.__)("Button text"),
+          placeholder: (0, import_i18n.__)("Add button text\u2026"),
+          withoutInteractiveFormatting: true,
+          value: buttonText,
+          onChange: (html) => setAttributes({ buttonText: html }),
+          onClick: handleButtonClick
+        }
+      )
+    ] });
+  };
+  const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
+  const controls = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalToolsPanel,
+    {
+      label: (0, import_i18n.__)("Settings"),
+      resetAll: () => {
+        setAttributes({
+          width: void 0,
+          widthUnit: void 0,
+          showLabel: true,
+          buttonUseIcon: false,
+          buttonPosition: "button-outside",
+          isSearchFieldHidden: false
+        });
+      },
+      dropdownMenuProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            hasValue: () => !showLabel,
+            label: (0, import_i18n.__)("Show label"),
+            onDeselect: () => {
+              setAttributes({
+                showLabel: true
+              });
+            },
+            isShownByDefault: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.ToggleControl,
+              {
+                checked: showLabel,
+                label: (0, import_i18n.__)("Show label"),
+                onChange: (value) => setAttributes({
+                  showLabel: value
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            hasValue: () => buttonPosition !== "button-outside",
+            label: (0, import_i18n.__)("Button position"),
+            onDeselect: () => {
+              setAttributes({
+                buttonPosition: "button-outside",
+                isSearchFieldHidden: false
+              });
+            },
+            isShownByDefault: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.SelectControl,
+              {
+                value: buttonPosition,
+                __next40pxDefaultSize: true,
+                label: (0, import_i18n.__)("Button position"),
+                onChange: (value) => {
+                  setAttributes({
+                    buttonPosition: value,
+                    isSearchFieldHidden: value === "button-only"
+                  });
+                },
+                options: buttonPositionControls
+              }
+            )
+          }
+        ),
+        buttonPosition !== "no-button" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            hasValue: () => !!buttonUseIcon,
+            label: (0, import_i18n.__)("Use button with icon"),
+            onDeselect: () => {
+              setAttributes({
+                buttonUseIcon: false
+              });
+            },
+            isShownByDefault: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.ToggleControl,
+              {
+                checked: buttonUseIcon,
+                label: (0, import_i18n.__)("Use button with icon"),
+                onChange: (value) => setAttributes({
+                  buttonUseIcon: value
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalToolsPanelItem,
+          {
+            hasValue: () => !!width,
+            label: (0, import_i18n.__)("Width"),
+            onDeselect: () => {
+              setAttributes({
+                width: void 0,
+                widthUnit: void 0
+              });
+            },
+            isShownByDefault: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.__experimentalUnitControl,
+                {
+                  __next40pxDefaultSize: true,
+                  label: (0, import_i18n.__)("Width"),
+                  id: unitControlInputId,
+                  min: (0, import_utils.isPercentageUnit)(widthUnit) ? 0 : import_utils.MIN_WIDTH,
+                  max: (0, import_utils.isPercentageUnit)(widthUnit) ? 100 : void 0,
+                  step: 1,
+                  onChange: (newWidth) => {
+                    const parsedNewWidth = newWidth === "" ? void 0 : parseInt(newWidth, 10);
+                    setAttributes({
+                      width: parsedNewWidth
+                    });
+                  },
+                  onUnitChange: (newUnit) => {
+                    setAttributes({
+                      width: "%" === newUnit ? import_utils.PC_WIDTH_DEFAULT : import_utils.PX_WIDTH_DEFAULT,
+                      widthUnit: newUnit
+                    });
+                  },
+                  __unstableInputWidth: "80px",
+                  value: `${width}${widthUnit}`,
+                  units
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.__experimentalToggleGroupControl,
+                {
+                  label: (0, import_i18n.__)("Percentage Width"),
+                  value: PERCENTAGE_WIDTHS.includes(width) && widthUnit === "%" ? width : void 0,
+                  hideLabelFromVision: true,
+                  onChange: (newWidth) => {
+                    setAttributes({
+                      width: newWidth,
+                      widthUnit: "%"
+                    });
+                  },
+                  isBlock: true,
+                  __next40pxDefaultSize: true,
+                  children: PERCENTAGE_WIDTHS.map((widthValue) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.__experimentalToggleGroupControlOption,
+                      {
+                        value: widthValue,
+                        label: (0, import_i18n.sprintf)(
+                          /* translators: %d: Percentage value. */
+                          (0, import_i18n.__)("%d%%"),
+                          widthValue
+                        )
+                      },
+                      widthValue
+                    );
+                  })
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  ) }) });
+  const isNonZeroBorderRadius = (radius) => radius !== void 0 && parseInt(radius, 10) !== 0;
+  const padBorderRadius = (radius) => isNonZeroBorderRadius(radius) ? `calc(${radius} + ${DEFAULT_INNER_PADDING})` : void 0;
+  const getWrapperStyles = () => {
+    const styles = isButtonPositionInside ? borderProps.style : {
+      borderRadius: borderProps.style?.borderRadius,
+      borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+      borderTopRightRadius: borderProps.style?.borderTopRightRadius,
+      borderBottomLeftRadius: borderProps.style?.borderBottomLeftRadius,
+      borderBottomRightRadius: borderProps.style?.borderBottomRightRadius
+    };
+    if (isButtonPositionInside) {
+      if (typeof borderRadius === "object") {
+        const {
+          borderTopLeftRadius,
+          borderTopRightRadius,
+          borderBottomLeftRadius,
+          borderBottomRightRadius
+        } = borderProps.style;
+        return {
+          ...styles,
+          borderTopLeftRadius: padBorderRadius(borderTopLeftRadius),
+          borderTopRightRadius: padBorderRadius(borderTopRightRadius),
+          borderBottomLeftRadius: padBorderRadius(
+            borderBottomLeftRadius
+          ),
+          borderBottomRightRadius: padBorderRadius(
+            borderBottomRightRadius
+          )
+        };
+      }
+      const radius = Number.isInteger(borderRadius) ? `${borderRadius}px` : borderRadius;
+      styles.borderRadius = `calc(${radius} + ${DEFAULT_INNER_PADDING})`;
+    }
+    return styles;
+  };
+  const blockProps = (0, import_block_editor.useBlockProps)({
+    className: getBlockClassNames(),
+    style: {
+      ...typographyProps.style,
+      // Input opts out of text decoration.
+      textDecoration: void 0
+    }
+  });
+  const labelClassnames = (0, import_clsx.default)(
+    "wp-block-search__label",
+    typographyProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...blockProps, children: [
+    controls,
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_block_editor.RichText,
+      {
+        identifier: "label",
+        className: labelClassnames,
+        "aria-label": (0, import_i18n.__)("Label text"),
+        placeholder: (0, import_i18n.__)("Add label\u2026"),
+        withoutInteractiveFormatting: true,
+        value: label,
+        onChange: (html) => setAttributes({ label: html }),
+        style: typographyProps.style
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.ResizableBox,
+      {
+        size: {
+          width: width === void 0 ? "auto" : `${width}${widthUnit}`,
+          height: "auto"
+        },
+        className: (0, import_clsx.default)(
+          "wp-block-search__inside-wrapper",
+          isButtonPositionInside ? borderProps.className : void 0
+        ),
+        style: getWrapperStyles(),
+        minWidth: import_utils.MIN_WIDTH,
+        enable: getResizableSides(),
+        onResizeStart: (event, direction, elt) => {
+          setAttributes({
+            width: parseInt(elt.offsetWidth, 10),
+            widthUnit: "px"
+          });
+          toggleSelection(false);
+        },
+        onResizeStop: (event, direction, elt, delta) => {
+          setAttributes({
+            width: parseInt(width + delta.width, 10)
+          });
+          toggleSelection(true);
+        },
+        showHandle: isSelected,
+        children: [
+          (isButtonPositionInside || isButtonPositionOutside || hasOnlyButton) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            renderTextField(),
+            renderButton()
+          ] }),
+          hasNoButton && renderTextField()
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=edit.cjs.map

package/build/search/edit.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/search/edit.js"],
+  "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\tisSearchFieldHidden,\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 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\tuseEffect( () => {\n\t\tif ( hasOnlyButton && ! isSelected ) {\n\t\t\tsetAttributes( {\n\t\t\t\tisSearchFieldHidden: true,\n\t\t\t} );\n\t\t}\n\t}, [ hasOnlyButton, isSelected, setAttributes ] );\n\n\t// Show the search field when width changes.\n\tuseEffect( () => {\n\t\tif ( ! hasOnlyButton || ! isSelected ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tisSearchFieldHidden: false,\n\t\t} );\n\t}, [ hasOnlyButton, isSelected, setAttributes, width ] );\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\thasOnlyButton && isSearchFieldHidden\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\tisButtonPositionInside ? undefined : borderProps.className,\n\t\t\ttypographyProps.className\n\t\t);\n\t\tconst textFieldStyles = {\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\u2026' )\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\tconst handleButtonClick = () => {\n\t\t\tif ( hasOnlyButton ) {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tisSearchFieldHidden: ! isSearchFieldHidden,\n\t\t\t\t} );\n\t\t\t}\n\t\t};\n\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\tonClick={ handleButtonClick }\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\u2026' ) }\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\tonClick={ handleButtonClick }\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\tisSearchFieldHidden: false,\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\tisSearchFieldHidden: false,\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\tisSearchFieldHidden:\n\t\t\t\t\t\t\t\t\t\tvalue === 'button-only',\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\u2026' ) }\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"],
+  "mappings": "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",
+  "names": ["blockEditorStore", "useBorderProps", "useColorProps", "useTypographyProps", "UnitControl", "useCustomUnits", "clsx", "stripHTML", "ToolsPanel", "ToolsPanelItem", "VStack", "ToggleGroupControl", "ToggleGroupControlOption"]
+}