feedback

WordPress · Apr 11, 2024 · f56888a · f56888a
1 parent 28763e0
commit f56888a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
@@ -97,6 +97,7 @@ export default function PostURL( { onClose } ) {
 							autoComplete="off"
 							spellCheck="false"
 							type="text"
+							className="editor-post-url__input"
 							onChange={ ( newValue ) => {
 								editPost( { slug: newValue } );
 								// When we delete the field the permalink gets
@@ -121,29 +122,34 @@ export default function PostURL( { onClose } ) {
 									setForceEmptyField( false );
 								}
 							} }
+							help={
+								<ExternalLink
+									className="editor-post-url__link"
+									href={ postLink }
+									target="_blank"
+								>
+									<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>
+								</ExternalLink>
+							}
 						/>
 					) }
-					<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>
+					{ ! 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/style.scss b/packages/editor/src/components/post-url/style.scss
@@ -22,9 +22,16 @@
 	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;
+}
diff --git 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 URL' } )
+			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 URL' } )
+			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 URL' } )
+			page.getByRole( 'button', { name: 'Change slug' } )
 		).toBeVisible();
 	} );
 } );