@wordpress/fields 0.2.0 → 0.3.0

package/src/fields/slug/index.ts

@@ -0,0 +1,23 @@
+/**
+ * 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',
+	type: 'text',
+	label: __( 'Slug' ),
+	getValue: ( { item } ) => item.slug,
+	Edit: SlugEdit,
+	render: SlugView,
+};
+
+export default slugField;

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

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ExternalLink,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { copySmall } from '@wordpress/icons';
+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';
+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 originalSlugRef = useRef( slug );
+	const slugToDisplay = slug || originalSlugRef.current;
+	const permalink = isEditable
+		? `${ permalinkPrefix }${ slugToDisplay }${ permalinkSuffix }`
+		: safeDecodeURIComponent( data.link || '' );
+
+	useEffect( () => {
+		if ( slug && originalSlugRef.current === undefined ) {
+			originalSlugRef.current = slug;
+		}
+	}, [ slug ] );
+
+	const onChangeControl = useCallback(
+		( newValue?: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const { createNotice } = useDispatch( noticesStore );
+
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
+		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 Permalink.'
+							) }
+						</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( originalSlugRef.current );
+							}
+						} }
+						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>
+							</>
+						}
+					/>
+				</VStack>
+			) }
+			{ ! isEditable && (
+				<ExternalLink
+					className="fields-controls__slug-help"
+					href={ permalink }
+				>
+					{ permalink }
+				</ExternalLink>
+			) }
+		</fieldset>
+	);
+};
+
+export default SlugEdit;

package/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 originalSlugRef = useRef( slug );
+
+	useEffect( () => {
+		if ( slug && originalSlugRef.current === undefined ) {
+			originalSlugRef.current = slug;
+		}
+	}, [ slug ] );
+
+	const slugToDisplay = slug || originalSlugRef.current;
+
+	return `/${ slugToDisplay ?? '' }`;
+};
+
+export default SlugView;

package/src/fields/slug/style.scss

@@ -0,0 +1,22 @@
+.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-link {
+		word-break: break-word;
+	}
+
+	.fields-controls__slug-help {
+		display: flex;
+		flex-direction: column;
+
+		.fields-controls__slug-help-slug {
+			font-weight: 600;
+		}
+	}
+}

package/src/mutation/index.ts

@@ -10,9 +10,9 @@ import { dispatch } from '@wordpress/data';
  */
 import type { CoreDataError, Post } from '../types';
 
-const getErrorMessagesFromPromises = < T >(
+function getErrorMessagesFromPromises< T >(
 	allSettledResults: PromiseSettledResult< T >[]
-) => {
+) {
 	const errorMessages = new Set< string >();
 	// If there was at lease one failure.
 	if ( allSettledResults.length === 1 ) {
@@ -36,7 +36,7 @@ const getErrorMessagesFromPromises = < T >(
 		}
 	}
 	return errorMessages;
-};
+}
 
 export type NoticeSettings< T extends Post > = {
 	success: {

package/src/styles.scss

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

package/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 {

package/tsconfig.json

@@ -23,7 +23,9 @@
 		{ "path": "../blob" },
 		{ "path": "../core-data" },
 		{ "path": "../hooks" },
-		{ "path": "../html-entities" }
+		{ "path": "../html-entities" },
+		{ "path": "../media-utils" },
+		{ "path": "../router" }
 	],
 	"include": [ "src" ]
 }