@wordpress/block-library
Version:
Block library for the WordPress editor.
177 lines (172 loc) • 6.21 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = QueryContent;
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _coreData = require("@wordpress/core-data");
var _enhancedPaginationControl = _interopRequireDefault(require("./inspector-controls/enhanced-pagination-control"));
var _lockUnlock = require("../../lock-unlock");
var _inspectorControls = _interopRequireDefault(require("./inspector-controls"));
var _enhancedPaginationModal = _interopRequireDefault(require("./enhanced-pagination-modal"));
var _utils = require("../utils");
var _queryToolbar = _interopRequireDefault(require("./query-toolbar"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
HTMLElementControl
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const DEFAULTS_POSTS_PER_PAGE = 3;
const TEMPLATE = [['core/post-template']];
function QueryContent({
attributes,
setAttributes,
clientId,
context,
name
}) {
const {
queryId,
query,
enhancedPagination,
tagName: TagName = 'div',
query: {
inherit
} = {}
} = attributes;
const {
templateSlug
} = context;
const {
isSingular
} = (0, _utils.getQueryContextFromTemplate)(templateSlug);
const {
__unstableMarkNextChangeAsNotPersistent
} = (0, _data.useDispatch)(_blockEditor.store);
const instanceId = (0, _compose.useInstanceId)(QueryContent);
const blockProps = (0, _blockEditor.useBlockProps)();
const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
template: TEMPLATE
});
const {
postsPerPage
} = (0, _data.useSelect)(select => {
const {
getSettings
} = select(_blockEditor.store);
const {
getEntityRecord,
getEntityRecordEdits,
canUser
} = select(_coreData.store);
const settingPerPage = canUser('read', {
kind: 'root',
name: 'site'
}) ? +getEntityRecord('root', 'site')?.posts_per_page : +getSettings().postsPerPage;
// Gets changes made via the template area posts per page setting. These won't be saved
// until the page is saved, but we should reflect this setting within the query loops
// that inherit it.
const editedSettingPerPage = +getEntityRecordEdits('root', 'site')?.posts_per_page;
return {
postsPerPage: editedSettingPerPage || settingPerPage || DEFAULTS_POSTS_PER_PAGE
};
}, []);
// There are some effects running where some initialization logic is
// happening and setting some values to some attributes (ex. queryId).
// These updates can cause an `undo trap` where undoing will result in
// resetting again, so we need to mark these changes as not persistent
// with `__unstableMarkNextChangeAsNotPersistent`.
// Changes in query property (which is an object) need to be in the same callback,
// because updates are batched after the render and changes in different query properties
// would cause to override previous wanted changes.
const updateQuery = (0, _element.useCallback)(newQuery => setAttributes(prevAttributes => ({
query: {
...prevAttributes.query,
...newQuery
}
})), [setAttributes]);
(0, _element.useEffect)(() => {
const newQuery = {};
// When we inherit from global query always need to set the `perPage`
// based on the reading settings.
if (inherit && query.perPage !== postsPerPage) {
newQuery.perPage = postsPerPage;
} else if (!query.perPage && postsPerPage) {
newQuery.perPage = postsPerPage;
}
if (!!Object.keys(newQuery).length) {
__unstableMarkNextChangeAsNotPersistent();
updateQuery(newQuery);
}
}, [query.perPage, inherit, postsPerPage, __unstableMarkNextChangeAsNotPersistent, updateQuery]);
// We need this for multi-query block pagination.
// Query parameters for each block are scoped to their ID.
(0, _element.useEffect)(() => {
if (!Number.isFinite(queryId)) {
__unstableMarkNextChangeAsNotPersistent();
setAttributes({
queryId: instanceId
});
}
}, [queryId, instanceId, __unstableMarkNextChangeAsNotPersistent, setAttributes]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_enhancedPaginationModal.default, {
attributes: attributes,
setAttributes: setAttributes,
clientId: clientId
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default, {
name: name,
attributes: attributes,
setQuery: updateQuery,
setAttributes: setAttributes,
clientId: clientId,
isSingular: isSingular
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_queryToolbar.default, {
attributes: attributes,
clientId: clientId
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
group: "advanced",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HTMLElementControl, {
tagName: TagName,
onChange: value => setAttributes({
tagName: value
}),
clientId: clientId,
options: [{
label: (0, _i18n.__)('Default (<div>)'),
value: 'div'
}, {
label: '<main>',
value: 'main'
}, {
label: '<section>',
value: 'section'
}, {
label: '<aside>',
value: 'aside'
}]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_enhancedPaginationControl.default, {
enhancedPagination: enhancedPagination,
setAttributes: setAttributes,
clientId: clientId
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
...innerBlocksProps
})]
});
}
//# sourceMappingURL=query-content.js.map
;