@wordpress/block-editor/build-module/hooks/padding.js

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useState, useRef, useEffect } from '@wordpress/element';
import isShallowEqual from '@wordpress/is-shallow-equal';
/**
 * Internal dependencies
 */

import BlockPopover from '../components/block-popover';
import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';

function getComputedCSS(element, property) {
  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
}

export function PaddingVisualizer({
  clientId,
  attributes,
  forceShow
}) {
  const blockElement = useBlockElement(clientId);
  const [style, setStyle] = useState();
  const padding = attributes?.style?.spacing?.padding;
  useEffect(() => {
    if (!blockElement) {
      return;
    }

    setStyle({
      borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
      borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
      borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
      borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
    });
  }, [blockElement, padding]);
  const [isActive, setIsActive] = useState(false);
  const valueRef = useRef(padding);
  const timeoutRef = useRef();

  const clearTimer = () => {
    if (timeoutRef.current) {
      window.clearTimeout(timeoutRef.current);
    }
  };

  useEffect(() => {
    if (!isShallowEqual(padding, valueRef.current) && !forceShow) {
      setIsActive(true);
      valueRef.current = padding;
      timeoutRef.current = setTimeout(() => {
        setIsActive(false);
      }, 400);
    }

    return () => {
      setIsActive(false);
      clearTimer();
    };
  }, [padding, forceShow]);

  if (!isActive && !forceShow) {
    return null;
  }

  return createElement(BlockPopover, {
    clientId: clientId,
    __unstableCoverTarget: true,
    __unstableRefreshSize: padding,
    __unstablePopoverSlot: "block-toolbar",
    shift: false
  }, createElement("div", {
    className: "block-editor__padding-visualizer",
    style: style
  }));
}
//# sourceMappingURL=padding.js.map