Editor: Enhance post URL UI

WordPress · Aug 4, 2024 · 7cf488a · 7cf488a
1 parent 79b0752
commit 7cf488a
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 97 deletions.
diff --git 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,106 +69,94 @@ 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',
 		} );
 	} );
 	return (
 		<div className="editor-post-url">
 			<InspectorPopoverHeader
-				title={ __( 'Link' ) }
+				title={ __( 'Permalink' ) }
 				onClose={ onClose }
 			/>
-			<VStack spacing={ 3 }>
+			<VStack spacing={ 4 }>
+				<HStack>
+					<ExternalLink
+						className="editor-post-url__link"
+						href={ postLink }
+						target="_blank"
+					>
+						{ isEditable ? (
+							<>
+								<span className="editor-post-url__link-prefix">
+									{ permalinkPrefix }
+								</span>
+								<span className="editor-post-url__link-slug">
+									{ postSlug }
+								</span>
+								<span className="editor-post-url__link-suffix">
+									{ permalinkSuffix }
+								</span>
+							</>
+						) : (
+							postLink
+						) }
+					</ExternalLink>
+					<Button
+						size="compact"
+						icon={ copySmall }
+						ref={ copyButtonRef }
+						label={ __( 'Copy' ) }
+					/>
+				</HStack>
 				{ isEditable && (
-					<div>
-						{ __( 'Customize the last part of the URL. ' ) }
-						<ExternalLink
-							href={ __(
-								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-							) }
-						>
-							{ __( 'Learn more.' ) }
-						</ExternalLink>
-					</div>
-				) }
-				<div>
-					{ isEditable && (
-						<InputControl
-							__next40pxDefaultSize
-							prefix={
-								<InputControlPrefixWrapper>
-									/
-								</InputControlPrefixWrapper>
+					<InputControl
+						__next40pxDefaultSize
+						label={ __( 'Slug' ) }
+						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;
 							}
-							suffix={
-								<Button
-									icon={ copySmall }
-									ref={ copyButtonRef }
-									label={ __( 'Copy' ) }
-								/>
+							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. ' ) }
 								<ExternalLink
-									className="editor-post-url__link"
-									href={ postLink }
-									target="_blank"
+									href={ __(
+										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+									) }
 								>
-									<span className="editor-post-url__link-prefix">
-										{ permalinkPrefix }
-									</span>
-									<span className="editor-post-url__link-slug">
-										{ postSlug }
-									</span>
-									<span className="editor-post-url__link-suffix">
-										{ permalinkSuffix }
-									</span>
+									{ __( 'Learn more.' ) }
 								</ExternalLink>
-							}
-						/>
-					) }
-					{ ! isEditable && (
-						<ExternalLink
-							className="editor-post-url__link"
-							href={ postLink }
-							target="_blank"
-						>
-							{ postLink }
-						</ExternalLink>
-					) }
-				</div>
+							</>
+						}
+					/>
+				) }
 			</VStack>
 		</div>
 	);

diff --git 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 (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'Link' ) } ref={ setPopoverAnchor }>
+			<PostPanelRow label={ __( 'Permalink' ) } ref={ setPopoverAnchor }>
 				<Dropdown
 					popoverProps={ popoverProps }
 					className="editor-post-url__panel-dropdown"
@@ -86,8 +86,8 @@ function PostURLToggle( { isOpen, onClick } ) {
 			className="editor-post-url__panel-toggle"
 			variant="tertiary"
 			aria-expanded={ isOpen }
-			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
+			// translators: %s: Current post slug.
+			aria-label={ sprintf( __( 'Change slug: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
 			<Truncate numberOfLines={ 1 }>

diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
@@ -12,21 +12,13 @@
 .editor-post-url__link {
 	direction: ltr;
 	word-break: break-word;
-	margin-top: $grid-unit-05;
-	color: $gray-700;
 }
 /* rtl:end:ignore */
 
 .editor-post-url__link-slug {
 	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;
 }