update layout

WordPress · Oct 23, 2024 · 075a2b0 · 075a2b0
1 parent f53239c
commit 075a2b0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 19 deletions.
diff --git a/packages/fields/src/fields/slug/index.ts b/packages/fields/src/fields/slug/index.ts
@@ -14,7 +14,7 @@ import SlugView from './slug-view';
 const slugField: Field< BasePost > = {
 	id: 'slug',
 	type: 'text',
-	label: __( 'Link' ),
+	label: __( 'Slug' ),
 	getValue: ( { item } ) => item.slug,
 	Edit: SlugEdit,
 	render: SlugView,

diff --git a/packages/fields/src/fields/slug/slug-edit.tsx b/packages/fields/src/fields/slug/slug-edit.tsx
@@ -9,7 +9,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { copySmall } from '@wordpress/icons';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
@@ -61,19 +61,24 @@ const SlugEdit = ( {
 	const { createNotice } = useDispatch( noticesStore );
 
 	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-description-' + useInstanceId( SlugEdit );
+
 	return (
 		<fieldset className="fields-controls__slug">
 			{ isEditable && (
 				<VStack>
 					<VStack spacing="0px">
 						<span>
-							{ __( 'Customize the last part of the URL.' ) }
+							{ __(
+								'Customize the last part of the Permalink.'
+							) }
 						</span>
 						<ExternalLink href="https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink">
 							{ __( 'Learn more' ) }
@@ -109,19 +114,29 @@ const SlugEdit = ( {
 								onChangeControl( originalSlug.current );
 							}
 						} }
+						aria-describedby={ postUrlSlugDescriptionId }
 						help={
-							<ExternalLink
-								className="fields-controls__slug-help"
-								href={ permalink }
-							>
-								<span>{ permalinkPrefix }</span>
-								<span className="fields-controls__slug-help-slug">
-									{ slugToDisplay }
-								</span>
-								<span className="fields-controls__slug-help-suffix">
-									{ permalinkSuffix }
-								</span>
-							</ExternalLink>
+							<>
+								<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>
+							</>
 						}
 					/>
 				</VStack>

diff --git a/packages/fields/src/fields/slug/style.scss b/packages/fields/src/fields/slug/style.scss
@@ -7,11 +7,15 @@
 		padding-inline-start: 0 !important;
 	}
 
+	.fields-controls__slug-help-link {
+		word-break: break-word;
+	}
+
 	.fields-controls__slug-help {
-		color: $gray-700;
+		display: flex;
+		flex-direction: column;
 
-		.fields-controls__slug-help-slug,
-		.fields-controls__slug-help-suffix {
+		.fields-controls__slug-help-slug {
 			font-weight: 600;
 		}
 	}