@wordpress/block-editor
Version:
114 lines (110 loc) • 3.95 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _colord = require("colord");
var _names = _interopRequireDefault(require("colord/plugins/names"));
var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _transformStyles = _interopRequireDefault(require("../../utils/transform-styles"));
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
(0, _colord.extend)([_names.default, _a11y.default]);
function useDarkThemeBodyClassName(styles, scope) {
return (0, _element.useCallback)(node => {
if (!node) {
return;
}
const {
ownerDocument
} = node;
const {
defaultView,
body
} = ownerDocument;
const canvas = scope ? ownerDocument.querySelector(scope) : body;
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, scope]);
}
function EditorStyles({
styles,
scope,
transformOptions
}) {
const overrides = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getStyleOverrides(), []);
const [transformedStyles, transformedSvgs] = (0, _element.useMemo)(() => {
const _styles = Object.values(styles !== null && styles !== void 0 ? styles : []);
for (const [id, override] of overrides) {
const index = _styles.findIndex(({
id: _id
}) => id === _id);
const overrideWithId = {
...override,
id
};
if (index === -1) {
_styles.push(overrideWithId);
} else {
_styles[index] = overrideWithId;
}
}
return [(0, _transformStyles.default)(_styles.filter(style => style?.css), scope, transformOptions), _styles.filter(style => style.__unstableType === 'svgs').map(style => style.assets).join('')];
}, [styles, overrides, scope, transformOptions]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
ref: useDarkThemeBodyClassName(transformedStyles, scope)
}), transformedStyles.map((css, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
children: css
}, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_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
}
})]
});
}
var _default = exports.default = (0, _element.memo)(EditorStyles);
//# sourceMappingURL=index.js.map