Quick Edit - Slug Field: improve slug preview

WordPress · Oct 29, 2024 · d871796 · d871796
1 parent 648c458
commit d871796
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/packages/fields/src/fields/slug/slug-edit.tsx b/packages/fields/src/fields/slug/slug-edit.tsx
@@ -21,6 +21,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
+import { getSlug } from './utils';
 
 const SlugEdit = ( {
 	field,
@@ -29,7 +30,7 @@ const SlugEdit = ( {
 }: DataFormControlProps< BasePost > ) => {
 	const { id } = field;
 
-	const slug = field.getValue( { item: data } ) ?? '';
+	const slug = field.getValue( { item: data } ) || getSlug( data );
 	const permalinkTemplate = data.permalink_template || '';
 	const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 	const [ prefix, suffix ] = permalinkTemplate.split(
@@ -115,30 +116,26 @@ const SlugEdit = ( {
 							}
 						} }
 						aria-describedby={ postUrlSlugDescriptionId }
-						help={
-							<>
-								<p className="fields-controls__slug-help">
-									<span className="fields-controls__slug-help-visual-label">
-										{ __( 'Permalink:' ) }
-									</span>
-									<ExternalLink
-										className="fields-controls__slug-help-link"
-										href={ permalink }
-									>
-										<span className="fields-controls__slug-help-prefix">
-											{ permalinkPrefix }
-										</span>
-										<span className="fields-controls__slug-help-slug">
-											{ slugToDisplay }
-										</span>
-										<span className="fields-controls__slug-help-suffix">
-											{ permalinkSuffix }
-										</span>
-									</ExternalLink>
-								</p>
-							</>
-						}
 					/>
+					<div className="fields-controls__slug-help">
+						<span className="fields-controls__slug-help-visual-label">
+							{ __( 'Permalink:' ) }
+						</span>
+						<ExternalLink
+							className="fields-controls__slug-help-link"
+							href={ permalink }
+						>
+							<span className="fields-controls__slug-help-prefix">
+								{ permalinkPrefix }
+							</span>
+							<span className="fields-controls__slug-help-slug">
+								{ slugToDisplay }
+							</span>
+							<span className="fields-controls__slug-help-suffix">
+								{ permalinkSuffix }
+							</span>
+						</ExternalLink>
+					</div>
 				</VStack>
 			) }
 			{ ! isEditable && (

diff --git a/packages/fields/src/fields/slug/slug-view.tsx b/packages/fields/src/fields/slug/slug-view.tsx
@@ -7,9 +7,10 @@ import { useEffect, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
+import { getSlug } from './utils';
 
 const SlugView = ( { item }: { item: BasePost } ) => {
-	const slug = item.slug;
+	const slug = item ? getSlug( item ) : '';
 	const originalSlugRef = useRef( slug );
 
 	useEffect( () => {
@@ -20,7 +21,7 @@ const SlugView = ( { item }: { item: BasePost } ) => {
 
 	const slugToDisplay = slug || originalSlugRef.current;
 
-	return `/${ slugToDisplay ?? '' }`;
+	return `${ slugToDisplay ?? '' }`;
 };
 
 export default SlugView;
diff --git a/packages/fields/src/fields/slug/utils.ts b/packages/fields/src/fields/slug/utils.ts
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { cleanForSlug } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+export const getSlug = ( item: BasePost ) => {
+	return (
+		item.slug || cleanForSlug( getItemTitle( item ) ) || item.id.toString()
+	);
+};