@wordpress/block-editor
Version:
86 lines (83 loc) • 2.55 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BlockQuickNavigation;
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _store = require("../../store");
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
var _useBlockDisplayTitle = _interopRequireDefault(require("../block-title/use-block-display-title"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockQuickNavigation({
clientIds,
onSelect
}) {
if (!clientIds.length) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
spacing: 1,
children: clientIds.map(clientId => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockQuickNavigationItem, {
onSelect: onSelect,
clientId: clientId
}, clientId))
});
}
function BlockQuickNavigationItem({
clientId,
onSelect
}) {
const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
const blockTitle = (0, _useBlockDisplayTitle.default)({
clientId,
context: 'list-view'
});
const {
isSelected
} = (0, _data.useSelect)(select => {
const {
isBlockSelected,
hasSelectedInnerBlock
} = select(_store.store);
return {
isSelected: isBlockSelected(clientId) || hasSelectedInnerBlock(clientId, /* deep: */true)
};
}, [clientId]);
const {
selectBlock
} = (0, _data.useDispatch)(_store.store);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
isPressed: isSelected,
onClick: async () => {
await selectBlock(clientId);
if (onSelect) {
onSelect(clientId);
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
icon: blockInformation?.icon
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
style: {
textAlign: 'left'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
children: blockTitle
})
})]
})
});
}
//# sourceMappingURL=index.js.map