diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js index 87ae920dba6b6b..3cb8410497878a 100644 --- 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 new file mode 100644 index 00000000000000..f015131fdf8913 --- /dev/null +++ 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 ( + +
+ +
+ { theme?.name?.rendered } +
+ ); +} + +function AddedByPlugin( { slug } ) { + const plugin = useSelect( + ( select ) => select( coreStore ).getPlugin( slug ), + [ slug ] + ); + + return ( + +
+ +
+ { plugin?.name?.rendered } +
+ ); +} + +function AddedByAuthor( { id } ) { + const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [ + id, + ] ); + + return ( + + + { user?.nickname } + + ); +} + +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 ; + } + + if ( ! NON_PLUGIN_SOURCES.includes( template.source ) ) { + return ; + } + + // Fallback for any custom template already created without an assigned + // author. + if ( + ! template.has_theme_file && + template.source === 'custom' && + ! template.author + ) { + return ( + +
+ +
+ Customized by user +
+ ); + } + } + + return ; +} diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index 575348c7f65ad9..b7d305e9a649ac 100644 --- 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 index 148b6b460c0ff8..33203ae86aafb6 100644 --- 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 } ) { - { template.theme } +