@wordpress/block-editor
Version:
64 lines (60 loc) • 2.04 kB
JavaScript
;
var _compose = require("@wordpress/compose");
var _hooks = require("@wordpress/hooks");
var _data = require("@wordpress/data");
var _grid = require("../components/grid");
var _store = require("../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function GridLayoutSync(props) {
(0, _grid.useGridLayoutSync)(props);
}
function GridTools({
clientId,
layout
}) {
const isVisible = (0, _data.useSelect)(select => {
const {
isBlockSelected,
isDraggingBlocks,
getTemplateLock,
getBlockEditingMode
} = select(_store.store);
// These calls are purposely ordered from least expensive to most expensive.
// Hides the visualizer in cases where the user is not or cannot interact with it.
if (!isDraggingBlocks() && !isBlockSelected(clientId) || getTemplateLock(clientId) || getBlockEditingMode(clientId) !== 'default') {
return false;
}
return true;
}, [clientId]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridLayoutSync, {
clientId: clientId
}), isVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_grid.GridVisualizer, {
clientId: clientId,
parentLayout: layout
})]
});
}
const addGridVisualizerToBlockEdit = (0, _compose.createHigherOrderComponent)(BlockEdit => props => {
if (props.attributes.layout?.type !== 'grid') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockEdit, {
...props
}, "edit");
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridTools, {
clientId: props.clientId,
layout: props.attributes.layout
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockEdit, {
...props
}, "edit")]
});
}, 'addGridVisualizerToBlockEdit');
(0, _hooks.addFilter)('editor.BlockEdit', 'core/editor/grid-visualizer', addGridVisualizerToBlockEdit);
//# sourceMappingURL=grid-visualizer.js.map