diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js index 760f71109911c..c6305b6311066 100644 --- a/packages/edit-post/src/components/sidebar/post-link/index.js +++ b/packages/edit-post/src/components/sidebar/post-link/index.js @@ -53,38 +53,46 @@ function PostLink( { onToggle={ onTogglePanel } > { isEditable && ( - { - 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 ) { +
+ { + 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: true, + forceEmptyField: false, } ); } - return; - } - if ( forceEmptyField ) { - setState( { - forceEmptyField: false, - } ); - } - } } - onBlur={ ( event ) => { - editPermalink( cleanForSlug( event.target.value ) ); - if ( forceEmptyField ) { - setState( { - forceEmptyField: false, - } ); - } - } } - /> + } } + /> +

+ { __( 'The last part of the URL. ' ) } + + { __( 'Read about permalinks' ) } + +

+
) }

{ __( 'Preview' ) }