@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 _element = require("@wordpress/element");

var _data = require("@wordpress/data");

var _compose = require("@wordpress/compose");

var _blockEditor = require("@wordpress/block-editor");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _queryToolbar = _interopRequireDefault(require("./query-toolbar"));

var _inspectorControls = _interopRequireDefault(require("./inspector-controls"));

var _constants = require("../constants");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const TEMPLATE = [['core/post-template']];

function QueryContent(_ref) {
  let {
    attributes,
    setAttributes,
    openPatternSelectionModal,
    name,
    clientId
  } = _ref;
  const {
    queryId,
    query,
    displayLayout,
    tagName: TagName = 'div',
    layout = {}
  } = attributes;
  const {
    __unstableMarkNextChangeAsNotPersistent
  } = (0, _data.useDispatch)(_blockEditor.store);
  const instanceId = (0, _compose.useInstanceId)(QueryContent);
  const {
    themeSupportsLayout
  } = (0, _data.useSelect)(select => {
    var _getSettings;

    const {
      getSettings
    } = select(_blockEditor.store);
    return {
      themeSupportsLayout: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.supportsLayout
    };
  }, []);
  const defaultLayout = (0, _blockEditor.useSetting)('layout') || {};
  const usedLayout = !(layout !== null && layout !== void 0 && layout.type) ? { ...defaultLayout,
    ...layout,
    type: 'default'
  } : { ...defaultLayout,
    ...layout
  };
  const blockProps = (0, _blockEditor.useBlockProps)();
  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
    template: TEMPLATE,
    __experimentalLayout: themeSupportsLayout ? usedLayout : undefined
  });
  const {
    postsPerPage
  } = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_blockEditor.store);
    return {
      postsPerPage: +getSettings().postsPerPage || _constants.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.

  (0, _element.useEffect)(() => {
    const newQuery = {};

    if (!query.perPage && postsPerPage) {
      newQuery.perPage = postsPerPage;
    }

    if (!!Object.keys(newQuery).length) {
      __unstableMarkNextChangeAsNotPersistent();

      updateQuery(newQuery);
    }
  }, [query.perPage]); // 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]);

  const updateQuery = newQuery => setAttributes({
    query: { ...query,
      ...newQuery
    }
  });

  const updateDisplayLayout = newDisplayLayout => setAttributes({
    displayLayout: { ...displayLayout,
      ...newDisplayLayout
    }
  });

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inspectorControls.default, {
    attributes: attributes,
    setQuery: updateQuery,
    setDisplayLayout: updateDisplayLayout
  }), (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_queryToolbar.default, {
    name: name,
    clientId: clientId,
    attributes: attributes,
    setQuery: updateQuery,
    setDisplayLayout: updateDisplayLayout,
    openPatternSelectionModal: openPatternSelectionModal
  })), (0, _element.createElement)(_blockEditor.InspectorControls, {
    __experimentalGroup: "advanced"
  }, (0, _element.createElement)(_components.SelectControl, {
    label: (0, _i18n.__)('HTML element'),
    options: [{
      label: (0, _i18n.__)('Default (<div>)'),
      value: 'div'
    }, {
      label: '<main>',
      value: 'main'
    }, {
      label: '<section>',
      value: 'section'
    }, {
      label: '<aside>',
      value: 'aside'
    }],
    value: TagName,
    onChange: value => setAttributes({
      tagName: value
    })
  })), (0, _element.createElement)(TagName, innerBlocksProps));
}
//# sourceMappingURL=query-content.js.map