From f2cef4a9744418174de32b9974f347a839041511 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 17 Jul 2024 15:55:39 +0200
Subject: [PATCH 1/5] Improve PostURL terminology and accessibility.

---
 .../editor/src/components/post-url/index.js   | 145 ++++++++++--------
 .../editor/src/components/post-url/panel.js   |  85 ++++++----
 .../editor/src/components/post-url/style.scss |  24 ++-
 3 files changed, 155 insertions(+), 99 deletions(-)

diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index 8d072fa2eeb5d2..1f86bade40279e 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -17,7 +17,7 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { copySmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -70,87 +70,96 @@ 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',
 		} );
 	} );
+	const postUrlSlugDescriptionId =
+		'editor-post-url__slug-descriotion-' + useInstanceId( PostURL );
+
 	return (
 		<div className="editor-post-url">
 			<InspectorPopoverHeader
-				title={ __( 'Link' ) }
+				title={ __( 'Slug' ) }
 				onClose={ onClose }
 			/>
 			<VStack spacing={ 3 }>
 				{ isEditable && (
-					<div>
-						{ createInterpolateElement(
-							__(
-								'Customize the last part of the URL. <a>Learn more.</a>'
-							),
-							{
-								a: (
-									<ExternalLink
-										href={ __(
-											'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-										) }
-									/>
-								),
-							}
-						) }
-					</div>
+					<p className="editor-post-url__intro">
+						<span id={ postUrlSlugDescriptionId }>
+							{ __(
+								'Customize the last part of the Permalink.'
+							) }
+						</span>
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+							) }
+						>
+							{ __( 'Learn more.' ) }
+						</ExternalLink>
+					</p>
 				) }
 				<div>
 					{ isEditable && (
-						<InputControl
-							__next40pxDefaultSize
-							prefix={
-								<InputControlPrefixWrapper>
-									/
-								</InputControlPrefixWrapper>
-							}
-							suffix={
-								<InputControlSuffixWrapper variant="control">
-									<Button
-										icon={ copySmall }
-										ref={ copyButtonRef }
-										size="small"
-										label="Copy"
-									/>
-								</InputControlSuffixWrapper>
-							}
-							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;
+						<>
+							<InputControl
+								__next40pxDefaultSize
+								prefix={
+									<InputControlPrefixWrapper>
+										/
+									</InputControlPrefixWrapper>
 								}
-								if ( forceEmptyField ) {
-									setForceEmptyField( false );
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											icon={ copySmall }
+											ref={ copyButtonRef }
+											size="small"
+											label="Copy"
+										/>
+									</InputControlSuffixWrapper>
 								}
-							} }
-							onBlur={ ( event ) => {
-								editPost( {
-									slug: cleanForSlug( event.target.value ),
-								} );
-								if ( forceEmptyField ) {
-									setForceEmptyField( false );
-								}
-							} }
-							help={
+								label={ __( 'Slug' ) }
+								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 );
+									}
+								} }
+								aria-describedby={ postUrlSlugDescriptionId }
+							/>
+							<p className="editor-post-url__permalink">
+								<span className="editor-post-url__permalink-visual-label">
+									{ __( 'Permalink:' ) }
+								</span>
 								<ExternalLink
 									className="editor-post-url__link"
 									href={ postLink }
@@ -166,8 +175,8 @@ export default function PostURL( { onClose } ) {
 										{ permalinkSuffix }
 									</span>
 								</ExternalLink>
-							}
-						/>
+							</p>
+						</>
 					) }
 					{ ! isEditable && (
 						<ExternalLink
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index aca36566c04727..a824f3d92d24e4 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	Dropdown,
 	Button,
+	ExternalLink,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -26,6 +27,20 @@ import { store as editorStore } from '../../store';
  * @return {JSX.Element} The rendered PostURLPanel component.
  */
 export default function PostURLPanel() {
+	const { isFrontPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const _id = getCurrentPostId();
+		return {
+			isFrontPage: siteSettings?.page_on_front === _id,
+		};
+	}, [] );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -42,41 +57,38 @@ export default function PostURLPanel() {
 		[ popoverAnchor ]
 	);
 
+	const label = isFrontPage ? __( 'Link' ) : __( 'Slug' );
+
 	return (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'Link' ) } ref={ setPopoverAnchor }>
-				<Dropdown
-					popoverProps={ popoverProps }
-					className="editor-post-url__panel-dropdown"
-					contentClassName="editor-post-url__panel-dialog"
-					focusOnMount
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
-					) }
-					renderContent={ ( { onClose } ) => (
-						<PostURL onClose={ onClose } />
-					) }
-				/>
+			<PostPanelRow label={ label } ref={ setPopoverAnchor }>
+				{ ! isFrontPage && (
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="editor-post-url__panel-dropdown"
+						contentClassName="editor-post-url__panel-dialog"
+						focusOnMount
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<PostURLToggle
+								isOpen={ isOpen }
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ ( { onClose } ) => (
+							<PostURL onClose={ onClose } />
+						) }
+					/>
+				) }
+				{ isFrontPage && <FrontPageLink /> }
 			</PostPanelRow>
 		</PostURLCheck>
 	);
 }
 
 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 } = useSelect( ( select ) => {
 		return {
 			slug: select( editorStore ).getEditedPostSlug(),
-			isFrontPage: siteSettings?.page_on_front === _id,
-			postLink: getCurrentPost()?.link,
 		};
 	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
@@ -90,9 +102,26 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			<Truncate numberOfLines={ 1 }>
-				{ isFrontPage ? postLink : `/${ decodedSlug }` }
-			</Truncate>
+			<Truncate numberOfLines={ 1 }>{ decodedSlug }</Truncate>
 		</Button>
 	);
 }
