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

Enhanced block editor for WordPress posts.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PostSlug;
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _url = require("@wordpress/url");
var _components = require("@wordpress/components");
var _check = _interopRequireDefault(require("./check"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PostSlugControl() {
  const postSlug = (0, _data.useSelect)(select => {
    return (0, _url.safeDecodeURIComponent)(select(_store.store).getEditedPostSlug());
  }, []);
  const {
    editPost
  } = (0, _data.useDispatch)(_store.store);
  const [forceEmptyField, setForceEmptyField] = (0, _element.useState)(false);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
    __next40pxDefaultSize: true,
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Slug'),
    autoComplete: "off",
    spellCheck: "false",
    value: forceEmptyField ? '' : postSlug,
    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);
      }
    },
    className: "editor-post-slug"
  });
}

/**
 * Renders the PostSlug component. It provide a control for editing the post slug.
 *
 * @return {Component} The component to be rendered.
 */
function PostSlug() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_check.default, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PostSlugControl, {})
  });
}
//# sourceMappingURL=index.js.map