@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
75 lines (71 loc) • 2.31 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = CollapsibleBlockToolbar;
var _clsx = _interopRequireDefault(require("clsx"));
var _blockEditor = require("@wordpress/block-editor");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
useHasBlockToolbar
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function CollapsibleBlockToolbar({
isCollapsed,
onToggle
}) {
const {
blockSelectionStart
} = (0, _data.useSelect)(select => {
return {
blockSelectionStart: select(_blockEditor.store).getBlockSelectionStart()
};
}, []);
const hasBlockToolbar = useHasBlockToolbar();
const hasBlockSelection = !!blockSelectionStart;
(0, _element.useEffect)(() => {
// If we have a new block selection, show the block tools
if (blockSelectionStart) {
onToggle(false);
}
}, [blockSelectionStart, onToggle]);
if (!hasBlockToolbar) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _clsx.default)('editor-collapsible-block-toolbar', {
'is-collapsed': isCollapsed || !hasBlockSelection
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockToolbar, {
hideDragHandle: true
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover.Slot, {
name: "block-toolbar"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
className: "editor-collapsible-block-toolbar__toggle",
icon: isCollapsed ? _icons.next : _icons.previous,
onClick: () => {
onToggle(!isCollapsed);
},
label: isCollapsed ? (0, _i18n.__)('Show block tools') : (0, _i18n.__)('Hide block tools'),
size: "compact"
})]
});
}
//# sourceMappingURL=index.js.map