@wordpress/block-editor
Version:
116 lines (113 loc) • 3.89 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MarginVisualizer = MarginVisualizer;
exports.PaddingVisualizer = PaddingVisualizer;
var _element = require("@wordpress/element");
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _cover = _interopRequireDefault(require("../components/block-popover/cover"));
var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function SpacingVisualizer({
clientId,
value,
computeStyle,
forceShow
}) {
const blockElement = (0, _useBlockRefs.useBlockElement)(clientId);
const [style, updateStyle] = (0, _element.useReducer)(() => computeStyle(blockElement));
(0, _element.useLayoutEffect)(() => {
if (!blockElement) {
return;
}
// It's not sufficient to read the computed spacing value when value.spacing changes as
// useEffect may run before the browser recomputes CSS. We therefore combine
// useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
// paint but before the next paint.
// See https://github.com/WordPress/gutenberg/pull/59227.
window.requestAnimationFrame(() => window.requestAnimationFrame(updateStyle));
}, [blockElement, value]);
const previousValueRef = (0, _element.useRef)(value);
const [isActive, setIsActive] = (0, _element.useState)(false);
(0, _element.useEffect)(() => {
if ((0, _isShallowEqual.default)(value, previousValueRef.current) || forceShow) {
return;
}
setIsActive(true);
previousValueRef.current = value;
const timeout = setTimeout(() => {
setIsActive(false);
}, 400);
return () => {
setIsActive(false);
clearTimeout(timeout);
};
}, [value, forceShow]);
if (!isActive && !forceShow) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cover.default, {
clientId: clientId,
__unstablePopoverSlot: "block-toolbar",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor__spacing-visualizer",
style: style
})
});
}
function getComputedCSS(element, property) {
return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
}
function MarginVisualizer({
clientId,
value,
forceShow
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpacingVisualizer, {
clientId: clientId,
value: value?.spacing?.margin,
computeStyle: blockElement => {
const top = getComputedCSS(blockElement, 'margin-top');
const right = getComputedCSS(blockElement, 'margin-right');
const bottom = getComputedCSS(blockElement, 'margin-bottom');
const left = getComputedCSS(blockElement, 'margin-left');
return {
borderTopWidth: top,
borderRightWidth: right,
borderBottomWidth: bottom,
borderLeftWidth: left,
top: top ? `-${top}` : 0,
right: right ? `-${right}` : 0,
bottom: bottom ? `-${bottom}` : 0,
left: left ? `-${left}` : 0
};
},
forceShow: forceShow
});
}
function PaddingVisualizer({
clientId,
value,
forceShow
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpacingVisualizer, {
clientId: clientId,
value: value?.spacing?.padding,
computeStyle: blockElement => ({
borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
}),
forceShow: forceShow
});
}
//# sourceMappingURL=spacing-visualizer.js.map