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

Block library for the WordPress editor.

/**
 * WordPress dependencies
 */
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { Disabled, RangeControl, ToggleControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

/**
 * Minimum number of comments a user can show using this block.
 *
 * @type {number}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const MIN_COMMENTS = 1;
/**
 * Maximum number of comments a user can show using this block.
 *
 * @type {number}
 */
const MAX_COMMENTS = 100;
export default function LatestComments({
  attributes,
  setAttributes
}) {
  const {
    commentsToShow,
    displayAvatar,
    displayDate,
    displayExcerpt
  } = attributes;
  const serverSideAttributes = {
    ...attributes,
    style: {
      ...attributes?.style,
      spacing: undefined
    }
  };
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  return /*#__PURE__*/_jsxs("div", {
    ...useBlockProps(),
    children: [/*#__PURE__*/_jsx(InspectorControls, {
      children: /*#__PURE__*/_jsxs(ToolsPanel, {
        label: __('Settings'),
        resetAll: () => {
          setAttributes({
            commentsToShow: 5,
            displayAvatar: true,
            displayDate: true,
            displayExcerpt: true
          });
        },
        dropdownMenuProps: dropdownMenuProps,
        children: [/*#__PURE__*/_jsx(ToolsPanelItem, {
          hasValue: () => !displayAvatar,
          label: __('Display avatar'),
          onDeselect: () => setAttributes({
            displayAvatar: true
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/_jsx(ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: __('Display avatar'),
            checked: displayAvatar,
            onChange: () => setAttributes({
              displayAvatar: !displayAvatar
            })
          })
        }), /*#__PURE__*/_jsx(ToolsPanelItem, {
          hasValue: () => !displayDate,
          label: __('Display date'),
          onDeselect: () => setAttributes({
            displayDate: true
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/_jsx(ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: __('Display date'),
            checked: displayDate,
            onChange: () => setAttributes({
              displayDate: !displayDate
            })
          })
        }), /*#__PURE__*/_jsx(ToolsPanelItem, {
          hasValue: () => !displayExcerpt,
          label: __('Display excerpt'),
          onDeselect: () => setAttributes({
            displayExcerpt: true
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/_jsx(ToggleControl, {
            __nextHasNoMarginBottom: true,
            label: __('Display excerpt'),
            checked: displayExcerpt,
            onChange: () => setAttributes({
              displayExcerpt: !displayExcerpt
            })
          })
        }), /*#__PURE__*/_jsx(ToolsPanelItem, {
          hasValue: () => commentsToShow !== 5,
          label: __('Number of comments'),
          onDeselect: () => setAttributes({
            commentsToShow: 5
          }),
          isShownByDefault: true,
          children: /*#__PURE__*/_jsx(RangeControl, {
            __nextHasNoMarginBottom: true,
            __next40pxDefaultSize: true,
            label: __('Number of comments'),
            value: commentsToShow,
            onChange: value => setAttributes({
              commentsToShow: value
            }),
            min: MIN_COMMENTS,
            max: MAX_COMMENTS,
            required: true
          })
        })]
      })
    }), /*#__PURE__*/_jsx(Disabled, {
      children: /*#__PURE__*/_jsx(ServerSideRender, {
        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