@wordpress/block-library/build-module/separator/edit.js

Block library for the WordPress editor.

// packages/block-library/src/separator/edit.js
import clsx from "clsx";
import {
  getColorClassName,
  InspectorControls,
  useBlockProps,
  __experimentalUseColorProps as useColorProps
} from "@wordpress/block-editor";
import { HorizontalRule, SelectControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import useDeprecatedOpacity from "./use-deprecated-opacity";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var HtmlElementControl = ({ tagName, setAttributes }) => {
  return /* @__PURE__ */ jsx(
    SelectControl,
    {
      label: __("HTML element"),
      value: tagName,
      onChange: (newValue) => setAttributes({ tagName: newValue }),
      options: [
        { label: __("Default (<hr>)"), value: "hr" },
        { label: "<div>", value: "div" }
      ],
      help: tagName === "hr" ? __(
        "Only select <hr> if the separator conveys important information and should be announced by screen readers."
      ) : __(
        "The <div> element should only be used if the block is a design element with no semantic meaning."
      ),
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true
    }
  );
};
function SeparatorEdit({ attributes, setAttributes }) {
  const { backgroundColor, opacity, style, tagName } = attributes;
  const colorProps = useColorProps(attributes);
  const currentColor = colorProps?.style?.backgroundColor;
  const hasCustomColor = !!style?.color?.background;
  useDeprecatedOpacity(opacity, currentColor, setAttributes);
  const colorClass = getColorClassName("color", backgroundColor);
  const className = clsx(
    {
      "has-text-color": backgroundColor || currentColor,
      [colorClass]: colorClass,
      "has-css-opacity": opacity === "css",
      "has-alpha-channel-opacity": opacity === "alpha-channel"
    },
    colorProps.className
  );
  const styles = {
    color: currentColor,
    backgroundColor: currentColor
  };
  const Wrapper = tagName === "hr" ? HorizontalRule : tagName;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
      HtmlElementControl,
      {
        tagName,
        setAttributes
      }
    ) }),
    /* @__PURE__ */ jsx(
      Wrapper,
      {
        ...useBlockProps({
          className,
          style: hasCustomColor ? styles : void 0
        })
      }
    )
  ] });
}
export {
  SeparatorEdit as default
};
//# sourceMappingURL=edit.js.map