@wordpress/edit-post/build/components/sidebar/post-link/index.js

Edit Post module for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

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

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

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

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

var _editor = require("@wordpress/editor");

var _url = require("@wordpress/url");

var _store = require("../../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Module Constants
 */
const PANEL_NAME = 'post-link';

function PostLink({
  isOpened,
  onTogglePanel,
  isEditable,
  postLink,
  permalinkPrefix,
  permalinkSuffix,
  editPermalink,
  forceEmptyField,
  setState,
  postSlug,
  postTypeLabel
}) {
  let prefixElement, postNameElement, suffixElement;

  if (isEditable) {
    prefixElement = permalinkPrefix && (0, _element.createElement)("span", {
      className: "edit-post-post-link__link-prefix"
    }, permalinkPrefix);
    postNameElement = postSlug && (0, _element.createElement)("span", {
      className: "edit-post-post-link__link-post-name"
    }, postSlug);
    suffixElement = permalinkSuffix && (0, _element.createElement)("span", {
      className: "edit-post-post-link__link-suffix"
    }, permalinkSuffix);
  }

  return (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Permalink'),
    opened: isOpened,
    onToggle: onTogglePanel
  }, isEditable && (0, _element.createElement)("div", {
    className: "editor-post-link"
  }, (0, _element.createElement)(_components.TextControl, {
    label: (0, _i18n.__)('URL Slug'),
    value: forceEmptyField ? '' : postSlug,
    onChange: newValue => {
      editPermalink(newValue); // When we delete the field the permalink gets
      // reverted to the original value.
      // The forceEmptyField logic allows the user to have
      // the field temporarily empty while typing.

      if (!newValue) {
        if (!forceEmptyField) {
          setState({
            forceEmptyField: true
          });
        }

        return;
      }

      if (forceEmptyField) {
        setState({
          forceEmptyField: false
        });
      }
    },
    onBlur: event => {
      editPermalink((0, _editor.cleanForSlug)(event.target.value));

      if (forceEmptyField) {
        setState({
          forceEmptyField: false
        });
      }
    }
  }), (0, _element.createElement)("p", null, (0, _i18n.__)('The last part of the URL.'), ' ', (0, _element.createElement)(_components.ExternalLink, {
    href: "https://wordpress.org/support/article/writing-posts/#post-field-descriptions"
  }, (0, _i18n.__)('Read about permalinks')))), (0, _element.createElement)("h3", {
    className: "edit-post-post-link__preview-label"
  }, postTypeLabel || (0, _i18n.__)('View post')), (0, _element.createElement)("div", {
    className: "edit-post-post-link__preview-link-container"
  }, (0, _element.createElement)(_components.ExternalLink, {
    className: "edit-post-post-link__link",
    href: postLink,
    target: "_blank"
  }, isEditable ? (0, _element.createElement)(_element.Fragment, null, prefixElement, postNameElement, suffixElement) : postLink)));
}

var _default = (0, _compose.compose)([(0, _data.withSelect)(select => {
  const {
    isPermalinkEditable,
    getCurrentPost,
    isCurrentPostPublished,
    getPermalinkParts,
    getEditedPostAttribute,
    getEditedPostSlug
  } = select('core/editor');
  const {
    isEditorPanelEnabled,
    isEditorPanelOpened
  } = select(_store.store);
  const {
    getPostType
  } = select('core');
  const {
    link
  } = getCurrentPost();
  const postTypeName = getEditedPostAttribute('type');
  const postType = getPostType(postTypeName);
  const permalinkParts = getPermalinkParts();
  return {
    postLink: link,
    isEditable: isPermalinkEditable(),
    isPublished: isCurrentPostPublished(),
    isOpened: isEditorPanelOpened(PANEL_NAME),
    isEnabled: isEditorPanelEnabled(PANEL_NAME),
    isViewable: (0, _lodash.get)(postType, ['viewable'], false),
    postSlug: (0, _url.safeDecodeURIComponent)(getEditedPostSlug()),
    postTypeLabel: (0, _lodash.get)(postType, ['labels', 'view_item']),
    hasPermalinkParts: !!permalinkParts,
    permalinkPrefix: permalinkParts === null || permalinkParts === void 0 ? void 0 : permalinkParts.prefix,
    permalinkSuffix: permalinkParts === null || permalinkParts === void 0 ? void 0 : permalinkParts.suffix
  };
}), (0, _compose.ifCondition)(({
  isEnabled,
  postLink,
  isViewable,
  hasPermalinkParts
}) => {
  return isEnabled && postLink && isViewable && hasPermalinkParts;
}), (0, _data.withDispatch)(dispatch => {
  const {
    toggleEditorPanelOpened
  } = dispatch(_store.store);
  const {
    editPost
  } = dispatch('core/editor');
  return {
    onTogglePanel: () => toggleEditorPanelOpened(PANEL_NAME),
    editPermalink: newSlug => {
      editPost({
        slug: newSlug
      });
    }
  };
}), (0, _compose.withState)({
  forceEmptyField: false
})])(PostLink);

exports.default = _default;
//# sourceMappingURL=index.js.map