From 1872355dd54e6dd06e5aa1451fb6882c8bf8ac11 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Wed, 31 Jul 2024 11:16:25 +0900
Subject: [PATCH] Editor: Enhance post URL UI

---
 .../editor/src/components/post-url/index.js   | 158 ++++++++----------
 .../editor/src/components/post-url/panel.js   |  24 +--
 .../editor/src/components/post-url/style.scss |   8 -
 3 files changed, 82 insertions(+), 108 deletions(-)

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 (
 		<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
index be32b40eaf1046..15804db6f30723 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -3,10 +3,13 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { Dropdown, Button } from '@wordpress/components';
+import {
+	Dropdown,
+	Button,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -40,7 +43,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"
@@ -59,19 +62,10 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
-		const { getCurrentPostId, getCurrentPost } = select( editorStore );
-		const { getEditedEntityRecord, canUser } = select( coreStore );
-		const siteSettings = canUser( 'read', {
-			kind: 'root',
-			name: 'site',
-		} )
-			? getEditedEntityRecord( 'root', 'site' )
-			: undefined;
-		const _id = getCurrentPostId();
+	const { slug, postLink } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
 		return {
 			slug: select( editorStore ).getEditedPostSlug(),
-			isFrontPage: siteSettings?.page_on_front === _id,
 			postLink: getCurrentPost()?.link,
 		};
 	}, [] );
@@ -86,7 +80,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
+			<Truncate numberOfLines={ 1 }>{ postLink }</Truncate>
 		</Button>
 	);
 }
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index c815f89682cb2d..164597cbad7668 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;
 }