@wordpress/block-library/build/query/edit/query-content.js

Block library for the WordPress editor.

"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