@wordpress/block-library/build-module/post-featured-image/overlay.js

Block library for the WordPress editor.

/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { withColors, __experimentalUseGradient, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, __experimentalUseBorderProps as useBorderProps } from '@wordpress/block-editor';
import { compose } from '@wordpress/compose';

/**
 * Internal dependencies
 */
import { dimRatioToClass } from './utils';
import { jsx as _jsx } from "react/jsx-runtime";
const Overlay = ({
  attributes,
  overlayColor
}) => {
  const {
    dimRatio
  } = attributes;
  const {
    gradientClass,
    gradientValue
  } = __experimentalUseGradient();
  const colorGradientSettings = useMultipleOriginColorsAndGradients();
  const borderProps = useBorderProps(attributes);
  const overlayStyles = {
    backgroundColor: overlayColor.color,
    backgroundImage: gradientValue,
    ...borderProps.style
  };
  if (!colorGradientSettings.hasColorsOrGradients || !dimRatio) {
    return null;
  }
  return /*#__PURE__*/_jsx("span", {
    "aria-hidden": "true",
    className: clsx('wp-block-post-featured-image__overlay', dimRatioToClass(dimRatio), {
      [overlayColor.class]: overlayColor.class,
      'has-background-dim': dimRatio !== undefined,
      'has-background-gradient': gradientValue,
      [gradientClass]: gradientClass
    }, borderProps.className),
    style: overlayStyles
  });
};
export default compose([withColors({
  overlayColor: 'background-color'
})])(Overlay);
//# sourceMappingURL=overlay.js.map