@wordpress/editor/build/components/post-discussion/panel.js

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostDiscussionPanel;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _coreData = require("@wordpress/core-data");
var _store = require("../../store");
var _postTypeSupportCheck = _interopRequireDefault(require("../post-type-support-check"));
var _postComments = _interopRequireDefault(require("../post-comments"));
var _postPingbacks = _interopRequireDefault(require("../post-pingbacks"));
var _postPanelRow = _interopRequireDefault(require("../post-panel-row"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const PANEL_NAME = 'discussion-panel';
function ModalContents({
  onClose
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "editor-post-discussion",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
      title: (0, _i18n.__)('Discussion'),
      onClose: onClose
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 4,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_postTypeSupportCheck.default, {
        supportKeys: "comments",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postComments.default, {})
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_postTypeSupportCheck.default, {
        supportKeys: "trackbacks",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPingbacks.default, {})
      })]
    })]
  });
}
function PostDiscussionToggle({
  isOpen,
  onClick
}) {
  const {
    commentStatus,
    pingStatus,
    commentsSupported,
    trackbacksSupported
  } = (0, _data.useSelect)(select => {
    var _getEditedPostAttribu, _getEditedPostAttribu2;
    const {
      getEditedPostAttribute
    } = select(_store.store);
    const {
      getPostType
    } = select(_coreData.store);
    const postType = getPostType(getEditedPostAttribute('type'));
    return {
      commentStatus: (_getEditedPostAttribu = getEditedPostAttribute('comment_status')) !== null && _getEditedPostAttribu !== void 0 ? _getEditedPostAttribu : 'open',
      pingStatus: (_getEditedPostAttribu2 = getEditedPostAttribute('ping_status')) !== null && _getEditedPostAttribu2 !== void 0 ? _getEditedPostAttribu2 : 'open',
      commentsSupported: !!postType.supports.comments,
      trackbacksSupported: !!postType.supports.trackbacks
    };
  }, []);
  let label;
  if (commentStatus === 'open') {
    if (pingStatus === 'open') {
      label = (0, _i18n._x)('Open', 'Adjective: e.g. "Comments are open"');
    } else {
      label = trackbacksSupported ? (0, _i18n.__)('Comments only') : (0, _i18n._x)('Open', 'Adjective: e.g. "Comments are open"');
    }
  } else if (pingStatus === 'open') {
    label = commentsSupported ? (0, _i18n.__)('Pings only') : (0, _i18n.__)('Pings enabled');
  } else {
    label = (0, _i18n.__)('Closed');
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    size: "compact",
    className: "editor-post-discussion__panel-toggle",
    variant: "tertiary",
    "aria-label": (0, _i18n.__)('Change discussion options'),
    "aria-expanded": isOpen,
    onClick: onClick,
    children: label
  });
}

/**
 * This component allows to update comment and pingback
 * settings for the current post. Internally there are
 * checks whether the current post has support for the
 * above and if the `discussion-panel` panel is enabled.
 *
 * @return {JSX.Element|null} The rendered PostDiscussionPanel component.
 */
function PostDiscussionPanel() {
  const {
    isEnabled
  } = (0, _data.useSelect)(select => {
    const {
      isEditorPanelEnabled
    } = select(_store.store);
    return {
      isEnabled: isEditorPanelEnabled(PANEL_NAME)
    };
  }, []);

  // Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.
  const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
  // Memoize popoverProps to avoid returning a new object every time.
  const popoverProps = (0, _element.useMemo)(() => ({
    // Anchor the popover to the middle of the entire row so that it doesn't
    // move around when the label changes.
    anchor: popoverAnchor,
    placement: 'left-start',
    offset: 36,
    shift: true
  }), [popoverAnchor]);
  if (!isEnabled) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_postTypeSupportCheck.default, {
    supportKeys: ['comments', 'trackbacks'],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_postPanelRow.default, {
      label: (0, _i18n.__)('Discussion'),
      ref: setPopoverAnchor,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
        popoverProps: popoverProps,
        className: "editor-post-discussion__panel-dropdown",
        contentClassName: "editor-post-discussion__panel-dialog",
        focusOnMount: true,
        renderToggle: ({
          isOpen,
          onToggle
        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PostDiscussionToggle, {
          isOpen: isOpen,
          onClick: onToggle
        }),
        renderContent: ({
          onClose
        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContents, {
          onClose: onClose
        })
      })
    })
  });
}
//# sourceMappingURL=panel.js.map