@wordpress/block-library/build/latest-comments/edit.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = LatestComments;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _serverSideRender = _interopRequireDefault(require("@wordpress/server-side-render"));
var _i18n = require("@wordpress/i18n");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Minimum number of comments a user can show using this block.
 *
 * @type {number}
 */const MIN_COMMENTS = 1;
/**
 * Maximum number of comments a user can show using this block.
 *
 * @type {number}
 */
const MAX_COMMENTS = 100;
function LatestComments({
  attributes,
  setAttributes
}) {
  const {
    commentsToShow,
    displayAvatar,
    displayDate,
    displayExcerpt
  } = attributes;
  const serverSideAttributes = {
    ...attributes,
    style: {
      ...attributes?.style,
      spacing: undefined
    }
  };
  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ...(0, _blockEditor.useBlockProps)(),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
        label: (0, _i18n.__)('Settings'),
        resetAll: () => {
          setAttributes({
            commentsToShow: 5,
            displayAvatar: true,
            displayDate: true,
            displayExcerpt: true
          });
        },
        dropdownMenuProps: dropdownMenuProps,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          hasValue: () => !displayAvatar,
          label: (0, _i18n.__)('Display avatar'),
          onDeselect: () => setAttributes({
            displayAvatar: true
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Display avatar'),
            checked: displayAvatar,
            onChange: () => setAttributes({
              displayAvatar: !displayAvatar
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          hasValue: () => !displayDate,
          label: (0, _i18n.__)('Display date'),
          onDeselect: () => setAttributes({
            displayDate: true
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Display date'),
            checked: displayDate,
            onChange: () => setAttributes({
              displayDate: !displayDate
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          hasValue: () => !displayExcerpt,
          label: (0, _i18n.__)('Display excerpt'),
          onDeselect: () => setAttributes({
            displayExcerpt: true
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: (0, _i18n.__)('Display excerpt'),
            checked: displayExcerpt,
            onChange: () => setAttributes({
              displayExcerpt: !displayExcerpt
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
          hasValue: () => commentsToShow !== 5,
          label: (0, _i18n.__)('Number of comments'),
          onDeselect: () => setAttributes({
            commentsToShow: 5
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
            __nextHasNoMarginBottom: true,
            __next40pxDefaultSize: true,
            label: (0, _i18n.__)('Number of comments'),
            value: commentsToShow,
            onChange: value => setAttributes({
              commentsToShow: value
            }),
            min: MIN_COMMENTS,
            max: MAX_COMMENTS,
            required: true
          })
        })]
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Disabled, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_serverSideRender.default, {
        block: "core/latest-comments",
        attributes: serverSideAttributes
        // The preview uses the site's locale to make it more true to how
        // the block appears on the frontend. Setting the locale
        // explicitly prevents any middleware from setting it to 'user'.
        ,
        urlQueryArgs: {
          _locale: 'site'
        }
      })
    })]
  });
}
//# sourceMappingURL=edit.js.map