diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index c2b2ac8826b20..c61afad6c29de 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';
@@ -69,7 +69,7 @@ export default function PostURL( { onClose } ) {
const { createNotice } = useDispatch( noticesStore );
const [ forceEmptyField, setForceEmptyField ] = useState( false );
const copyButtonRef = useCopyToClipboard( permalink, () => {
- createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+ createNotice( 'info', __( 'Copied Permalink to clipboard.' ), {
isDismissible: true,
type: 'snackbar',
} );
@@ -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 aca36566c0472..bc0bc622ac607 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 (
-
+
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index c815f89682cb2..164597cbad766 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -12,8 +12,6 @@
.editor-post-url__link {
direction: ltr;
word-break: break-word;
- margin-top: $grid-unit-05;
- color: $gray-700;
}
/* rtl:end:ignore */
@@ -21,12 +19,6 @@
font-weight: 600;
}
-// TODO: This might indicate a need to update the InputControl itself, as
-// there is no way currently to control the padding when adding prefix/suffix.
-.editor-post-url__input input.components-input-control__input {
- padding-inline-start: 0 !important;
-}
-
.editor-post-url__panel-toggle {
word-break: break-word;
}
diff --git a/test/e2e/specs/editor/various/sidebar-permalink.spec.js b/test/e2e/specs/editor/various/sidebar-permalink.spec.js
index a21cc13ea5c2e..528c77082109b 100644
--- a/test/e2e/specs/editor/various/sidebar-permalink.spec.js
+++ b/test/e2e/specs/editor/various/sidebar-permalink.spec.js
@@ -34,7 +34,7 @@ test.describe( 'Sidebar Permalink', () => {
.getByRole( 'textbox', { name: 'Add title' } )
.fill( 'aaaa (Updated)' );
await expect(
- page.getByRole( 'button', { name: 'Change link' } )
+ page.getByRole( 'button', { name: 'Change slug' } )
).toBeHidden();
} );
@@ -54,7 +54,7 @@ test.describe( 'Sidebar Permalink', () => {
.getByRole( 'textbox', { name: 'Add title' } )
.fill( 'aaaa (Updated)' );
await expect(
- page.getByRole( 'button', { name: 'Change link' } )
+ page.getByRole( 'button', { name: 'Change slug' } )
).toBeHidden();
} );
@@ -75,7 +75,7 @@ test.describe( 'Sidebar Permalink', () => {
.getByRole( 'textbox', { name: 'Add title' } )
.fill( 'aaaa (Updated)' );
await expect(
- page.getByRole( 'button', { name: 'Change link' } )
+ page.getByRole( 'button', { name: 'Change slug' } )
).toBeVisible();
} );
} );