@wordpress/block-library
Version:
Block library for the WordPress editor.
89 lines (88 loc) • 3.1 kB
JavaScript
/**
* WordPress dependencies
*/
import { useState, useMemo } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { Modal, SearchControl } from '@wordpress/components';
import { BlockContextProvider, store as blockEditorStore, __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useBlockNameForPatterns, getTransformedBlocksFromPattern, usePatterns } from '../utils';
import { searchPatterns } from '../../utils/search-patterns';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function PatternSelectionModal({
clientId,
attributes,
setIsPatternSelectionModalOpen
}) {
return /*#__PURE__*/_jsx(Modal, {
overlayClassName: "block-library-query-pattern__selection-modal",
title: __('Choose a pattern'),
onRequestClose: () => setIsPatternSelectionModalOpen(false),
isFullScreen: true,
children: /*#__PURE__*/_jsx(PatternSelection, {
clientId: clientId,
attributes: attributes
})
});
}
export function useBlockPatterns(clientId, attributes) {
const blockNameForPatterns = useBlockNameForPatterns(clientId, attributes);
return usePatterns(clientId, blockNameForPatterns);
}
export default function PatternSelection({
clientId,
attributes,
showTitlesAsTooltip = false,
showSearch = true
}) {
const [searchValue, setSearchValue] = useState('');
const {
replaceBlock,
selectBlock
} = useDispatch(blockEditorStore);
const blockPatterns = useBlockPatterns(clientId, attributes);
/*
* When we preview Query Loop blocks we should prefer the current
* block's postType, which is passed through block context.
*/
const blockPreviewContext = useMemo(() => ({
previewPostType: attributes.query.postType
}), [attributes.query.postType]);
const filteredBlockPatterns = useMemo(() => {
return searchPatterns(blockPatterns, searchValue);
}, [blockPatterns, searchValue]);
const onBlockPatternSelect = (pattern, blocks) => {
const {
newBlocks,
queryClientIds
} = getTransformedBlocksFromPattern(blocks, attributes);
replaceBlock(clientId, newBlocks);
if (queryClientIds[0]) {
selectBlock(queryClientIds[0]);
}
};
return /*#__PURE__*/_jsxs("div", {
className: "block-library-query-pattern__selection-content",
children: [showSearch && /*#__PURE__*/_jsx("div", {
className: "block-library-query-pattern__selection-search",
children: /*#__PURE__*/_jsx(SearchControl, {
__nextHasNoMarginBottom: true,
onChange: setSearchValue,
value: searchValue,
label: __('Search'),
placeholder: __('Search')
})
}), /*#__PURE__*/_jsx(BlockContextProvider, {
value: blockPreviewContext,
children: /*#__PURE__*/_jsx(BlockPatternsList, {
blockPatterns: filteredBlockPatterns,
onClickPattern: onBlockPatternSelect,
showTitlesAsTooltip: showTitlesAsTooltip
})
})]
});
}
//# sourceMappingURL=pattern-selection.js.map