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

Edit Post module for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import { get } from 'lodash';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose, ifCondition, withState } from '@wordpress/compose';
import { cleanForSlug } from '@wordpress/editor';
import { safeDecodeURIComponent } from '@wordpress/url';
/**
 * Internal dependencies
 */

import { store as editPostStore } from '../../../store';
/**
 * 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 && createElement("span", {
      className: "edit-post-post-link__link-prefix"
    }, permalinkPrefix);
    postNameElement = postSlug && createElement("span", {
      className: "edit-post-post-link__link-post-name"
    }, postSlug);
    suffixElement = permalinkSuffix && createElement("span", {
      className: "edit-post-post-link__link-suffix"
    }, permalinkSuffix);
  }

  return createElement(PanelBody, {
    title: __('Permalink'),
    opened: isOpened,
    onToggle: onTogglePanel
  }, isEditable && createElement("div", {
    className: "editor-post-link"
  }, createElement(TextControl, {
    label: __('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(cleanForSlug(event.target.value));

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

export default compose([withSelect(select => {
  const {
    isPermalinkEditable,
    getCurrentPost,
    isCurrentPostPublished,
    getPermalinkParts,
    getEditedPostAttribute,
    getEditedPostSlug
  } = select('core/editor');
  const {
    isEditorPanelEnabled,
    isEditorPanelOpened
  } = select(editPostStore);
  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: get(postType, ['viewable'], false),
    postSlug: safeDecodeURIComponent(getEditedPostSlug()),
    postTypeLabel: 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
  };
}), ifCondition(({
  isEnabled,
  postLink,
  isViewable,
  hasPermalinkParts
}) => {
  return isEnabled && postLink && isViewable && hasPermalinkParts;
}), withDispatch(dispatch => {
  const {
    toggleEditorPanelOpened
  } = dispatch(editPostStore);
  const {
    editPost
  } = dispatch('core/editor');
  return {
    onTogglePanel: () => toggleEditorPanelOpened(PANEL_NAME),
    editPermalink: newSlug => {
      editPost({
        slug: newSlug
      });
    }
  };
}), withState({
  forceEmptyField: false
})])(PostLink);
//# sourceMappingURL=index.js.map