Fix/issue 12033 url label (#12959)

* merge from upstream

* local save

* darked focus state outline for block lists

* sasve

* updated permalink labelling

* reverted package lock

* updated label and added helper link

* post link text update

* Update index.js

packages/edit-post/src/components/sidebar/post-link/index.js

@@ -53,38 +53,46 @@ function PostLink( {
 			onToggle={ onTogglePanel }
 		>
 			{ isEditable && (
-				<TextControl
-					label={ __( 'URL' ) }
-					value={ forceEmptyField ? '' : currentSlug }
-					onChange={ ( newValue ) => {
-						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 ) {
+				<div className="editor-post-link">
+					<TextControl
+						label={ __( 'URL Slug' ) }
+						value={ forceEmptyField ? '' : currentSlug }
+						onChange={ ( newValue ) => {
+							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,
-							} );
-						}
-					} }
-				/>
+						} }
+					/>
+					<p>
+						{ __( 'The last part of the URL. ' ) }
+						<ExternalLink href="https://codex.wordpress.org/Posts_Add_New_Screen">
+							{ __( 'Read about permalinks' ) }
+						</ExternalLink>
+					</p>
+				</div>
 			) }
 			<p className="edit-post-post-link__preview-label">
 				{ __( 'Preview' ) }