+
+function FrontPageLink() {
+	const { postLink } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		return {
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
+
+	return (
+		<ExternalLink
+			className="editor-post-url__front-page-link"
+			href={ postLink }
+			target="_blank"
+		>
+			{ postLink }
+		</ExternalLink>
+	);
+}
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index c815f89682cb2d..b6e9c510d2bc4b 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -9,14 +9,19 @@
 }
 
 /* rtl:begin:ignore */
-.editor-post-url__link {
+.editor-post-url__link,
+.editor-post-url__front-page-link {
 	direction: ltr;
 	word-break: break-word;
-	margin-top: $grid-unit-05;
-	color: $gray-700;
 }
 /* rtl:end:ignore */
 
+.editor-post-url__front-page-link {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
+
+
 .editor-post-url__link-slug {
 	font-weight: 600;
 }
@@ -30,3 +35,16 @@
 .editor-post-url__panel-toggle {
 	word-break: break-word;
 }
+
+.editor-post-url__intro {
+	margin-bottom: 0;
+}
+
+.editor-post-url__permalink {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+
+	&-visual-label {
+		display: block;
+	}
+}

From f259d6a791de5f5eefa027e3f980618e2c8d15de Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 10 Sep 2024 15:57:08 +0200
Subject: [PATCH 2/5] Restore createInterpolateElement after rebase.

---
 .../editor/src/components/post-url/index.js   | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index 1f86bade40279e..55e2f953cf00a7 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -87,18 +87,21 @@ export default function PostURL( { onClose } ) {
 			<VStack spacing={ 3 }>
 				{ isEditable && (
 					<p className="editor-post-url__intro">
-						<span id={ postUrlSlugDescriptionId }>
-							{ __(
-								'Customize the last part of the Permalink.'
-							) }
-						</span>
-						<ExternalLink
-							href={ __(
-								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
-							) }
-						>
-							{ __( 'Learn more.' ) }
-						</ExternalLink>
+						{ createInterpolateElement(
+							__(
+								'<span>Customize the last part of the URL.</span> <a>Learn more.</a>'
+							),
+							{
+								span: <span id={ postUrlSlugDescriptionId } />,
+								a: (
+									<ExternalLink
+										href={ __(
+											'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+										) }
+									/>
+								),
+							}
+						) }
 					</p>
 				) }
 				<div>

From 3b181284d15dfd86cfbf4f874b5a806f01c074d9 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 10 Sep 2024 15:59:08 +0200
Subject: [PATCH 3/5] Remove value truncation after PR 64053.

---
 packages/editor/src/components/post-url/panel.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index a824f3d92d24e4..a5d3ddeb77f846 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -3,12 +3,7 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	ExternalLink,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { Dropdown, Button, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
@@ -102,7 +97,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			<Truncate numberOfLines={ 1 }>{ decodedSlug }</Truncate>
+			<>{ decodedSlug }</>
 		</Button>
 	);
 }

From 85579bf7ad7ce759752323f4d8f6db475679a4eb Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 4 Oct 2024 14:19:12 +0200
Subject: [PATCH 4/5] Replace term URL with Permalink.

---
 packages/editor/src/components/post-url/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index 55e2f953cf00a7..c7dc5712dcac4a 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -89,7 +89,7 @@ export default function PostURL( { onClose } ) {
 					<p className="editor-post-url__intro">
 						{ createInterpolateElement(
 							__(
-								'<span>Customize the last part of the URL.</span> <a>Learn more.</a>'
+								'<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'
 							),
 							{
 								span: <span id={ postUrlSlugDescriptionId } />,

From 6c16cec0b33d933861d4383e28f245516a9954ea Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 14 Oct 2024 12:08:50 +0200
Subject: [PATCH 5/5] Reduce post url intro text top margin.

---
 packages/editor/src/components/post-url/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index b6e9c510d2bc4b..f8a70f5fdf760b 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -37,7 +37,7 @@
 }
 
 .editor-post-url__intro {
-	margin-bottom: 0;
+	margin: 0;
 }
 
 .editor-post-url__permalink {