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

Enhanced block editor for WordPress posts.

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

/**
 * WordPress dependencies
 */
import { withDispatch, withSelect } from '@wordpress/data';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { withInstanceId, compose } from '@wordpress/compose';
import { safeDecodeURIComponent } from '@wordpress/url';
/**
 * Internal dependencies
 */

import PostSlugCheck from './check';
import { cleanForSlug } from '../../utils/url';
export class PostSlug extends Component {
  constructor({
    postSlug,
    postTitle,
    postID
  }) {
    super(...arguments);
    this.state = {
      editedSlug: safeDecodeURIComponent(postSlug) || cleanForSlug(postTitle) || postID
    };
    this.setSlug = this.setSlug.bind(this);
  }

  setSlug(event) {
    const {
      postSlug,
      onUpdateSlug
    } = this.props;
    const {
      value
    } = event.target;
    const editedSlug = cleanForSlug(value);

    if (editedSlug === postSlug) {
      return;
    }

    onUpdateSlug(editedSlug);
  }

  render() {
    const {
      instanceId
    } = this.props;
    const {
      editedSlug
    } = this.state;
    const inputId = 'editor-post-slug-' + instanceId;
    return createElement(PostSlugCheck, null, createElement("label", {
      htmlFor: inputId
    }, __('Slug')), createElement("input", {
      type: "text",
      id: inputId,
      value: editedSlug,
      onChange: event => this.setState({
        editedSlug: event.target.value
      }),
      onBlur: this.setSlug,
      className: "editor-post-slug__input"
    }));
  }

}
export default compose([withSelect(select => {
  const {
    getCurrentPost,
    getEditedPostAttribute
  } = select('core/editor');
  const {
    id
  } = getCurrentPost();
  return {
    postSlug: getEditedPostAttribute('slug'),
    postTitle: getEditedPostAttribute('title'),
    postID: id
  };
}), withDispatch(dispatch => {
  const {
    editPost
  } = dispatch('core/editor');
  return {
    onUpdateSlug(slug) {
      editPost({
        slug
      });
    }

  };
}), withInstanceId])(PostSlug);
//# sourceMappingURL=index.js.map