@wordpress/block-editor/build-module/components/block-popover/cover.js

Generic block editor.

// packages/block-editor/src/components/block-popover/cover.js
import { useEffect, useState, useMemo, forwardRef } from "@wordpress/element";
import { useBlockElement } from "../block-list/use-block-props/use-block-refs";
import { PrivateBlockPopover } from ".";
import { jsx } from "react/jsx-runtime";
function BlockPopoverCover({
  clientId,
  bottomClientId,
  children,
  shift = false,
  additionalStyles,
  ...props
}, ref) {
  bottomClientId ??= clientId;
  const selectedElement = useBlockElement(clientId);
  return /* @__PURE__ */ jsx(
    PrivateBlockPopover,
    {
      ref,
      clientId,
      bottomClientId,
      shift,
      ...props,
      children: selectedElement && clientId === bottomClientId ? /* @__PURE__ */ jsx(
        CoverContainer,
        {
          selectedElement,
          additionalStyles,
          children
        }
      ) : children
    }
  );
}
function CoverContainer({
  selectedElement,
  additionalStyles = {},
  children
}) {
  const [width, setWidth] = useState(selectedElement.offsetWidth);
  const [height, setHeight] = useState(selectedElement.offsetHeight);
  useEffect(() => {
    const observer = new window.ResizeObserver(() => {
      setWidth(selectedElement.offsetWidth);
      setHeight(selectedElement.offsetHeight);
    });
    observer.observe(selectedElement, { box: "border-box" });
    return () => observer.disconnect();
  }, [selectedElement]);
  const style = useMemo(() => {
    return {
      position: "absolute",
      width,
      height,
      ...additionalStyles
    };
  }, [width, height, additionalStyles]);
  return /* @__PURE__ */ jsx("div", { style, children });
}
var cover_default = forwardRef(BlockPopoverCover);
export {
  cover_default as default
};
//# sourceMappingURL=cover.js.map