@wordpress/fields 0.1.0 → 0.3.0

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

@@ -0,0 +1,348 @@
+/**
+ * WordPress dependencies
+ */
+import { ComboboxControl, ExternalLink } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+	createInterpolateElement,
+	useCallback,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+// @ts-ignore
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import { debounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
+import type { BasePost } from '../../types';
+import { getTitleWithFallbackName } from './utils';
+import { filterURLForDisplay } from '@wordpress/url';
+
+type TreeBase = {
+	id: number;
+	name: string;
+	[ key: string ]: any;
+};
+
+type TreeWithParent = TreeBase & {
+	parent: number;
+};
+
+type TreeWithoutParent = TreeBase & {
+	parent: null;
+};
+
+type Tree = TreeWithParent | TreeWithoutParent;
+
+function buildTermsTree( flatTerms: Tree[] ) {
+	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
+		return {
+			children: [],
+			...term,
+		};
+	} );
+
+	// All terms should have a `parent` because we're about to index them by it.
+	if (
+		flatTermsWithParentAndChildren.some(
+			( { parent } ) => parent === null || parent === undefined
+		)
+	) {
+		return flatTermsWithParentAndChildren as TreeWithParent[];
+	}
+
+	const termsByParent = (
+		flatTermsWithParentAndChildren as TreeWithParent[]
+	 ).reduce(
+		( acc, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{} as Record< string, Array< TreeWithParent > >
+	);
+
+	const fillWithChildren = (
+		terms: Array< TreeWithParent >
+	): Array< TreeWithParent > => {
+		return terms.map( ( term ) => {
+			const children = termsByParent[ term.id ];
+			return {
+				...term,
+				children:
+					children && children.length
+						? fillWithChildren( children )
+						: [],
+			};
+		} );
+	};
+
+	return fillWithChildren( termsByParent[ '0' ] || [] );
+}
+
+export const getItemPriority = ( name: string, searchValue: string ) => {
+	const normalizedName = removeAccents( name || '' ).toLowerCase();
+	const normalizedSearch = removeAccents( searchValue || '' ).toLowerCase();
+	if ( normalizedName === normalizedSearch ) {
+		return 0;
+	}
+
+	if ( normalizedName.startsWith( normalizedSearch ) ) {
+		return normalizedName.length;
+	}
+
+	return Infinity;
+};
+
+export function PageAttributesParent( {
+	data,
+	onChangeControl,
+}: {
+	data: BasePost;
+	onChangeControl: ( newValue: number ) => void;
+} ) {
+	const [ fieldValue, setFieldValue ] = useState< null | string >( null );
+
+	const pageId = data.parent;
+	const postId = data.id;
+	const postTypeSlug = data.type;
+
+	const { parentPostTitle, pageItems, isHierarchical } = useSelect(
+		( select ) => {
+			// @ts-expect-error getPostType is not typed
+			const { getEntityRecord, getEntityRecords, getPostType } =
+				select( coreStore );
+
+			const postTypeInfo = getPostType( postTypeSlug );
+
+			const postIsHierarchical =
+				postTypeInfo?.hierarchical && postTypeInfo.viewable;
+
+			const parentPost = pageId
+				? getEntityRecord< BasePost >(
+						'postType',
+						postTypeSlug,
+						pageId
+				  )
+				: null;
+
+			const query = {
+				per_page: 100,
+				exclude: postId,
+				parent_exclude: postId,
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: 'id,title,parent',
+				...( fieldValue !== null && {
+					search: fieldValue,
+				} ),
+			};
+
+			return {
+				isHierarchical: postIsHierarchical,
+				parentPostTitle: parentPost
+					? getTitleWithFallbackName( parentPost )
+					: '',
+				pageItems: postIsHierarchical
+					? getEntityRecords< BasePost >(
+							'postType',
+							postTypeSlug,
+							query
+					  )
+					: null,
+			};
+		},
+		[ fieldValue, pageId, postId, postTypeSlug ]
+	);
+
+	/**
+	 * This logic has been copied from https://github.com/WordPress/gutenberg/blob/0249771b519d5646171fb9fae422006c8ab773f2/packages/editor/src/components/page-attributes/parent.js#L106.
+	 */
+	const parentOptions = useMemo( () => {
+		const getOptionsFromTree = (
+			tree: Array< Tree >,
+			level = 0
+		): Array< {
+			value: number;
+			label: string;
+			rawName: string;
+		} > => {
+			const mappedNodes = tree.map( ( treeNode ) => [
+				{
+					value: treeNode.id,
+					label:
+						'— '.repeat( level ) + decodeEntities( treeNode.name ),
+					rawName: treeNode.name,
+				},
+				...getOptionsFromTree( treeNode.children || [], level + 1 ),
+			] );
+
+			const sortedNodes = mappedNodes.sort( ( [ a ], [ b ] ) => {
+				const priorityA = getItemPriority(
+					a.rawName,
+					fieldValue ?? ''
+				);
+				const priorityB = getItemPriority(
+					b.rawName,
+					fieldValue ?? ''
+				);
+				return priorityA >= priorityB ? 1 : -1;
+			} );
+
+			return sortedNodes.flat();
+		};
+
+		if ( ! pageItems ) {
+			return [];
+		}
+
+		let tree = pageItems.map( ( item ) => ( {
+			id: item.id as number,
+			parent: item.parent ?? null,
+			name: getTitleWithFallbackName( item ),
+		} ) );
+
+		// Only build a hierarchical tree when not searching.
+		if ( ! fieldValue ) {
+			tree = buildTermsTree( tree );
+		}
+
+		const opts = getOptionsFromTree( tree );
+
+		// Ensure the current parent is in the options list.
+		const optsHasParent = opts.find( ( item ) => item.value === pageId );
+		if ( pageId && parentPostTitle && ! optsHasParent ) {
+			opts.unshift( {
+				value: pageId,
+				label: parentPostTitle,
+				rawName: '',
+			} );
+		}
+		return opts.map( ( option ) => ( {
+			...option,
+			value: option.value.toString(),
+		} ) );
+	}, [ pageItems, fieldValue, parentPostTitle, pageId ] );
+
+	if ( ! isHierarchical ) {
+		return null;
+	}
+
+	/**
+	 * Handle user input.
+	 *
+	 * @param {string} inputValue The current value of the input field.
+	 */
+	const handleKeydown = ( inputValue: string ) => {
+		setFieldValue( inputValue );
+	};
+
+	/**
+	 * Handle author selection.
+	 *
+	 * @param {Object} selectedPostId The selected Author.
+	 */
+	const handleChange = ( selectedPostId: string | null | undefined ) => {
+		if ( selectedPostId ) {
+			return onChangeControl( parseInt( selectedPostId, 10 ) ?? 0 );
+		}
+
+		onChangeControl( 0 );
+	};
+
+	return (
+		<ComboboxControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Parent' ) }
+			help={ __( 'Choose a parent page.' ) }
+			value={ pageId?.toString() }
+			options={ parentOptions }
+			onFilterValueChange={ debounce(
+				( value: unknown ) => handleKeydown( value as string ),
+				300
+			) }
+			onChange={ handleChange }
+			hideLabelFromVision
+		/>
+	);
+}
+
+export const ParentEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const homeUrl = useSelect( ( select ) => {
+		// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
+		return select( coreStore ).getEntityRecord< {
+			home: string;
+		} >( 'root', '__unstableBase' )?.home as string;
+	}, [] );
+
+	const onChangeControl = useCallback(
+		( newValue?: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="fields-controls__parent">
+			<div>
+				{ createInterpolateElement(
+					sprintf(
+						/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+						__(
+							'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+						),
+						filterURLForDisplay( homeUrl ).replace(
+							/([/.])/g,
+							'<wbr />$1'
+						)
+					),
+					{
+						wbr: <wbr />,
+					}
+				) }
+				<p>
+					{ createInterpolateElement(
+						__(
+							'They also show up as sub-items in the default navigation menu. <a>Learn more.</a>'
+						),
+						{
+							a: (
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
+									) }
+									children={ undefined }
+								/>
+							),
+						}
+					) }
+				</p>
+				<PageAttributesParent
+					data={ data }
+					onChangeControl={ onChangeControl }
+				/>
+			</div>
+		</fieldset>
+	);
+};

package/src/fields/parent/parent-view.tsx

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import { getTitleWithFallbackName } from './utils';
+import { __ } from '@wordpress/i18n';
+
+export const ParentView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const parent = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return item?.parent
+				? getEntityRecord( 'postType', item.type, item.parent )
+				: null;
+		},
+		[ item.parent, item.type ]
+	);
+
+	if ( parent ) {
+		return <>{ getTitleWithFallbackName( parent ) }</>;
+	}
+
+	return <>{ __( 'None' ) }</>;
+};

package/src/fields/parent/utils.ts

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export function getTitleWithFallbackName( post: BasePost ) {
+	return typeof post.title === 'object' &&
+		'rendered' in post.title &&
+		post.title.rendered
+		? decodeEntities( post.title.rendered )
+		: `#${ post?.id } (${ __( 'no title' ) })`;
+}

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" ]
 }