@wordpress/block-editor
Version:
61 lines (59 loc) • 1.96 kB
JavaScript
/**
* WordPress dependencies
*/
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { GridVisualizer, useGridLayoutSync } from '../components/grid';
import { store as blockEditorStore } from '../store';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function GridLayoutSync(props) {
useGridLayoutSync(props);
}
function GridTools({
clientId,
layout
}) {
const isVisible = useSelect(select => {
const {
isBlockSelected,
isDraggingBlocks,
getTemplateLock,
getBlockEditingMode
} = select(blockEditorStore);
// 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__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(GridLayoutSync, {
clientId: clientId
}), isVisible && /*#__PURE__*/_jsx(GridVisualizer, {
clientId: clientId,
parentLayout: layout
})]
});
}
const addGridVisualizerToBlockEdit = createHigherOrderComponent(BlockEdit => props => {
if (props.attributes.layout?.type !== 'grid') {
return /*#__PURE__*/_jsx(BlockEdit, {
...props
}, "edit");
}
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(GridTools, {
clientId: props.clientId,
layout: props.attributes.layout
}), /*#__PURE__*/_jsx(BlockEdit, {
...props
}, "edit")]
});
}, 'addGridVisualizerToBlockEdit');
addFilter('editor.BlockEdit', 'core/editor/grid-visualizer', addGridVisualizerToBlockEdit);
//# sourceMappingURL=grid-visualizer.js.map