@wordpress/block-library 9.48.1 → 10.0.0

package/build-module/search/edit.mjs

@@ -29,6 +29,7 @@ import { useInstanceId } from "@wordpress/compose";
 import { Icon, search } from "@wordpress/icons";
 import { __, sprintf } from "@wordpress/i18n";
 import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
+import { speak } from "@wordpress/a11y";
 import {
   PC_WIDTH_DEFAULT,
   PX_WIDTH_DEFAULT,
@@ -37,6 +38,17 @@ import {
 } from "./utils.mjs";
 import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TAG_NAME_MESSAGES = {
+  "": __(
+    "Lets the theme decide. Uses the <search> landmark element if the theme opts in, otherwise a <form>."
+  ),
+  search: __(
+    "Wraps the block in a <search> landmark, announced as a search region by assistive technologies."
+  ),
+  form: __(
+    'Uses a <form role="search"> wrapper for backward compatibility with existing theme styles.'
+  )
+};
 var DEFAULT_INNER_PADDING = "4px";
 var PERCENTAGE_WIDTHS = [25, 50, 75, 100];
 function SearchEdit({
@@ -57,6 +69,7 @@ function SearchEdit({
     buttonText,
     buttonPosition,
     buttonUseIcon,
+    tagName,
     style
   } = attributes;
   const wasJustInsertedIntoNavigationBlock = useSelect(
@@ -183,7 +196,7 @@ function SearchEdit({
         className: textFieldClasses,
         style: textFieldStyles,
         "aria-label": __("Optional placeholder text"),
-        placeholder: placeholder ? void 0 : __("Optional placeholder\u2026"),
+        placeholder: placeholder ? void 0 : __("Optional placeholder…"),
         value: placeholder,
         onChange: (event) => setAttributes({ placeholder: event.target.value }),
         ref: searchFieldRef
@@ -229,7 +242,7 @@ function SearchEdit({
           className: buttonClasses,
           style: buttonStyles,
           "aria-label": __("Button text"),
-          placeholder: __("Add button text\u2026"),
+          placeholder: __("Add button text…"),
           withoutInteractiveFormatting: true,
           value: buttonText,
           onChange: (html) => setAttributes({ buttonText: html })
@@ -238,169 +251,191 @@ function SearchEdit({
     ] });
   };
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-  const controls = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
-    ToolsPanel,
-    {
-      label: __("Settings"),
-      resetAll: () => {
-        setAttributes({
-          width: void 0,
-          widthUnit: void 0,
-          showLabel: true,
-          buttonUseIcon: false,
-          buttonPosition: "button-outside"
-        });
-      },
-      dropdownMenuProps,
-      children: [
-        /* @__PURE__ */ jsx(
-          ToolsPanelItem,
-          {
-            hasValue: () => !showLabel,
-            label: __("Show label"),
-            onDeselect: () => {
-              setAttributes({
-                showLabel: true
-              });
-            },
-            isShownByDefault: true,
-            children: /* @__PURE__ */ jsx(
-              ToggleControl,
-              {
-                checked: showLabel,
-                label: __("Show label"),
-                onChange: (value) => setAttributes({
-                  showLabel: value
-                })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolsPanelItem,
-          {
-            hasValue: () => buttonPosition !== "button-outside",
-            label: __("Button position"),
-            onDeselect: () => {
-              setAttributes({
-                buttonPosition: "button-outside"
-              });
-            },
-            isShownByDefault: true,
-            children: /* @__PURE__ */ jsx(
-              SelectControl,
-              {
-                value: buttonPosition,
-                __next40pxDefaultSize: true,
-                label: __("Button position"),
-                onChange: (value) => {
-                  setAttributes({
-                    buttonPosition: value
-                  });
-                },
-                options: buttonPositionControls
-              }
-            )
-          }
-        ),
-        buttonPosition !== "no-button" && /* @__PURE__ */ jsx(
-          ToolsPanelItem,
-          {
-            hasValue: () => !!buttonUseIcon,
-            label: __("Use button with icon"),
-            onDeselect: () => {
-              setAttributes({
-                buttonUseIcon: false
-              });
-            },
-            isShownByDefault: true,
-            children: /* @__PURE__ */ jsx(
-              ToggleControl,
-              {
-                checked: buttonUseIcon,
-                label: __("Use button with icon"),
-                onChange: (value) => setAttributes({
-                  buttonUseIcon: value
-                })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolsPanelItem,
-          {
-            hasValue: () => !!width,
-            label: __("Width"),
-            onDeselect: () => {
-              setAttributes({
-                width: void 0,
-                widthUnit: void 0
-              });
-            },
-            isShownByDefault: true,
-            children: /* @__PURE__ */ jsxs(VStack, { children: [
-              /* @__PURE__ */ jsx(
-                UnitControl,
+  const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
+      ToolsPanel,
+      {
+        label: __("Settings"),
+        resetAll: () => {
+          setAttributes({
+            width: void 0,
+            widthUnit: void 0,
+            showLabel: true,
+            buttonUseIcon: false,
+            buttonPosition: "button-outside"
+          });
+        },
+        dropdownMenuProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              hasValue: () => !showLabel,
+              label: __("Show label"),
+              onDeselect: () => {
+                setAttributes({
+                  showLabel: true
+                });
+              },
+              isShownByDefault: true,
+              children: /* @__PURE__ */ jsx(
+                ToggleControl,
                 {
+                  checked: showLabel,
+                  label: __("Show label"),
+                  onChange: (value) => setAttributes({
+                    showLabel: value
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              hasValue: () => buttonPosition !== "button-outside",
+              label: __("Button position"),
+              onDeselect: () => {
+                setAttributes({
+                  buttonPosition: "button-outside"
+                });
+              },
+              isShownByDefault: true,
+              children: /* @__PURE__ */ jsx(
+                SelectControl,
+                {
+                  value: buttonPosition,
                   __next40pxDefaultSize: true,
-                  label: __("Width"),
-                  id: unitControlInputId,
-                  min: isPercentageUnit(widthUnit) ? 0 : MIN_WIDTH,
-                  max: isPercentageUnit(widthUnit) ? 100 : void 0,
-                  step: 1,
-                  onChange: (newWidth) => {
-                    const parsedNewWidth = newWidth === "" ? void 0 : parseInt(newWidth, 10);
-                    setAttributes({
-                      width: parsedNewWidth
-                    });
-                  },
-                  onUnitChange: (newUnit) => {
+                  label: __("Button position"),
+                  onChange: (value) => {
                     setAttributes({
-                      width: "%" === newUnit ? PC_WIDTH_DEFAULT : PX_WIDTH_DEFAULT,
-                      widthUnit: newUnit
+                      buttonPosition: value
                     });
                   },
-                  __unstableInputWidth: "80px",
-                  value: `${width}${widthUnit}`,
-                  units
+                  options: buttonPositionControls
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                ToggleGroupControl,
+              )
+            }
+          ),
+          buttonPosition !== "no-button" && /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              hasValue: () => !!buttonUseIcon,
+              label: __("Use button with icon"),
+              onDeselect: () => {
+                setAttributes({
+                  buttonUseIcon: false
+                });
+              },
+              isShownByDefault: true,
+              children: /* @__PURE__ */ jsx(
+                ToggleControl,
                 {
-                  label: __("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__ */ jsx(
-                      ToggleGroupControlOption,
-                      {
-                        value: widthValue,
-                        label: sprintf(
-                          /* translators: %d: Percentage value. */
-                          __("%d%%"),
-                          widthValue
-                        )
-                      },
-                      widthValue
-                    );
+                  checked: buttonUseIcon,
+                  label: __("Use button with icon"),
+                  onChange: (value) => setAttributes({
+                    buttonUseIcon: value
                   })
                 }
               )
-            ] })
-          }
-        )
-      ]
-    }
-  ) }) });
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              hasValue: () => !!width,
+              label: __("Width"),
+              onDeselect: () => {
+                setAttributes({
+                  width: void 0,
+                  widthUnit: void 0
+                });
+              },
+              isShownByDefault: true,
+              children: /* @__PURE__ */ jsxs(VStack, { children: [
+                /* @__PURE__ */ jsx(
+                  UnitControl,
+                  {
+                    __next40pxDefaultSize: true,
+                    label: __("Width"),
+                    id: unitControlInputId,
+                    min: isPercentageUnit(widthUnit) ? 0 : MIN_WIDTH,
+                    max: 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 ? PC_WIDTH_DEFAULT : PX_WIDTH_DEFAULT,
+                        widthUnit: newUnit
+                      });
+                    },
+                    __unstableInputWidth: "80px",
+                    value: `${width}${widthUnit}`,
+                    units
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ToggleGroupControl,
+                  {
+                    label: __("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__ */ jsx(
+                        ToggleGroupControlOption,
+                        {
+                          value: widthValue,
+                          label: sprintf(
+                            /* translators: %d: Percentage value. */
+                            __("%d%%"),
+                            widthValue
+                          )
+                        },
+                        widthValue
+                      );
+                    })
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
+      SelectControl,
+      {
+        __next40pxDefaultSize: true,
+        label: __("HTML element"),
+        value: tagName ?? "",
+        options: [
+          { label: __("Default"), value: "" },
+          { label: "<search>", value: "search" },
+          { label: "<form>", value: "form" }
+        ],
+        onChange: (value) => {
+          setAttributes({ tagName: value });
+          speak(
+            TAG_NAME_MESSAGES[value].replace(/[<>]/g, "")
+          );
+        },
+        help: TAG_NAME_MESSAGES[tagName ?? ""]
+      }
+    ) })
+  ] });
   const isNonZeroBorderRadius = (radius) => radius !== void 0 && parseInt(radius, 10) !== 0;
   const padBorderRadius = (radius) => isNonZeroBorderRadius(radius) ? `calc(${radius} + ${DEFAULT_INNER_PADDING})` : void 0;
   const getWrapperStyles = () => {
@@ -448,58 +483,61 @@ function SearchEdit({
     "wp-block-search__label",
     typographyProps.className
   );
-  return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
+  const Wrapper = "search" === tagName ? "search" : "div";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     controls,
-    showLabel && /* @__PURE__ */ jsx(
-      RichText,
-      {
-        identifier: "label",
-        className: labelClassnames,
-        "aria-label": __("Label text"),
-        placeholder: __("Add label\u2026"),
-        withoutInteractiveFormatting: true,
-        value: label,
-        onChange: (html) => setAttributes({ label: html }),
-        style: typographyProps.style
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      ResizableBox,
-      {
-        size: {
-          width: width === void 0 ? "auto" : `${width}${widthUnit}`,
-          height: "auto"
-        },
-        className: clsx(
-          "wp-block-search__inside-wrapper",
-          isButtonPositionInside ? borderProps.className : void 0
-        ),
-        style: getWrapperStyles(),
-        minWidth: 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__ */ jsxs(Fragment, { children: [
-            renderTextField(),
-            renderButton()
-          ] }),
-          hasNoButton && renderTextField()
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs(Wrapper, { ...blockProps, children: [
+      showLabel && /* @__PURE__ */ jsx(
+        RichText,
+        {
+          identifier: "label",
+          className: labelClassnames,
+          "aria-label": __("Label text"),
+          placeholder: __("Add label…"),
+          withoutInteractiveFormatting: true,
+          value: label,
+          onChange: (html) => setAttributes({ label: html }),
+          style: typographyProps.style
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        ResizableBox,
+        {
+          size: {
+            width: width === void 0 ? "auto" : `${width}${widthUnit}`,
+            height: "auto"
+          },
+          className: clsx(
+            "wp-block-search__inside-wrapper",
+            isButtonPositionInside ? borderProps.className : void 0
+          ),
+          style: getWrapperStyles(),
+          minWidth: 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__ */ jsxs(Fragment, { children: [
+              renderTextField(),
+              renderButton()
+            ] }),
+            hasNoButton && renderTextField()
+          ]
+        }
+      )
+    ] })
   ] });
 }
 export {