@wordpress/block-editor/build/hooks/contrast-checker.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockColorContrastChecker;

var _element = require("@wordpress/element");

var _contrastChecker = _interopRequireDefault(require("../components/contrast-checker"));

var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function getComputedStyle(node) {
  return node.ownerDocument.defaultView.getComputedStyle(node);
}

function BlockColorContrastChecker({
  clientId
}) {
  const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
  const [detectedColor, setDetectedColor] = (0, _element.useState)();
  const [detectedLinkColor, setDetectedLinkColor] = (0, _element.useState)();
  const ref = (0, _useBlockRefs.__unstableUseBlockRef)(clientId); // There are so many things that can change the color of a block
  // So we perform this check on every render.
  // eslint-disable-next-line react-hooks/exhaustive-deps

  (0, _element.useEffect)(() => {
    if (!ref.current) {
      return;
    }

    setDetectedColor(getComputedStyle(ref.current).color);
    const firstLinkElement = ref.current?.querySelector('a');

    if (firstLinkElement && !!firstLinkElement.innerText) {
      setDetectedLinkColor(getComputedStyle(firstLinkElement).color);
    }

    let backgroundColorNode = ref.current;
    let backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;

    while (backgroundColor === 'rgba(0, 0, 0, 0)' && backgroundColorNode.parentNode && backgroundColorNode.parentNode.nodeType === backgroundColorNode.parentNode.ELEMENT_NODE) {
      backgroundColorNode = backgroundColorNode.parentNode;
      backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
    }

    setDetectedBackgroundColor(backgroundColor);
  });
  return (0, _element.createElement)(_contrastChecker.default, {
    backgroundColor: detectedBackgroundColor,
    textColor: detectedColor,
    enableAlphaChecker: true,
    linkColor: detectedLinkColor
  });
}
//# sourceMappingURL=contrast-checker.js.map