From eda3f8e3c8ff4329a6ce53b7007b8e25829e032b Mon Sep 17 00:00:00 2001
From: JJ <jjjay@mac.com>
Date: Thu, 13 Jun 2024 11:35:52 +0200
Subject: [PATCH 1/2] update button to allow long permalinks to wrap

---
 packages/editor/src/components/post-url/style.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index a711402f1a82eb..6eeb5096855fcf 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -2,6 +2,11 @@
 	width: 100%;
 }
 
+.editor-post-url__panel-toggle {
+	display: block;
+	overflow-wrap: break-word;
+}
+
 .editor-post-url__panel-dialog .editor-post-url {
 	// sidebar width - popover padding - form margin
 	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;

From 2feaaf55e703457064f7065835ca68b78ec1cc55 Mon Sep 17 00:00:00 2001
From: JJ <jjjay@mac.com>
Date: Thu, 13 Jun 2024 13:32:26 +0200
Subject: [PATCH 2/2] update description and show post link instead of slug

---
 .../editor/src/components/post-url/index.js     | 12 ++++--------
 .../editor/src/components/post-url/panel.js     | 17 ++++++++++-------
 .../editor/src/components/post-url/style.scss   |  6 ------
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index c2b2ac8826b205..8c1191f56a05eb 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -10,7 +10,6 @@ import {
 	ExternalLink,
 	Button,
 	__experimentalInputControl as InputControl,
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
@@ -83,7 +82,9 @@ export default function PostURL( { onClose } ) {
 			<VStack spacing={ 3 }>
 				{ isEditable && (
 					<div>
-						{ __( 'Customize the last part of the URL. ' ) }
+						{ __(
+							'Customize the post name in the URL (in bold below). '
+						) }
 						<ExternalLink
 							href={ __(
 								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
@@ -97,16 +98,11 @@ export default function PostURL( { onClose } ) {
 					{ isEditable && (
 						<InputControl
 							__next40pxDefaultSize
-							prefix={
-								<InputControlPrefixWrapper>
-									/
-								</InputControlPrefixWrapper>
-							}
 							suffix={
 								<Button
 									icon={ copySmall }
 									ref={ copyButtonRef }
-									label={ __( 'Copy' ) }
+									label={ __( 'Copy Link' ) }
 								/>
 							}
 							label={ __( 'Link' ) }
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index 64ba1357221da8..b675b57596d683 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -5,7 +5,7 @@ import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { safeDecodeURIComponent } from '@wordpress/url';
+import { safeDecodeURI } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -59,18 +59,21 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
-		const { getCurrentPostId, getCurrentPost } = select( editorStore );
+	const { isFrontPage, postLink, permalink } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPost, getPermalink } =
+			select( editorStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const siteSettings = getEditedEntityRecord( 'root', 'site' );
 		const _id = getCurrentPostId();
+
 		return {
-			slug: select( editorStore ).getEditedPostSlug(),
 			isFrontPage: siteSettings?.page_on_front === _id,
 			postLink: getCurrentPost()?.link,
+			permalink: getPermalink(),
 		};
 	}, [] );
-	const decodedSlug = safeDecodeURIComponent( slug );
+
+	const decodedLink = safeDecodeURI( permalink );
 	return (
 		<Button
 			size="compact"
@@ -78,10 +81,10 @@ function PostURLToggle( { isOpen, onClick } ) {
 			variant="tertiary"
 			aria-expanded={ isOpen }
 			// translators: %s: Current post link.
-			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
+			aria-label={ sprintf( __( 'Change link: %s' ), decodedLink ) }
 			onClick={ onClick }
 		>
-			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
+			{ isFrontPage ? postLink : <>{ decodedLink }</> }
 		</Button>
 	);
 }
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index 6eeb5096855fcf..b7105179349863 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -25,9 +25,3 @@
 .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;
-}