@wordpress/block-editor
Version:
118 lines (115 loc) • 4.76 kB
JavaScript
/**
* WordPress dependencies
*/
import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
import { _n, sprintf } from '@wordpress/i18n';
import { useDebounce } from '@wordpress/compose';
import { __experimentalHeading as Heading } from '@wordpress/components';
import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
*/
import BlockPatternsList from '../../block-patterns-list';
import useInsertionPoint from '../hooks/use-insertion-point';
import usePatternsState from '../hooks/use-patterns-state';
import InserterListbox from '../../inserter-listbox';
import { searchItems } from '../search-items';
import BlockPatternsPaging from '../../block-patterns-paging';
import usePatternsPaging from '../hooks/use-patterns-paging';
import { INSERTER_PATTERN_TYPES, allPatternsCategory, myPatternsCategory, starterPatternsCategory } from '../block-patterns-tab/utils';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function PatternsListHeader({
filterValue,
filteredBlockPatternsLength
}) {
if (!filterValue) {
return null;
}
return /*#__PURE__*/_jsx(Heading, {
level: 2,
lineHeight: "48px",
className: "block-editor-block-patterns-explorer__search-results-count",
children: sprintf(/* translators: %d: number of patterns. */
_n('%d pattern found', '%d patterns found', filteredBlockPatternsLength), filteredBlockPatternsLength)
});
}
function PatternList({
searchValue,
selectedCategory,
patternCategories,
rootClientId,
onModalClose
}) {
const container = useRef();
const debouncedSpeak = useDebounce(speak, 500);
const [destinationRootClientId, onInsertBlocks] = useInsertionPoint({
rootClientId,
shouldFocusBlock: true
});
const [patterns,, onClickPattern] = usePatternsState(onInsertBlocks, destinationRootClientId, selectedCategory);
const registeredPatternCategories = useMemo(() => patternCategories.map(patternCategory => patternCategory.name), [patternCategories]);
const filteredBlockPatterns = useMemo(() => {
const filteredPatterns = patterns.filter(pattern => {
if (selectedCategory === allPatternsCategory.name) {
return true;
}
if (selectedCategory === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user) {
return true;
}
if (selectedCategory === starterPatternsCategory.name && pattern.blockTypes?.includes('core/post-content')) {
return true;
}
if (selectedCategory === 'uncategorized') {
var _pattern$categories$s;
const hasKnownCategory = (_pattern$categories$s = pattern.categories?.some(category => registeredPatternCategories.includes(category))) !== null && _pattern$categories$s !== void 0 ? _pattern$categories$s : false;
return !pattern.categories?.length || !hasKnownCategory;
}
return pattern.categories?.includes(selectedCategory);
});
if (!searchValue) {
return filteredPatterns;
}
return searchItems(filteredPatterns, searchValue);
}, [searchValue, patterns, selectedCategory, registeredPatternCategories]);
// Announce search results on change.
useEffect(() => {
if (!searchValue) {
return;
}
const count = filteredBlockPatterns.length;
const resultsFoundMessage = sprintf(/* translators: %d: number of results. */
_n('%d result found.', '%d results found.', count), count);
debouncedSpeak(resultsFoundMessage);
}, [searchValue, debouncedSpeak, filteredBlockPatterns.length]);
const pagingProps = usePatternsPaging(filteredBlockPatterns, selectedCategory, container);
// Reset page when search value changes.
const [previousSearchValue, setPreviousSearchValue] = useState(searchValue);
if (searchValue !== previousSearchValue) {
setPreviousSearchValue(searchValue);
pagingProps.changePage(1);
}
const hasItems = !!filteredBlockPatterns?.length;
return /*#__PURE__*/_jsxs("div", {
className: "block-editor-block-patterns-explorer__list",
ref: container,
children: [/*#__PURE__*/_jsx(PatternsListHeader, {
filterValue: searchValue,
filteredBlockPatternsLength: filteredBlockPatterns.length
}), /*#__PURE__*/_jsx(InserterListbox, {
children: hasItems && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(BlockPatternsList, {
blockPatterns: pagingProps.categoryPatterns,
onClickPattern: (pattern, blocks) => {
onClickPattern(pattern, blocks);
onModalClose();
},
isDraggable: false
}), /*#__PURE__*/_jsx(BlockPatternsPaging, {
...pagingProps
})]
})
})]
});
}
export default PatternList;
//# sourceMappingURL=pattern-list.js.map