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 + ) } + +
+ + } + /> + ) } ); 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(); } ); } );