-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show theme, plugin or author in Added By column with appropriate icon…
… or avatar (#36763) * Show theme, plugin or author in Added By column with appropriate icon or avatar * Add success and error snackbars to the templates list page (#36808) * Add success and error snackbars to the list page * Fix Unit Test error * Apply 'is-navigation-open' to interface skeleton * Fix NavigationToggle unit test * Apply suggestions from code review Co-authored-by: Robert Anderson <[email protected]> * Use deleting * Remove snackbars for creation * Add notices for reverting * Fix test * Add getLastEntityDeleteError * Add comment Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Robert Anderson <[email protected]> * Show theme, plugin or author in Added By column with appropriate icon or avatar * Fix plugin name rendering * Add blue dot for customize templates * Add tooltip and tidy up logic * Fallback to showin slug * Handle missing author by showing template as a customized theme template * Fallback to site name and logo * Make the avatars load in a fancy way * Avoid icon stretch on narrow viewports * Fix dodgy rebase * Use core version of template and template part post types and REST endpoints * Revert "Use core version of template and template part post types and REST endpoints" This reverts commit 6b40260. * Rename to AddedBy * Use onLoad Co-authored-by: Kai Hao <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Robert Anderson <[email protected]>
- Loading branch information
4 people
committed
Nov 29, 2021
1 parent
06c9fae
commit 897abdc
Showing
4 changed files
with
244 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __experimentalHStack as HStack, | ||
| Icon, | ||
| Tooltip, | ||
| } from '@wordpress/components'; | ||
| import { store as coreStore } from '@wordpress/core-data'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useState } from '@wordpress/element'; | ||
| import { layout as themeIcon, plugins as pluginIcon } from '@wordpress/icons'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ]; | ||
|
|
||
| function CustomizedTooltip( { isCustomized, children } ) { | ||
| if ( ! isCustomized ) { | ||
| return children; | ||
| } | ||
|
|
||
| return ( | ||
| <Tooltip text={ __( 'This template has been customized' ) }> | ||
| { children } | ||
| </Tooltip> | ||
| ); | ||
| } | ||
|
|
||
| function AddedByTheme( { slug, isCustomized } ) { | ||
| const theme = useSelect( | ||
| ( select ) => select( coreStore ).getTheme( slug ), | ||
| [ slug ] | ||
| ); | ||
|
|
||
| return ( | ||
| <HStack alignment="left"> | ||
| <CustomizedTooltip isCustomized={ isCustomized }> | ||
| <div | ||
| className={ classnames( 'edit-site-list-added-by__icon', { | ||
| 'is-customized': isCustomized, | ||
| } ) } | ||
| > | ||
| <Icon icon={ themeIcon } /> | ||
| </div> | ||
| </CustomizedTooltip> | ||
| <span>{ theme?.name?.rendered || slug }</span> | ||
| </HStack> | ||
| ); | ||
| } | ||
|
|
||
| function AddedByPlugin( { slug, isCustomized } ) { | ||
| const plugin = useSelect( | ||
| ( select ) => select( coreStore ).getPlugin( slug ), | ||
| [ slug ] | ||
| ); | ||
|
|
||
| return ( | ||
| <HStack alignment="left"> | ||
| <CustomizedTooltip isCustomized={ isCustomized }> | ||
| <div className="edit-site-list-added-by__icon"> | ||
| <Icon icon={ pluginIcon } /> | ||
| </div> | ||
| </CustomizedTooltip> | ||
| <span>{ plugin?.name || slug }</span> | ||
| </HStack> | ||
| ); | ||
| } | ||
|
|
||
| function AddedByAuthor( { id } ) { | ||
| const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [ | ||
| id, | ||
| ] ); | ||
| const [ isImageLoaded, setIsImageLoaded ] = useState( false ); | ||
|
|
||
| return ( | ||
| <HStack alignment="left"> | ||
| <div | ||
| className={ classnames( 'edit-site-list-added-by__avatar', { | ||
| 'is-loaded': isImageLoaded, | ||
| } ) } | ||
| > | ||
| <img | ||
| onLoad={ () => setIsImageLoaded( true ) } | ||
| alt="" | ||
| src={ user?.avatar_urls[ 48 ] } | ||
| /> | ||
| </div> | ||
| <span>{ user?.nickname }</span> | ||
| </HStack> | ||
| ); | ||
| } | ||
|
|
||
| function AddedBySite() { | ||
| const { name, logoURL } = useSelect( ( select ) => { | ||
| const { getEntityRecord, getMedia } = select( coreStore ); | ||
| const siteData = getEntityRecord( 'root', '__unstableBase' ); | ||
|
|
||
| return { | ||
| name: siteData.name, | ||
| logoURL: siteData?.site_logo | ||
| ? getMedia( siteData.site_logo )?.source_url | ||
| : undefined, | ||
| }; | ||
| }, [] ); | ||
| const [ isImageLoaded, setIsImageLoaded ] = useState( false ); | ||
|
|
||
| return ( | ||
| <HStack alignment="left"> | ||
| <div | ||
| className={ classnames( 'edit-site-list-added-by__avatar', { | ||
| 'is-loaded': isImageLoaded, | ||
| } ) } | ||
| > | ||
| <img | ||
| onLoad={ () => setIsImageLoaded( true ) } | ||
| alt="" | ||
| src={ logoURL } | ||
| /> | ||
| </div> | ||
| <span>{ name }</span> | ||
| </HStack> | ||
| ); | ||
| } | ||
|
|
||
| export default function AddedBy( { templateType, template } ) { | ||
| if ( ! template ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( TEMPLATE_POST_TYPE_NAMES.includes( templateType ) ) { | ||
| // Template originally provided by a theme, but customized by a user. | ||
| // Templates originally didn't have the 'origin' field so identify | ||
| // older customized templates by checking for no origin and a 'theme' | ||
| // or 'custom' source. | ||
| if ( | ||
| template.has_theme_file && | ||
| ( template.origin === 'theme' || | ||
| ( ! template.origin && | ||
| [ 'theme', 'custom' ].includes( template.source ) ) ) | ||
| ) { | ||
| return ( | ||
| <AddedByTheme | ||
| slug={ template.theme } | ||
| isCustomized={ template.source === 'custom' } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| // Template originally provided by a plugin, but customized by a user. | ||
| if ( template.has_theme_file && template.origin === 'plugin' ) { | ||
| return ( | ||
| <AddedByPlugin | ||
| slug={ template.theme } | ||
| isCustomized={ template.source === 'custom' } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| // Template was created from scratch, but has no author. Author support | ||
| // was only added to templates in WordPress 5.9. Fallback to showing the | ||
| // site logo and title. | ||
| if ( | ||
| ! template.has_theme_file && | ||
| template.source === 'custom' && | ||
| ! template.author | ||
| ) { | ||
| return <AddedBySite />; | ||
| } | ||
| } | ||
|
|
||
| // Simply show the author for templates created from scratch that have an | ||
| // author or for any other post type. | ||
| return <AddedByAuthor id={ template.author } />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters