Implement validation slug

packages/dataviews/src/normalize-fields.ts

@@ -38,11 +38,8 @@ export function normalizeFields< Item >(
 
 		const isValid =
 			field.isValid ??
-			function isValid( item, context ) {
-				return fieldTypeDefinition.isValid(
-					getValue( { item } ),
-					context
-				);
+			function isValid( value, item, context ) {
+				return fieldTypeDefinition.isValid( value, context );
 			};
 
 		const Edit = getControl( field, fieldTypeDefinition );

packages/dataviews/src/types.ts

@@ -121,7 +121,11 @@ export type Field< Item > = {
 	/**
 	 * Callback used to validate the field.
 	 */
-	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
+	isValid?: (
+		value: any,
+		item?: Item,
+		context?: ValidationContext
+	) => boolean;
 
 	/**
 	 * Callback used to decide if a field should be displayed.
@@ -167,7 +171,7 @@ export type NormalizedField< Item > = Field< Item > & {
 	render: ComponentType< DataViewRenderFieldProps< Item > >;
 	Edit: ComponentType< DataFormControlProps< Item > >;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
-	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+	isValid: ( value: any, item: Item, context?: ValidationContext ) => boolean;
 	enableHiding: boolean;
 	enableSorting: boolean;
 };

packages/dataviews/src/validation.ts

@@ -22,6 +22,7 @@ export function isItemValid< Item >(
 		fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
 	);
 	return _fields.every( ( field ) => {
-		return field.isValid( item, { elements: field.elements } );
+		const value = field.getValue( { item } );
+		return field.isValid( value, item, { elements: field.elements } );
 	} );
 }

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

@@ -23,6 +23,7 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
+import { PostEditProvider } from '../post-edit/context';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
@@ -59,7 +60,9 @@ export default function App() {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<AppLayout />
+					<PostEditProvider>
+						<AppLayout />
+					</PostEditProvider>
 					<PluginArea onError={ onPluginAreaError } />
 				</RouterProvider>
 			</GlobalStylesProvider>

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext, useState } from '@wordpress/element';
+
+export const PostEditContext = createContext( {
+	isValidForm: false,
+	setIsValidForm: () => {},
+} );
+
+export const PostEditProvider = ( { children } ) => {
+	const [ isValidForm, setIsValidForm ] = useState( false );
+
+	return (
+		<PostEditContext.Provider value={ { isValidForm, setIsValidForm } }>
+			{ children }
+		</PostEditContext.Provider>
+	);
+};
+
+export const usePostEditContext = () => {
+	return useContext( PostEditContext );
+};

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

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { DataForm } from '@wordpress/dataviews';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { __experimentalVStack as VStack } from '@wordpress/components';
@@ -20,6 +20,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import Page from '../page';
 import usePostFields from '../post-fields';
 import { unlock } from '../../lock-unlock';
+import { usePostEditContext } from './context';
 
 const { PostCardPanel } = unlock( editorPrivateApis );
 
@@ -96,6 +97,9 @@ function PostEditForm( { postType, postId } ) {
 		} ),
 		[ ids ]
 	);
+
+	const { setIsValidForm } = usePostEditContext();
+
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
 			if (
@@ -120,6 +124,12 @@ function PostEditForm( { postType, postId } ) {
 					...edits,
 				} ) );
 			}
+			const isValidForm = isItemValid(
+				{ ...record, ...edits },
+				fields,
+				form
+			);
+			setIsValidForm( isValidForm );
 		}
 	};
 	useEffect( () => {

packages/edit-site/src/components/save-hub/index.js

@@ -11,6 +11,7 @@ import { check } from '@wordpress/icons';
  */
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import { usePostEditContext } from '../post-edit/context';
 
 export default function SaveHub() {
 	const { isDisabled, isSaving } = useSelect( ( select ) => {
@@ -27,6 +28,11 @@ export default function SaveHub() {
 				( ! dirtyEntityRecords.length && ! isPreviewingTheme() ),
 		};
 	}, [] );
+
+	const { isValidForm } = usePostEditContext();
+
+	console.log( isValidForm );
+
 	return (
 		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
 			<SaveButton

packages/fields/package.json

@@ -56,6 +56,7 @@
 		"@wordpress/warning": "*",
 		"change-case": "4.1.2",
 		"client-zip": "^2.4.5",
+		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {

packages/fields/src/actions/reorder-page.tsx

@@ -69,6 +69,7 @@ function ReorderModal( {
 		}
 	}
 	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
+	console.log( isSaveDisabled );
 	return (
 		<form onSubmit={ onOrder }>
 			<VStack spacing="5">

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

@@ -10,12 +10,16 @@ import type { BasePost } from '../../types';
 import { __ } from '@wordpress/i18n';
 import SlugEdit from './slug-edit';
 import SlugView from './slug-view';
+import { getSlug } from './utils';
 
 const slugField: Field< BasePost > = {
 	id: 'slug',
 	type: 'text',
 	label: __( 'Slug' ),
-	getValue: ( { item } ) => item.slug,
+	getValue: ( { item } ) => getSlug( item ),
+	isValid: ( value ) => {
+		return ( value && value.length > 0 ) || false;
+	},
 	Edit: SlugEdit,
 	render: SlugView,
 };

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

@@ -11,17 +11,21 @@ import {
 import { copySmall } from '@wordpress/icons';
 import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } 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';
 
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
 import type { BasePost } from '../../types';
-import { getSlug } from './utils';
 
 const SlugEdit = ( {
 	field,
@@ -30,7 +34,12 @@ const SlugEdit = ( {
 }: DataFormControlProps< BasePost > ) => {
 	const { id } = field;
 
-	const slug = field.getValue( { item: data } ) || getSlug( data );
+	const value = field.getValue( { item: data } );
+
+	const slug = value.length > 0 ? value : data.id.toString();
+
+	const [ isValid, setIsValid ] = useState( true );
+
 	const permalinkTemplate = data.permalink_template || '';
 	const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
 	const [ prefix, suffix ] = permalinkTemplate.split(
@@ -40,7 +49,7 @@ const SlugEdit = ( {
 	const permalinkSuffix = suffix;
 	const isEditable = PERMALINK_POSTNAME_REGEX.test( permalinkTemplate );
 	const originalSlugRef = useRef( slug );
-	const slugToDisplay = slug || originalSlugRef.current;
+	const slugToDisplay = slug.length > 0 ? slug : data.id.toString();
 	const permalink = isEditable
 		? `${ permalinkPrefix }${ slugToDisplay }${ permalinkSuffix }`
 		: safeDecodeURIComponent( data.link || '' );
@@ -52,11 +61,13 @@ const SlugEdit = ( {
 	}, [ slug ] );
 
 	const onChangeControl = useCallback(
-		( newValue?: string ) =>
+		( newValue?: string ) => {
 			onChange( {
 				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			} );
+			setIsValid( field.isValid( newValue ) );
+		},
+		[ field, id, onChange ]
 	);
 
 	const { createNotice } = useDispatch( noticesStore );
@@ -106,7 +117,9 @@ const SlugEdit = ( {
 						autoComplete="off"
 						spellCheck="false"
 						type="text"
-						className="fields-controls__slug-input"
+						className={ clsx( 'fields-controls__slug-input', {
+							'fields-controls__slug-input--invalid': ! isValid,
+						} ) }
 						onChange={ ( newValue?: string ) => {
 							onChangeControl( newValue );
 						} }
@@ -117,6 +130,11 @@ const SlugEdit = ( {
 						} }
 						aria-describedby={ postUrlSlugDescriptionId }
 					/>
+					{ ! isValid && (
+						<div className="fields-controls__slug-error">
+							<span>{ __( 'The slug is invalid.' ) }</span>
+						</div>
+					) }
 					<div className="fields-controls__slug-help">
 						<span className="fields-controls__slug-help-visual-label">
 							{ __( 'Permalink:' ) }

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

@@ -9,8 +9,17 @@ import { useEffect, useRef } from '@wordpress/element';
 import type { BasePost } from '../../types';
 import { getSlug } from './utils';
 
+const getSlugOrFallback = ( item: BasePost ): string => {
+	if ( typeof item === 'object' ) {
+		const slug = getSlug( item );
+		return slug.length > 0 ? slug : item.id.toString();
+	}
+
+	return '';
+};
+
 const SlugView = ( { item }: { item: BasePost } ) => {
-	const slug = typeof item === 'object' ? getSlug( item ) : '';
+	const slug = getSlugOrFallback( item );
 	const originalSlugRef = useRef( slug );
 
 	useEffect( () => {

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

@@ -7,6 +7,18 @@
 		padding-inline-start: 0 !important;
 	}
 
+	.fields-controls__slug-input--invalid {
+		.components-input-control__backdrop,
+		.components-input-control__backdrop:focus-within {
+			border-color: $alert-red !important;
+			box-shadow: 0 0 0 0.5px $alert-red !important;
+		}
+	}
+
+	.fields-controls__slug-error {
+		color: $alert-red;
+	}
+
 	.fields-controls__slug-help-link {
 		word-break: break-word;
 	}

packages/fields/src/fields/slug/utils.ts

@@ -9,7 +9,5 @@ import type { BasePost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
 
 export const getSlug = ( item: BasePost ): string => {
-	return (
-		item.slug || cleanForSlug( getItemTitle( item ) ) || item.id.toString()
-	);
+	return item.slug || cleanForSlug( getItemTitle( item ) );
 };