Data View - Page view: Add slug field control

docs/manifest.json

@@ -1697,6 +1697,12 @@
 		"markdown_source": "../packages/eslint-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/fields",
+		"slug": "packages-fields",
+		"markdown_source": "../packages/fields/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/format-library",
 		"slug": "packages-format-library",

packages/edit-site/package.json

@@ -48,6 +48,7 @@
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
+		"@wordpress/fields": "file:../fields",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

packages/edit-site/src/components/post-edit/index.js

@@ -60,8 +60,24 @@ function PostEditForm( { postType, postId } ) {
 	);
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
+		fields: [
+			'title',
+			'status',
+			'date',
+			'author',
+			'slug',
+			'comment_status',
+		],
 	};
+
+	const fieldsWithBulkEditSupport = [
+		'title',
+		'status',
+		'date',
+		'author',
+		'comment_status',
+	];
+
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
 			if (
@@ -95,7 +111,16 @@ function PostEditForm( { postType, postId } ) {
 			<DataForm
 				data={ ids.length === 1 ? record : multiEdits }
 				fields={ fields }
-				form={ form }
+				form={
+					ids.length === 1
+						? form
+						: {
+								...form,
+								fields: form.fields.filter( ( field ) =>
+									fieldsWithBulkEditSupport.includes( field )
+								),
+						  }
+				}
 				onChange={ onChange }
 			/>
 		</VStack>

packages/edit-site/src/components/post-fields/index.js

@@ -26,6 +26,7 @@ import {
 import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { slugField } from '@wordpress/fields';
 
 /**
  * Internal dependencies
@@ -369,6 +370,7 @@ function usePostFields( viewType ) {
 					return <time>{ getFormattedDate( item.date ) }</time>;
 				},
 			},
+			slugField,
 			{
 				id: 'comment_status',
 				label: __( 'Discussion' ),

packages/edit-site/src/style.scss

@@ -1,4 +1,5 @@
 @import "../../dataviews/src/style.scss";
+@import "../../fields/src/styles.scss";
 
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";

packages/fields/README.md

@@ -50,6 +50,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+### slugField
+
+Undocumented declaration.
+
 ### titleField
 
 Undocumented declaration.

packages/fields/package.json

@@ -9,7 +9,6 @@
 		"gutenberg",
 		"dataviews"
 	],
-	"private": true,
 	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/fields/README.md",
 	"repository": {
 		"type": "git",

packages/fields/src/fields/index.ts

@@ -1,2 +1,3 @@
+export { default as slugField } from './slug';
 export { default as titleField } from './title';
 export { default as orderField } from './order';

packages/fields/src/fields/slug/index.ts

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { __ } from '@wordpress/i18n';
+import SlugEdit from './slug-edit';
+import SlugView from './slug-view';
+
+const slugField: Field< BasePost > = {
+	id: 'slug',
+	label: __( 'Link' ),
+	getValue: ( { item } ) => item.slug,
+	Edit: SlugEdit,
+	render: SlugView,
+};
+
+export default slugField;

packages/fields/src/fields/slug/slug-edit.tsx

@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ExternalLink,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { copySmall } from '@wordpress/icons';
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { safeDecodeURIComponent } from '@wordpress/url';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const SlugEdit = ( {
+	field,
+	onChange,
+	data,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const slug = field.getValue( { item: data } ) ?? '';
+	const permalinkTemplate = data.permalink_template || '';
+	const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
+	const [ prefix, suffix ] = permalinkTemplate.split(
+		PERMALINK_POSTNAME_REGEX
+	);
+	const permalinkPrefix = prefix;
+	const permalinkSuffix = suffix;
+	const isEditable = PERMALINK_POSTNAME_REGEX.test( permalinkTemplate );
+	const originalSlug = useRef( slug );
+	const slugToDisplay = slug || originalSlug.current;
+	const permalink = isEditable
+		? `${ permalinkPrefix }${ slugToDisplay }${ permalinkSuffix }`
+		: safeDecodeURIComponent( data.link || '' );
+
+	useEffect( () => {
+		if ( slug && originalSlug.current === undefined ) {
+			originalSlug.current = slug;
+		}
+	}, [ slug ] );
+
+	const onChangeControl = useCallback(
+		( newValue?: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const { createNotice } = useDispatch( noticesStore );
+
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
+		createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
+
+	return (
+		<fieldset className="fields-controls__slug">
+			{ isEditable && (
+				<VStack>
+					<VStack spacing="0px">
+						<span>
+							{ __( 'Customize the last part of the URL.' ) }
+						</span>
+						<ExternalLink href="https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink">
+							{ __( 'Learn more' ) }
+						</ExternalLink>
+					</VStack>
+					<InputControl
+						__next40pxDefaultSize
+						prefix={
+							<InputControlPrefixWrapper>
+								/
+							</InputControlPrefixWrapper>
+						}
+						suffix={
+							<Button
+								__next40pxDefaultSize
+								icon={ copySmall }
+								ref={ copyButtonRef }
+								label={ __( 'Copy' ) }
+							/>
+						}
+						label={ __( 'Link' ) }
+						hideLabelFromVision
+						value={ slug }
+						autoComplete="off"
+						spellCheck="false"
+						type="text"
+						className="fields-controls__slug-input"
+						onChange={ ( newValue?: string ) => {
+							onChangeControl( newValue );
+						} }
+						onBlur={ () => {
+							if ( slug === '' ) {
+								onChangeControl( originalSlug.current );
+							}
+						} }
+						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>
+						}
+					/>
+				</VStack>
+			) }
+			{ ! isEditable && (
+				<ExternalLink
+					className="fields-controls__slug-help"
+					href={ permalink }
+				>
+					{ permalink }
+				</ExternalLink>
+			) }
+		</fieldset>
+	);
+};
+
+export default SlugEdit;

packages/fields/src/fields/slug/slug-view.tsx

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const SlugView = ( { item }: { item: BasePost } ) => {
+	const slug = item.slug;
+	const originalSlug = useRef( slug );
+
+	useEffect( () => {
+		if ( slug && originalSlug.current === undefined ) {
+			originalSlug.current = slug;
+		}
+	}, [ slug ] );
+
+	const slugToDisplay = slug || originalSlug.current;
+
+	return `/${ slugToDisplay ?? '' }`;
+};
+
+export default SlugView;

packages/fields/src/fields/slug/style.scss

@@ -0,0 +1,18 @@
+.fields-controls__slug {
+	.fields-controls__slug-external-icon {
+		margin-left: 5ch;
+	}
+
+	.fields-controls__slug-input input.components-input-control__input {
+		padding-inline-start: 0 !important;
+	}
+
+	.fields-controls__slug-help {
+		color: $gray-700;
+
+		.fields-controls__slug-help-slug,
+		.fields-controls__slug-help-suffix {
+			font-weight: 600;
+		}
+	}
+}

packages/fields/src/styles.scss

@@ -0,0 +1 @@
+@import "./fields/slug/style.scss";

packages/fields/src/types.ts

@@ -35,6 +35,8 @@ export interface BasePost extends CommonPost {
 	menu_order?: number;
 	ping_status?: 'open' | 'closed';
 	link?: string;
+	slug?: string;
+	permalink_template?: string;
 }
 
 export interface Template extends CommonPost {