@wordpress/block-editor
Version:
66 lines (65 loc) • 2.47 kB
JavaScript
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { useViewportMatch } from '@wordpress/compose';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import PatternsExplorerModal from '../block-patterns-explorer';
import MobileTabNavigation from '../mobile-tab-navigation';
import { PatternCategoryPreviews } from './pattern-category-previews';
import { usePatternCategories } from './use-pattern-categories';
import CategoryTabs from '../category-tabs';
import InserterNoResults from '../no-results';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function BlockPatternsTab({
onSelectCategory,
selectedCategory,
onInsert,
rootClientId,
children
}) {
const [showPatternsExplorer, setShowPatternsExplorer] = useState(false);
const categories = usePatternCategories(rootClientId);
const isMobile = useViewportMatch('medium', '<');
if (!categories.length) {
return /*#__PURE__*/_jsx(InserterNoResults, {});
}
return /*#__PURE__*/_jsxs(_Fragment, {
children: [!isMobile && /*#__PURE__*/_jsxs("div", {
className: "block-editor-inserter__block-patterns-tabs-container",
children: [/*#__PURE__*/_jsx(CategoryTabs, {
categories: categories,
selectedCategory: selectedCategory,
onSelectCategory: onSelectCategory,
children: children
}), /*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
className: "block-editor-inserter__patterns-explore-button",
onClick: () => setShowPatternsExplorer(true),
variant: "secondary",
children: __('Explore all patterns')
})]
}), isMobile && /*#__PURE__*/_jsx(MobileTabNavigation, {
categories: categories,
children: category => /*#__PURE__*/_jsx("div", {
className: "block-editor-inserter__category-panel",
children: /*#__PURE__*/_jsx(PatternCategoryPreviews, {
onInsert: onInsert,
rootClientId: rootClientId,
category: category
}, category.name)
})
}), showPatternsExplorer && /*#__PURE__*/_jsx(PatternsExplorerModal, {
initialCategory: selectedCategory || categories[0],
patternCategories: categories,
onModalClose: () => setShowPatternsExplorer(false),
rootClientId: rootClientId
})]
});
}
export default BlockPatternsTab;
//# sourceMappingURL=index.js.map