@wordpress/block-editor/build/components/editor-styles/index.js

Generic block editor.

"use strict";

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

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

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

var _colord = require("colord");

var _names = _interopRequireDefault(require("colord/plugins/names"));

var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));

var _components = require("@wordpress/components");

var _transformStyles = _interopRequireDefault(require("../../utils/transform-styles"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
(0, _colord.extend)([_names.default, _a11y.default]);

function useDarkThemeBodyClassName(styles) {
  return (0, _element.useCallback)(node => {
    if (!node) {
      return;
    }

    const {
      ownerDocument
    } = node;
    const {
      defaultView,
      body
    } = ownerDocument;
    const canvas = ownerDocument.querySelector(EDITOR_STYLES_SELECTOR);
    let backgroundColor;

    if (!canvas) {
      // The real .editor-styles-wrapper element might not exist in the
      // DOM, so calculate the background color by creating a fake
      // wrapper.
      const tempCanvas = ownerDocument.createElement('div');
      tempCanvas.classList.add('editor-styles-wrapper');
      body.appendChild(tempCanvas);
      backgroundColor = defaultView.getComputedStyle(tempCanvas, null).getPropertyValue('background-color');
      body.removeChild(tempCanvas);
    } else {
      backgroundColor = defaultView.getComputedStyle(canvas, null).getPropertyValue('background-color');
    }

    const colordBackgroundColor = (0, _colord.colord)(backgroundColor); // If background is transparent, it should be treated as light color.

    if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
      body.classList.remove('is-dark-theme');
    } else {
      body.classList.add('is-dark-theme');
    }
  }, [styles]);
}

function EditorStyles({
  styles
}) {
  const stylesArray = (0, _element.useMemo)(() => Object.values(styles !== null && styles !== void 0 ? styles : []), [styles]);
  const transformedStyles = (0, _element.useMemo)(() => (0, _transformStyles.default)(stylesArray.filter(style => style?.css), EDITOR_STYLES_SELECTOR), [stylesArray]);
  const transformedSvgs = (0, _element.useMemo)(() => stylesArray.filter(style => style.__unstableType === 'svgs').map(style => style.assets).join(''), [stylesArray]);
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("style", {
    ref: useDarkThemeBodyClassName(stylesArray)
  }), transformedStyles.map((css, index) => (0, _element.createElement)("style", {
    key: index
  }, css)), (0, _element.createElement)(_components.SVG, {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 0 0",
    width: "0",
    height: "0",
    role: "none",
    style: {
      visibility: 'hidden',
      position: 'absolute',
      left: '-9999px',
      overflow: 'hidden'
    },
    dangerouslySetInnerHTML: {
      __html: transformedSvgs
    }
  }));
}
//# sourceMappingURL=index.js.map