@wordpress/block-editor
Version:
108 lines (104 loc) • 4.26 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BlockManager;
var _blocks = require("@wordpress/blocks");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _a11y = require("@wordpress/a11y");
var _category = _interopRequireDefault(require("./category"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Provides a list of blocks with checkboxes.
*
* @param {Object} props Props.
* @param {Array} props.blockTypes An array of blocks.
* @param {Array} props.selectedBlockTypes An array of selected blocks.
* @param {Function} props.onChange Function to be called when the selected blocks change.
*/function BlockManager({
blockTypes,
selectedBlockTypes,
onChange
}) {
const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
const [search, setSearch] = (0, _element.useState)('');
const {
categories,
isMatchingSearchTerm
} = (0, _data.useSelect)(select => {
return {
categories: select(_blocks.store).getCategories(),
isMatchingSearchTerm: select(_blocks.store).isMatchingSearchTerm
};
}, []);
function enableAllBlockTypes() {
onChange(blockTypes);
}
const filteredBlockTypes = blockTypes.filter(blockType => {
return !search || isMatchingSearchTerm(blockType, search);
});
const numberOfHiddenBlocks = blockTypes.length - selectedBlockTypes.length;
// Announce search results on change
(0, _element.useEffect)(() => {
if (!search) {
return;
}
const count = filteredBlockTypes.length;
const resultsFoundMessage = (0, _i18n.sprintf)(/* translators: %d: number of results. */
(0, _i18n._n)('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
}, [filteredBlockTypes?.length, search, debouncedSpeak]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-manager__content",
children: [!!numberOfHiddenBlocks && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-manager__disabled-blocks-count",
children: [(0, _i18n.sprintf)(/* translators: %d: number of blocks. */
(0, _i18n._n)('%d block is hidden.', '%d blocks are hidden.', numberOfHiddenBlocks), numberOfHiddenBlocks), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "link",
onClick: enableAllBlockTypes,
children: (0, _i18n.__)('Reset')
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Search for a block'),
placeholder: (0, _i18n.__)('Search for a block'),
value: search,
onChange: nextSearch => setSearch(nextSearch),
className: "block-editor-block-manager__search"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
tabIndex: "0",
role: "region",
"aria-label": (0, _i18n.__)('Available block types'),
className: "block-editor-block-manager__results",
children: [filteredBlockTypes.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: "block-editor-block-manager__no-results",
children: (0, _i18n.__)('No blocks found.')
}), categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(_category.default, {
title: category.title,
blockTypes: filteredBlockTypes.filter(blockType => blockType.category === category.slug),
selectedBlockTypes: selectedBlockTypes,
onChange: onChange
}, category.slug)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_category.default, {
title: (0, _i18n.__)('Uncategorized'),
blockTypes: filteredBlockTypes.filter(({
category
}) => !category),
selectedBlockTypes: selectedBlockTypes,
onChange: onChange
})]
})]
});
}
//# sourceMappingURL=index.js.map