@wordpress/block-library
Version:
Block library for the WordPress editor.
355 lines (350 loc) • 15.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = QueryInspectorControls;
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _orderControl = _interopRequireDefault(require("./order-control"));
var _authorControl = _interopRequireDefault(require("./author-control"));
var _parentControl = _interopRequireDefault(require("./parent-control"));
var _taxonomyControls = require("./taxonomy-controls");
var _formatControls = _interopRequireDefault(require("./format-controls"));
var _stickyControl = _interopRequireDefault(require("./sticky-control"));
var _perPageControl = _interopRequireDefault(require("./per-page-control"));
var _offsetControls = _interopRequireDefault(require("./offset-controls"));
var _pagesControl = _interopRequireDefault(require("./pages-control"));
var _utils = require("../../utils");
var _hooks = require("../../../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function QueryInspectorControls(props) {
const {
attributes,
setQuery,
isSingular
} = props;
const {
query
} = attributes;
const {
order,
orderBy,
author: authorIds,
pages,
postType,
perPage,
offset,
sticky,
inherit,
taxQuery,
parents,
format
} = query;
const allowedControls = (0, _utils.useAllowedControls)(attributes);
const showSticky = postType === 'post';
const {
postTypesTaxonomiesMap,
postTypesSelectOptions,
postTypeFormatSupportMap
} = (0, _utils.usePostTypes)();
const taxonomies = (0, _utils.useTaxonomies)(postType);
const isPostTypeHierarchical = (0, _utils.useIsPostTypeHierarchical)(postType);
const onPostTypeChange = newValue => {
const updateQuery = {
postType: newValue
};
// We need to dynamically update the `taxQuery` property,
// by removing any not supported taxonomy from the query.
const supportedTaxonomies = postTypesTaxonomiesMap[newValue];
const updatedTaxQuery = Object.entries(taxQuery || {}).reduce((accumulator, [taxonomySlug, terms]) => {
if (supportedTaxonomies.includes(taxonomySlug)) {
accumulator[taxonomySlug] = terms;
}
return accumulator;
}, {});
updateQuery.taxQuery = !!Object.keys(updatedTaxQuery).length ? updatedTaxQuery : undefined;
if (newValue !== 'post') {
updateQuery.sticky = '';
}
// We need to reset `parents` because they are tied to each post type.
updateQuery.parents = [];
// Post types can register post format support with `add_post_type_support`.
// But we need to reset the `format` property when switching to post types
// that do not support post formats.
const hasFormatSupport = postTypeFormatSupportMap[newValue];
if (!hasFormatSupport) {
updateQuery.format = [];
}
setQuery(updateQuery);
};
const [querySearch, setQuerySearch] = (0, _element.useState)(query.search);
const debouncedQuerySearch = (0, _element.useMemo)(() => {
return (0, _compose.debounce)(newQuerySearch => {
setQuery({
search: newQuerySearch
});
}, 250);
}, [setQuery]);
const orderByOptions = (0, _utils.useOrderByOptions)(postType);
const showInheritControl = (0, _utils.isControlAllowed)(allowedControls, 'inherit');
const showPostTypeControl = !inherit && (0, _utils.isControlAllowed)(allowedControls, 'postType');
const postTypeControlLabel = (0, _i18n.__)('Post type');
const postTypeControlHelp = (0, _i18n.__)('Select the type of content to display: posts, pages, or custom post types.');
const showOrderControl = !inherit && (0, _utils.isControlAllowed)(allowedControls, 'order');
const showStickyControl = !inherit && showSticky && (0, _utils.isControlAllowed)(allowedControls, 'sticky');
const showSettingsPanel = showInheritControl || showPostTypeControl || showOrderControl || showStickyControl;
const showTaxControl = !!taxonomies?.length && (0, _utils.isControlAllowed)(allowedControls, 'taxQuery');
const showAuthorControl = (0, _utils.isControlAllowed)(allowedControls, 'author');
const showSearchControl = (0, _utils.isControlAllowed)(allowedControls, 'search');
const showParentControl = (0, _utils.isControlAllowed)(allowedControls, 'parents') && isPostTypeHierarchical;
const postTypeHasFormatSupport = postTypeFormatSupportMap[postType];
const showFormatControl = (0, _data.useSelect)(select => {
// Check if the post type supports post formats and if the control is allowed.
if (!postTypeHasFormatSupport || !(0, _utils.isControlAllowed)(allowedControls, 'format')) {
return false;
}
const themeSupports = select(_coreData.store).getThemeSupports();
// If there are no supported formats, getThemeSupports still includes the default 'standard' format,
// and in this case the control should not be shown since the user has no other formats to choose from.
return themeSupports.formats && themeSupports.formats.length > 0 && themeSupports.formats.some(type => type !== 'standard');
}, [allowedControls, postTypeHasFormatSupport]);
const showFiltersPanel = showTaxControl || showAuthorControl || showSearchControl || showParentControl || showFormatControl;
const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
const showPostCountControl = (0, _utils.isControlAllowed)(allowedControls, 'postCount');
const showOffSetControl = (0, _utils.isControlAllowed)(allowedControls, 'offset');
const showPagesControl = (0, _utils.isControlAllowed)(allowedControls, 'pages');
const showDisplayPanel = showPostCountControl || showOffSetControl || showPagesControl;
// The block cannot inherit a default WordPress query in singular content (e.g., post, page, 404, blank).
// Warn users but still permit this type of query for exceptional cases in Classic and Hybrid themes.
const hasInheritanceWarning = isSingular && inherit;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [showSettingsPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
label: (0, _i18n.__)('Settings'),
resetAll: () => {
setQuery({
postType: 'post',
order: 'desc',
orderBy: 'date',
sticky: '',
inherit: true
});
},
dropdownMenuProps: dropdownMenuProps,
children: [showInheritControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !inherit,
label: (0, _i18n.__)('Query type'),
onDeselect: () => setQuery({
inherit: true
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Query type'),
isBlock: true,
onChange: value => {
setQuery({
inherit: value === 'default'
});
},
help: inherit ? (0, _i18n.__)('Display a list of posts or custom post types based on the current template.') : (0, _i18n.__)('Display a list of posts or custom post types based on specific criteria.'),
value: !!inherit ? 'default' : 'custom',
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "default",
label: (0, _i18n.__)('Default')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: "custom",
label: (0, _i18n.__)('Custom')
})]
}), hasInheritanceWarning && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
status: "warning",
isDismissible: false,
children: (0, _i18n.__)('Cannot inherit the current template query when placed inside the singular content (e.g., post, page, 404, blank).')
})]
})
}), showPostTypeControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => postType !== 'post',
label: postTypeControlLabel,
onDeselect: () => onPostTypeChange('post'),
isShownByDefault: true,
children: postTypesSelectOptions.length > 2 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
options: postTypesSelectOptions,
value: postType,
label: postTypeControlLabel,
onChange: onPostTypeChange,
help: postTypeControlHelp
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
isBlock: true,
value: postType,
label: postTypeControlLabel,
onChange: onPostTypeChange,
help: postTypeControlHelp,
children: postTypesSelectOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
value: option.value,
label: option.label
}, option.value))
})
}), showOrderControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => order !== 'desc' || orderBy !== 'date',
label: (0, _i18n.__)('Order by'),
onDeselect: () => setQuery({
order: 'desc',
orderBy: 'date'
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_orderControl.default, {
order,
orderBy,
orderByOptions,
onChange: setQuery
})
}), showStickyControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!sticky,
label: (0, _i18n.__)('Sticky posts'),
onDeselect: () => setQuery({
sticky: ''
}),
isShownByDefault: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_stickyControl.default, {
value: sticky,
onChange: value => setQuery({
sticky: value
})
})
})]
}), !inherit && showDisplayPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
className: "block-library-query-toolspanel__display",
label: (0, _i18n.__)('Display'),
resetAll: () => {
setQuery({
offset: 0,
pages: 0
});
},
dropdownMenuProps: dropdownMenuProps,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Items per page'),
hasValue: () => perPage > 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_perPageControl.default, {
perPage: perPage,
offset: offset,
onChange: setQuery
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Offset'),
hasValue: () => offset > 0,
onDeselect: () => setQuery({
offset: 0
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_offsetControls.default, {
offset: offset,
onChange: setQuery
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Max pages to show'),
hasValue: () => pages > 0,
onDeselect: () => setQuery({
pages: 0
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagesControl.default, {
pages: pages,
onChange: setQuery
})
})]
}), !inherit && showFiltersPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
className: "block-library-query-toolspanel__filters" // unused but kept for backward compatibility
,
label: (0, _i18n.__)('Filters'),
resetAll: () => {
setQuery({
author: '',
parents: [],
search: '',
taxQuery: null,
format: []
});
setQuerySearch('');
},
dropdownMenuProps: dropdownMenuProps,
children: [showTaxControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Taxonomies'),
hasValue: () => Object.values(taxQuery || {}).some(terms => !!terms.length),
onDeselect: () => setQuery({
taxQuery: null
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_taxonomyControls.TaxonomyControls, {
onChange: setQuery,
query: query
})
}), showAuthorControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!authorIds,
label: (0, _i18n.__)('Authors'),
onDeselect: () => setQuery({
author: ''
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_authorControl.default, {
value: authorIds,
onChange: setQuery
})
}), showSearchControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!querySearch,
label: (0, _i18n.__)('Keyword'),
onDeselect: () => {
setQuery({
search: ''
});
setQuerySearch('');
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Keyword'),
value: querySearch,
onChange: newQuerySearch => {
debouncedQuerySearch(newQuerySearch);
setQuerySearch(newQuerySearch);
}
})
}), showParentControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!parents?.length,
label: (0, _i18n.__)('Parents'),
onDeselect: () => setQuery({
parents: []
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_parentControl.default, {
parents: parents,
postType: postType,
onChange: setQuery
})
}), showFormatControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!format?.length,
label: (0, _i18n.__)('Formats'),
onDeselect: () => setQuery({
format: []
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_formatControls.default, {
onChange: setQuery,
query: query
})
})]
})]
});
}
//# sourceMappingURL=index.js.map