@wordpress/block-library
Version:
Block library for the WordPress editor.
201 lines (178 loc) • 7.86 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = QueryInspectorControls;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _compose = require("@wordpress/compose");
var _orderControl = _interopRequireDefault(require("./order-control"));
var _authorControl = _interopRequireDefault(require("./author-control"));
var _parentControl = _interopRequireDefault(require("./parent-control"));
var _taxonomyControls = require("./taxonomy-controls");
var _stickyControl = _interopRequireDefault(require("./sticky-control"));
var _utils = require("../../utils");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function QueryInspectorControls(_ref) {
let {
attributes,
setQuery,
setDisplayLayout
} = _ref;
const {
query,
displayLayout
} = attributes;
const {
order,
orderBy,
author: authorIds,
postType,
sticky,
inherit,
taxQuery,
parents
} = query;
const allowedControls = (0, _utils.useAllowedControls)(attributes);
const [showSticky, setShowSticky] = (0, _element.useState)(postType === 'post');
const {
postTypesTaxonomiesMap,
postTypesSelectOptions
} = (0, _utils.usePostTypes)();
const taxonomiesInfo = (0, _taxonomyControls.useTaxonomiesInfo)(postType);
const isPostTypeHierarchical = (0, _utils.useIsPostTypeHierarchical)(postType);
(0, _element.useEffect)(() => {
setShowSticky(postType === 'post');
}, [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, _ref2) => {
let [taxonomySlug, terms] = _ref2;
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 = [];
setQuery(updateQuery);
};
const [querySearch, setQuerySearch] = (0, _element.useState)(query.search);
const onChangeDebounced = (0, _element.useCallback)((0, _compose.debounce)(() => {
if (query.search !== querySearch) {
setQuery({
search: querySearch
});
}
}, 250), [querySearch, query.search]);
(0, _element.useEffect)(() => {
onChangeDebounced();
return onChangeDebounced.cancel;
}, [querySearch, onChangeDebounced]);
const showInheritControl = (0, _utils.isControlAllowed)(allowedControls, 'inherit');
const showPostTypeControl = !inherit && (0, _utils.isControlAllowed)(allowedControls, 'postType');
const showColumnsControl = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.type) === 'flex';
const showOrderControl = !inherit && (0, _utils.isControlAllowed)(allowedControls, 'order');
const showStickyControl = !inherit && showSticky && (0, _utils.isControlAllowed)(allowedControls, 'sticky');
const showSettingsPanel = showInheritControl || showPostTypeControl || showColumnsControl || showOrderControl || showStickyControl;
return (0, _element.createElement)(_element.Fragment, null, showSettingsPanel && (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
title: (0, _i18n.__)('Settings')
}, showInheritControl && (0, _element.createElement)(_components.ToggleControl, {
label: (0, _i18n.__)('Inherit query from template'),
help: (0, _i18n.__)('Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'),
checked: !!inherit,
onChange: value => setQuery({
inherit: !!value
})
}), showPostTypeControl && (0, _element.createElement)(_components.SelectControl, {
options: postTypesSelectOptions,
value: postType,
label: (0, _i18n.__)('Post type'),
onChange: onPostTypeChange,
help: (0, _i18n.__)('WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.')
}), showColumnsControl && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.RangeControl, {
label: (0, _i18n.__)('Columns'),
value: displayLayout.columns,
onChange: value => setDisplayLayout({
columns: value
}),
min: 2,
max: Math.max(6, displayLayout.columns)
}), displayLayout.columns > 6 && (0, _element.createElement)(_components.Notice, {
status: "warning",
isDismissible: false
}, (0, _i18n.__)('This column count exceeds the recommended amount and may cause visual breakage.'))), showOrderControl && (0, _element.createElement)(_orderControl.default, {
order,
orderBy,
onChange: setQuery
}), showStickyControl && (0, _element.createElement)(_stickyControl.default, {
value: sticky,
onChange: value => setQuery({
sticky: value
})
}))), !inherit && (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.__experimentalToolsPanel, {
className: "block-library-query-toolspanel__filters",
label: (0, _i18n.__)('Filters'),
resetAll: () => {
setQuery({
author: '',
parents: [],
search: '',
taxQuery: null
});
setQuerySearch('');
}
}, !!(taxonomiesInfo !== null && taxonomiesInfo !== void 0 && taxonomiesInfo.length) && (0, _utils.isControlAllowed)(allowedControls, 'taxQuery') && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
label: (0, _i18n.__)('Taxonomies'),
hasValue: () => Object.values(taxQuery || {}).some(terms => !!terms.length),
onDeselect: () => setQuery({
taxQuery: null
})
}, (0, _element.createElement)(_taxonomyControls.TaxonomyControls, {
onChange: setQuery,
query: query
})), (0, _utils.isControlAllowed)(allowedControls, 'author') && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!authorIds,
label: (0, _i18n.__)('Authors'),
onDeselect: () => setQuery({
author: ''
})
}, (0, _element.createElement)(_authorControl.default, {
value: authorIds,
onChange: setQuery
})), (0, _utils.isControlAllowed)(allowedControls, 'search') && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!querySearch,
label: (0, _i18n.__)('Keyword'),
onDeselect: () => setQuerySearch('')
}, (0, _element.createElement)(_components.TextControl, {
label: (0, _i18n.__)('Keyword'),
value: querySearch,
onChange: setQuerySearch
})), isPostTypeHierarchical && !(0, _utils.isControlAllowed)(allowedControls, 'parents') && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!(parents !== null && parents !== void 0 && parents.length),
label: (0, _i18n.__)('Parents'),
onDeselect: () => setQuery({
parents: []
})
}, (0, _element.createElement)(_parentControl.default, {
parents: parents,
postType: postType,
onChange: setQuery
})))));
}
//# sourceMappingURL=index.js.map