@wordpress/fields 0.40.2-next.v.202606191442.0 → 0.41.1

package/src/fields/template-author/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import TemplateAuthorView from './view';
+import type { Template, TemplatePart } from '../../types';
+
+async function getAuthorElements(
+	postType: 'wp_template' | 'wp_template_part'
+) {
+	const records = ( await resolveSelect( coreStore ).getEntityRecords(
+		'postType',
+		postType,
+		{ per_page: -1, _fields: 'id,author_text' }
+	) ) as ( Template | TemplatePart )[] | null;
+
+	const seen = new Set< string >();
+	const elements: { value: string; label: string }[] = [];
+	for ( const record of records ?? [] ) {
+		const value = record.author_text;
+		if ( value && ! seen.has( value ) ) {
+			seen.add( value );
+			elements.push( { value, label: value } );
+		}
+	}
+	return elements;
+}
+
+/**
+ * Author field for templates.
+ */
+export const templateAuthorField: Field< Template > = {
+	label: __( 'Author' ),
+	id: 'author',
+	getValue: ( { item } ) => item.author_text,
+	render: TemplateAuthorView,
+	getElements: () => getAuthorElements( 'wp_template' ),
+};
+
+/**
+ * Author field for template parts.
+ */
+export const templatePartAuthorField: Field< TemplatePart > = {
+	label: __( 'Author' ),
+	id: 'author',
+	getValue: ( { item } ) => item.author_text,
+	render: TemplateAuthorView,
+	enableSorting: false,
+	filterBy: {
+		isPrimary: true,
+	},
+	getElements: () => getAuthorElements( 'wp_template_part' ),
+};

package/src/fields/template-author/view.tsx

@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	commentAuthorAvatar as authorIcon,
+	layout as themeIcon,
+	plugins as pluginIcon,
+	globe as globeIcon,
+} from '@wordpress/icons';
+import { Icon, Stack } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import type { Template, TemplatePart } from '../../types';
+
+function getIconForSource( originalSource: Template[ 'original_source' ] ) {
+	switch ( originalSource ) {
+		case 'theme':
+			return themeIcon;
+		case 'plugin':
+			return pluginIcon;
+		case 'site':
+			return globeIcon;
+		default:
+			return authorIcon;
+	}
+}
+
+export default function TemplateAuthorView( {
+	item,
+}: {
+	item: Template | TemplatePart;
+} ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const originalSource = item.original_source;
+	const icon = getIconForSource( originalSource );
+	const text = item.author_text;
+	const authorId = item.author;
+
+	const imageUrl = useSelect(
+		( select ) => {
+			if ( originalSource === 'site' ) {
+				const siteData = select( coreStore ).getEntityRecord< {
+					site_logo?: number;
+				} >( 'root', '__unstableBase' );
+				const logoId = siteData?.site_logo;
+				if ( ! logoId ) {
+					return undefined;
+				}
+				return select( coreStore ).getEntityRecord< {
+					source_url: string;
+				} >( 'postType', 'attachment', logoId )?.source_url;
+			}
+
+			if ( originalSource !== 'user' || ! authorId ) {
+				return undefined;
+			}
+			return select( coreStore ).getUser( authorId )?.avatar_urls?.[ 48 ];
+		},
+		[ originalSource, authorId ]
+	);
+
+	return (
+		<Stack direction="row" align="center">
+			{ imageUrl && (
+				<div
+					className={ clsx( 'fields-controls__author-avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="fields-controls__author-icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="fields-controls__author-name">{ text }</span>
+		</Stack>
+	);
+}

package/src/types.ts

@@ -89,7 +89,13 @@ export interface BasePostWithEmbeddedFeaturedMedia extends BasePost {
 	_embedded: EmbeddedFeaturedMedia;
 }
 
-export interface Template extends CommonPost {
+interface TemplateAuthorFields {
+	author?: number;
+	author_text: string;
+	original_source?: 'theme' | 'plugin' | 'site' | 'user';
+}
+
+export interface Template extends CommonPost, TemplateAuthorFields {
 	type: 'wp_template';
 	is_custom: boolean;
 	source: string;
@@ -100,7 +106,7 @@ export interface Template extends CommonPost {
 	description?: string;
 }
 
-export interface TemplatePart extends CommonPost {
+export interface TemplatePart extends CommonPost, TemplateAuthorFields {
 	type: 'wp_template_part';
 	source: string;
 	origin: string;