@wordpress/editor/build/components/post-url/index.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostURL;
var _data = require("@wordpress/data");
var _url = require("@wordpress/url");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _notices = require("@wordpress/notices");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _compose = require("@wordpress/compose");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Renders the `PostURL` component.
 *
 * @example
 * ```jsx
 * <PostURL />
 * ```
 *
 * @param {Function} onClose Callback function to be executed when the popover is closed.
 *
 * @return {Component} The rendered PostURL component.
 */function PostURL({
  onClose
}) {
  const {
    isEditable,
    postSlug,
    postLink,
    permalinkPrefix,
    permalinkSuffix,
    permalink
  } = (0, _data.useSelect)(select => {
    var _post$_links$wpActio;
    const post = select(_store.store).getCurrentPost();
    const postTypeSlug = select(_store.store).getCurrentPostType();
    const postType = select(_coreData.store).getPostType(postTypeSlug);
    const permalinkParts = select(_store.store).getPermalinkParts();
    const hasPublishAction = (_post$_links$wpActio = post?._links?.['wp:action-publish']) !== null && _post$_links$wpActio !== void 0 ? _post$_links$wpActio : false;
    return {
      isEditable: select(_store.store).isPermalinkEditable() && hasPublishAction,
      postSlug: (0, _url.safeDecodeURIComponent)(select(_store.store).getEditedPostSlug()),
      viewPostLabel: postType?.labels.view_item,
      postLink: post.link,
      permalinkPrefix: permalinkParts?.prefix,
      permalinkSuffix: permalinkParts?.suffix,
      permalink: (0, _url.safeDecodeURIComponent)(select(_store.store).getPermalink())
    };
  }, []);
  const {
    editPost
  } = (0, _data.useDispatch)(_store.store);
  const {
    createNotice
  } = (0, _data.useDispatch)(_notices.store);
  const [forceEmptyField, setForceEmptyField] = (0, _element.useState)(false);
  const copyButtonRef = (0, _compose.useCopyToClipboard)(permalink, () => {
    createNotice('info', (0, _i18n.__)('Copied URL to clipboard.'), {
      isDismissible: true,
      type: 'snackbar'
    });
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "editor-post-url",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
      title: (0, _i18n.__)('Link'),
      onClose: onClose
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 3,
      children: [isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: (0, _element.createInterpolateElement)((0, _i18n.__)('Customize the last part of the URL. <a>Learn more.</a>'), {
          a: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
            href: (0, _i18n.__)('https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink')
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        children: [isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
          __next40pxDefaultSize: true,
          prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlPrefixWrapper, {
            children: "/"
          }),
          suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControlSuffixWrapper, {
            variant: "control",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
              icon: _icons.copySmall,
              ref: copyButtonRef,
              size: "small",
              label: "Copy"
            })
          }),
          label: (0, _i18n.__)('Link'),
          hideLabelFromVision: true,
          value: forceEmptyField ? '' : postSlug,
          autoComplete: "off",
          spellCheck: "false",
          type: "text",
          className: "editor-post-url__input",
          onChange: newValue => {
            editPost({
              slug: 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) {
                setForceEmptyField(true);
              }
              return;
            }
            if (forceEmptyField) {
              setForceEmptyField(false);
            }
          },
          onBlur: event => {
            editPost({
              slug: (0, _url.cleanForSlug)(event.target.value)
            });
            if (forceEmptyField) {
              setForceEmptyField(false);
            }
          },
          help: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ExternalLink, {
            className: "editor-post-url__link",
            href: postLink,
            target: "_blank",
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "editor-post-url__link-prefix",
              children: permalinkPrefix
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "editor-post-url__link-slug",
              children: postSlug
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "editor-post-url__link-suffix",
              children: permalinkSuffix
            })]
          })
        }), !isEditable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
          className: "editor-post-url__link",
          href: postLink,
          target: "_blank",
          children: postLink
        })]
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map