-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
525 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { withDispatch, withSelect } from '@wordpress/data'; | ||
| import { Component, compose } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Button } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal Dependencies | ||
| */ | ||
| import './style.scss'; | ||
|
|
||
| class PostPermalinkEditor extends Component { | ||
| constructor( { permalinkParts } ) { | ||
| super( ...arguments ); | ||
|
|
||
| this.state = { | ||
| editedPostName: permalinkParts.postName, | ||
| }; | ||
|
|
||
| this.onSavePermalink = this.onSavePermalink.bind( this ); | ||
| } | ||
|
|
||
| onSavePermalink( event ) { | ||
| const postName = this.state.editedPostName.replace( /\s+/g, '-' ); | ||
|
|
||
| event.preventDefault(); | ||
|
|
||
| this.props.onSave(); | ||
|
|
||
| if ( ! postName || postName === this.props.postName ) { | ||
| return; | ||
| } | ||
|
|
||
| this.props.editPost( { | ||
| slug: postName, | ||
| } ); | ||
|
|
||
| this.setState( { | ||
| editedPostName: postName, | ||
| } ); | ||
| } | ||
|
|
||
| render() { | ||
| const { prefix, suffix } = this.props.permalinkParts; | ||
| const { editedPostName } = this.state; | ||
|
|
||
| /* eslint-disable jsx-a11y/no-autofocus */ | ||
| // Autofocus is allowed here, as this mini-UI is only loaded when the user clicks to open it. | ||
| return ( | ||
| <form | ||
| className="editor-post-permalink-editor" | ||
| onSubmit={ this.onSavePermalink } | ||
| > | ||
| <span> | ||
| <span className="editor-post-permalink-editor__prefix"> | ||
| { prefix } | ||
| </span> | ||
| <input | ||
| className="editor-post-permalink-editor__edit" | ||
| aria-label={ __( 'Edit post permalink' ) } | ||
| value={ editedPostName } | ||
| onChange={ ( event ) => this.setState( { editedPostName: event.target.value } ) } | ||
| required | ||
| autoFocus | ||
| /> | ||
| <span className="editor-post-permalink-editor__suffix"> | ||
| { suffix } | ||
| </span> | ||
| ‎ | ||
| </span> | ||
| <Button | ||
| className="editor-post-permalink-editor__save" | ||
| isLarge | ||
| onClick={ this.onSavePermalink } | ||
| > | ||
| { __( 'OK' ) } | ||
| </Button> | ||
| </form> | ||
| ); | ||
| /* eslint-enable jsx-a11y/no-autofocus */ | ||
| } | ||
| } | ||
|
|
||
| export default compose( [ | ||
| withSelect( ( select ) => { | ||
| const { getPermalinkParts } = select( 'core/editor' ); | ||
| return { | ||
| permalinkParts: getPermalinkParts(), | ||
| }; | ||
| } ), | ||
| withDispatch( ( dispatch ) => { | ||
| const { editPost } = dispatch( 'core/editor' ); | ||
| return { editPost }; | ||
| } ), | ||
| ] )( PostPermalinkEditor ); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,134 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Component } from '@wordpress/element'; | ||
| import { withDispatch, withSelect } from '@wordpress/data'; | ||
| import { Component, compose } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Dashicon, ClipboardButton, Button } from '@wordpress/components'; | ||
| import { Dashicon, Button, ClipboardButton, Tooltip } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal Dependencies | ||
| */ | ||
| import './style.scss'; | ||
| import { isEditedPostNew, getEditedPostAttribute } from '../../store/selectors'; | ||
| import PostPermalinkEditor from './editor.js'; | ||
| import { getWPAdminURL } from '../../utils/url'; | ||
|
|
||
| class PostPermalink extends Component { | ||
| constructor() { | ||
| super( ...arguments ); | ||
|
|
||
| this.addVisibilityCheck = this.addVisibilityCheck.bind( this ); | ||
| this.onVisibilityChange = this.onVisibilityChange.bind( this ); | ||
|
|
||
| this.state = { | ||
| showCopyConfirmation: false, | ||
| iconClass: '', | ||
| isEditingPermalink: false, | ||
| }; | ||
| this.onCopy = this.onCopy.bind( this ); | ||
| this.onFinishCopy = this.onFinishCopy.bind( this ); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| clearTimeout( this.dismissCopyConfirmation ); | ||
| addVisibilityCheck() { | ||
| window.addEventListener( 'visibilitychange', this.onVisibilityChange ); | ||
| } | ||
|
|
||
| onVisibilityChange() { | ||
| const { isEditable, refreshPost } = this.props; | ||
| // If the user just returned after having clicked the "Change Permalinks" button, | ||
| // fetch a new copy of the post from the server, just in case they enabled permalinks. | ||
| if ( ! isEditable && 'visible' === document.visibilityState ) { | ||
| refreshPost(); | ||
| } | ||
| } | ||
|
|
||
| onCopy() { | ||
| this.setState( { | ||
| showCopyConfirmation: true, | ||
| } ); | ||
| componentDidUpdate( prevProps, prevState ) { | ||
| // If we've just stopped editing the permalink, focus on the new permalink. | ||
| if ( prevState.isEditingPermalink && ! this.state.isEditingPermalink ) { | ||
| this.permalinkButton.focus(); | ||
| } | ||
| } | ||
|
|
||
| onFinishCopy() { | ||
| this.setState( { | ||
| showCopyConfirmation: false, | ||
| } ); | ||
| componentWillUnmount() { | ||
| window.removeEventListener( 'visibilitychange', this.addVisibilityCheck ); | ||
| } | ||
|
|
||
| render() { | ||
| const { isNew, link } = this.props; | ||
| if ( isNew || ! link ) { | ||
| const { isNew, previewLink, isEditable, samplePermalink } = this.props; | ||
| const { iconClass, isEditingPermalink } = this.state; | ||
|
|
||
| if ( isNew || ! previewLink ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="editor-post-permalink"> | ||
| <Dashicon icon="admin-links" /> | ||
| <Tooltip text={ __( 'Copy the permalink to your clipboard' ) }> | ||
| <ClipboardButton | ||
| className="editor-post-permalink__copy" | ||
| text={ samplePermalink } | ||
| onCopy={ () => this.setState( { iconClass: 'is-copied' } ) } | ||
| > | ||
| <Dashicon icon="admin-links" className={ iconClass } /> | ||
| </ClipboardButton> | ||
| </Tooltip> | ||
|
|
||
| <span className="editor-post-permalink__label">{ __( 'Permalink:' ) }</span> | ||
| <Button className="editor-post-permalink__link" href={ link } target="_blank"> | ||
| { decodeURI( link ) } | ||
| </Button> | ||
| <ClipboardButton | ||
| className="button" | ||
| text={ link } | ||
| onCopy={ this.onCopy } | ||
| onFinishCopy={ this.onFinishCopy } | ||
| > | ||
| { this.state.showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) } | ||
| </ClipboardButton> | ||
|
|
||
| { ! isEditingPermalink && | ||
| <Button | ||
| className="editor-post-permalink__link" | ||
| href={ previewLink } | ||
| target="_blank" | ||
| ref={ ( permalinkButton ) => this.permalinkButton = permalinkButton } | ||
| > | ||
| { decodeURI( samplePermalink ) } | ||
| ‎ | ||
| </Button> | ||
| } | ||
|
|
||
| { isEditingPermalink && | ||
| <PostPermalinkEditor | ||
| onSave={ () => this.setState( { isEditingPermalink: false } ) } | ||
| /> | ||
| } | ||
|
|
||
| { isEditable && ! isEditingPermalink && | ||
| <Button | ||
| className="editor-post-permalink__edit" | ||
| isLarge | ||
| onClick={ () => this.setState( { isEditingPermalink: true } ) } | ||
| > | ||
| { __( 'Edit' ) } | ||
| </Button> | ||
| } | ||
|
|
||
| { ! isEditable && | ||
| <Button | ||
| className="editor-post-permalink__change" | ||
| isLarge | ||
| href={ getWPAdminURL( 'options-permalink.php' ) } | ||
| onClick={ this.addVisibilityCheck } | ||
| target="_blank" | ||
| > | ||
| { __( 'Change Permalinks' ) } | ||
| </Button> | ||
| } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default connect( | ||
| ( state ) => { | ||
| export default compose( [ | ||
| withSelect( ( select ) => { | ||
| const { isEditedPostNew, isPermalinkEditable, getEditedPostPreviewLink, getPermalink } = select( 'core/editor' ); | ||
| return { | ||
| isNew: isEditedPostNew( state ), | ||
| link: getEditedPostAttribute( state, 'link' ), | ||
| isNew: isEditedPostNew(), | ||
| previewLink: getEditedPostPreviewLink(), | ||
| isEditable: isPermalinkEditable(), | ||
| samplePermalink: getPermalink(), | ||
| }; | ||
| } | ||
| )( PostPermalink ); | ||
| } ), | ||
| withDispatch( ( dispatch ) => { | ||
| const { refreshPost } = dispatch( 'core/editor' ); | ||
| return { refreshPost }; | ||
| } ), | ||
| ] )( PostPermalink ); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.