diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index c2b2ac8826b205..f4b18c4bb0b095 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -10,7 +10,7 @@ import {
ExternalLink,
Button,
__experimentalInputControl as InputControl,
- __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+ __experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { store as noticesStore } from '@wordpress/notices';
@@ -77,98 +77,86 @@ export default function PostURL( { onClose } ) {
return (
-
+
+
+
+ { isEditable ? (
+ <>
+
+ { permalinkPrefix }
+
+
+ { postSlug }
+
+
+ { permalinkSuffix }
+
+ >
+ ) : (
+ postLink
+ ) }
+
+
+
{ isEditable && (
-
- { __( 'Customize the last part of the URL. ' ) }
-
- { __( 'Learn more.' ) }
-
-
- ) }
-
- { isEditable && (
-
- /
-
+ {
+ 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;
}
- suffix={
-
+ if ( forceEmptyField ) {
+ setForceEmptyField( false );
}
- label={ __( 'Link' ) }
- hideLabelFromVision
- value={ forceEmptyField ? '' : postSlug }
- autoComplete="off"
- spellCheck="false"
- type="text"
- className="editor-post-url__input"
- 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: cleanForSlug( event.target.value ),
- } );
- if ( forceEmptyField ) {
- setForceEmptyField( false );
- }
- } }
- help={
+ } }
+ onBlur={ ( event ) => {
+ editPost( {
+ slug: cleanForSlug( event.target.value ),
+ } );
+ if ( forceEmptyField ) {
+ setForceEmptyField( false );
+ }
+ } }
+ help={
+ <>
+ { __( 'The last part of the URL. ' ) }
-
- { permalinkPrefix }
-
-
- { postSlug }
-
-
- { permalinkSuffix }
-
+ { __( 'Learn more.' ) }
- }
- />
- ) }
- { ! isEditable && (
-
- { postLink }
-
- ) }
-
+ >
+ }
+ />
+ ) }
);
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index aca36566c04727..77d1b797a491ad 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -44,7 +44,7 @@ export default function PostURLPanel() {
return (
-
+