@wordpress/block-library 9.48.0 → 10.0.0

package/build/search/edit.cjs

@@ -42,9 +42,21 @@ 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_a11y = require("@wordpress/a11y");
 var import_utils = require("./utils.cjs");
 var import_hooks = require("../utils/hooks.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+var TAG_NAME_MESSAGES = {
+  "": (0, import_i18n.__)(
+    "Lets the theme decide. Uses the <search> landmark element if the theme opts in, otherwise a <form>."
+  ),
+  search: (0, import_i18n.__)(
+    "Wraps the block in a <search> landmark, announced as a search region by assistive technologies."
+  ),
+  form: (0, import_i18n.__)(
+    '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({
@@ -65,6 +77,7 @@ function SearchEdit({
     buttonText,
     buttonPosition,
     buttonUseIcon,
+    tagName,
     style
   } = attributes;
   const wasJustInsertedIntoNavigationBlock = (0, import_data.useSelect)(
@@ -191,7 +204,7 @@ function SearchEdit({
         className: textFieldClasses,
         style: textFieldStyles,
         "aria-label": (0, import_i18n.__)("Optional placeholder text"),
-        placeholder: placeholder ? void 0 : (0, import_i18n.__)("Optional placeholder\u2026"),
+        placeholder: placeholder ? void 0 : (0, import_i18n.__)("Optional placeholder…"),
         value: placeholder,
         onChange: (event) => setAttributes({ placeholder: event.target.value }),
         ref: searchFieldRef
@@ -237,7 +250,7 @@ function SearchEdit({
           className: buttonClasses,
           style: buttonStyles,
           "aria-label": (0, import_i18n.__)("Button text"),
-          placeholder: (0, import_i18n.__)("Add button text\u2026"),
+          placeholder: (0, import_i18n.__)("Add button text…"),
           withoutInteractiveFormatting: true,
           value: buttonText,
           onChange: (html) => setAttributes({ buttonText: html })
@@ -246,169 +259,191 @@ function SearchEdit({
     ] });
   };
   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"
-        });
-      },
-      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"
-              });
-            },
-            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
-                  });
-                },
-                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,
+  const controls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(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"
+          });
+        },
+        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"
+                });
+              },
+              isShownByDefault: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.SelectControl,
+                {
+                  value: buttonPosition,
                   __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) => {
+                  label: (0, import_i18n.__)("Button position"),
+                  onChange: (value) => {
                     setAttributes({
-                      width: "%" === newUnit ? import_utils.PC_WIDTH_DEFAULT : import_utils.PX_WIDTH_DEFAULT,
-                      widthUnit: newUnit
+                      buttonPosition: value
                     });
                   },
-                  __unstableInputWidth: "80px",
-                  value: `${width}${widthUnit}`,
-                  units
+                  options: buttonPositionControls
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.__experimentalToggleGroupControl,
+              )
+            }
+          ),
+          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,
                 {
-                  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
-                    );
+                  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
+                      );
+                    })
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "advanced", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.SelectControl,
+      {
+        __next40pxDefaultSize: true,
+        label: (0, import_i18n.__)("HTML element"),
+        value: tagName ?? "",
+        options: [
+          { label: (0, import_i18n.__)("Default"), value: "" },
+          { label: "<search>", value: "search" },
+          { label: "<form>", value: "form" }
+        ],
+        onChange: (value) => {
+          setAttributes({ tagName: value });
+          (0, import_a11y.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 = () => {
@@ -456,58 +491,61 @@ function SearchEdit({
     "wp-block-search__label",
     typographyProps.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...blockProps, children: [
+  const Wrapper = "search" === tagName ? "search" : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { 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()
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { ...blockProps, children: [
+      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…"),
+          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