UNPKG

@wordpress/block-library

Version:
177 lines (172 loc) 6.21 kB
"use strict"; 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