Show theme, plugin or author in Added By column with appropriate icon…

… or avatar
WordPress · Nov 29, 2021 · ec70095 · ec70095
1 parent 233e5b2
commit ec70095
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 1 deletion.
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
@@ -154,6 +154,13 @@ export const defaultEntities = [
 		baseURLParams: { context: 'edit' },
 		key: 'stylesheet',
 	},
+	{
+		label: __( 'Plugins' ),
+		name: 'plugin',
+		kind: 'root',
+		baseURL: '/wp/v2/plugins',
+		baseURLParams: { context: 'edit' },
+	},
 ];
 
 export const kinds = [

diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import {
+	layout as themeIcon,
+	plugins as pluginIcon,
+	commentAuthorAvatar as customizedByUserIcon,
+} from '@wordpress/icons';
+
+const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
+const NON_PLUGIN_SOURCES = [ 'theme', 'custom' ];
+
+function AddedByTheme( { slug } ) {
+	const theme = useSelect(
+		( select ) => select( coreStore ).getTheme( slug ),
+		[ slug ]
+	);
+
+	return (
+		<HStack alignment="left">
+			<div className="edit-site-list-added-by__icon">
+				<Icon icon={ themeIcon } />
+			</div>
+			<span>{ theme?.name?.rendered }</span>
+		</HStack>
+	);
+}
+
+function AddedByPlugin( { slug } ) {
+	const plugin = useSelect(
+		( select ) => select( coreStore ).getPlugin( slug ),
+		[ slug ]
+	);
+
+	return (
+		<HStack alignment="left">
+			<div className="edit-site-list-added-by__icon">
+				<Icon icon={ pluginIcon } />
+			</div>
+			<span>{ plugin?.name?.rendered }</span>
+		</HStack>
+	);
+}
+
+function AddedByAuthor( { id } ) {
+	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
+		id,
+	] );
+
+	return (
+		<HStack alignment="left">
+			<img
+				className="edit-site-list-added-by__avatar"
+				alt=""
+				src={ user?.avatar_urls[ 48 ] }
+			/>
+			<span>{ user?.nickname }</span>
+		</HStack>
+	);
+}
+
+export default function AddedBy( { templateType, template } ) {
+	if ( ! template ) {
+		return;
+	}
+
+	if ( TEMPLATE_POST_TYPE_NAMES.includes( templateType ) ) {
+		if ( template.has_theme_file && template.source === 'theme' ) {
+			return <AddedByTheme slug={ template.theme } />;
+		}
+
+		if ( ! NON_PLUGIN_SOURCES.includes( template.source ) ) {
+			return <AddedByPlugin slug={ template.source } />;
+		}
+
+		// Fallback for any custom template already created without an assigned
+		// author.
+		if (
+			! template.has_theme_file &&
+			template.source === 'custom' &&
+			! template.author
+		) {
+			return (
+				<HStack alignment="left">
+					<div className="edit-site-list-added-by__icon">
+						<Icon icon={ customizedByUserIcon } />
+					</div>
+					<span>Customized by user</span>
+				</HStack>
+			);
+		}
+	}
+
+	return <AddedByAuthor id={ template.author } />;
+}
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
@@ -154,3 +154,23 @@
 		margin-right: $grid-unit-10;
 	}
 }
+
+.edit-site-list-added-by__icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+	background: $gray-800;
+	border-radius: 100%;
+
+	svg {
+		fill: $white;
+	}
+}
+
+.edit-site-list-added-by__avatar {
+	width: $grid-unit-40;
+	height: $grid-unit-40;
+	border-radius: 100%;
+}
diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
@@ -14,6 +14,7 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import Actions from './actions';
+import TemplateAddedBy from './added-by';
 
 export default function Table( { templateType } ) {
 	const { templates, isLoading, postType } = useSelect(
@@ -104,7 +105,10 @@ export default function Table( { templateType } ) {
 						</td>
 
 						<td className="edit-site-list-table-column" role="cell">
-							{ template.theme }
+							<TemplateAddedBy
+								templateType={ templateType }
+								template={ template }
+							/>
 						</td>
 						<td className="edit-site-list-table-column" role="cell">
 							<Actions template={ template } />