diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js index 5619c66205438c..dccf03c16dcdec 100644 --- a/packages/edit-site/src/components/list/added-by.js +++ b/packages/edit-site/src/components/list/added-by.js @@ -6,11 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - __experimentalHStack as HStack, - Icon, - Tooltip, -} from '@wordpress/components'; +import { __experimentalHStack as HStack, Icon } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useState } from '@wordpress/element'; @@ -20,62 +16,37 @@ import { plugins as pluginIcon, globe as globeIcon, } 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 ( - - { children } - - ); -} - -function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) { +function BaseAddedBy( { text, icon, imageUrl } ) { const [ isImageLoaded, setIsImageLoaded ] = useState( false ); return ( - - { imageUrl ? ( -
- setIsImageLoaded( true ) } - alt="" - src={ imageUrl } - /> -
- ) : ( -
- -
- ) } -
+ { imageUrl ? ( +
+ setIsImageLoaded( true ) } + alt="" + src={ imageUrl } + /> +
+ ) : ( +
+ +
+ ) } { text }
); } -function AddedByTheme( { slug, isCustomized } ) { +function AddedByTheme( { slug } ) { const theme = useSelect( ( select ) => select( coreStore ).getTheme( slug ), [ slug ] @@ -85,24 +56,17 @@ function AddedByTheme( { slug, isCustomized } ) { ); } -function AddedByPlugin( { slug, isCustomized } ) { +function AddedByPlugin( { slug } ) { const plugin = useSelect( ( select ) => select( coreStore ).getPlugin( slug ), [ slug ] ); - return ( - - ); + return ; } function AddedByAuthor( { id } ) { @@ -154,22 +118,12 @@ export default function AddedBy( { templateType, template } ) { ( ! template.origin && [ 'theme', 'custom' ].includes( template.source ) ) ) ) { - return ( - - ); + return ; } // Template originally provided by a plugin, but customized by a user. if ( template.has_theme_file && template.origin === 'plugin' ) { - return ( - - ); + return ; } // Template was created from scratch, but has no author. Author support diff --git a/packages/edit-site/src/components/list/customized-template-info.js b/packages/edit-site/src/components/list/customized-template-info.js new file mode 100644 index 00000000000000..56a0473fe3f176 --- /dev/null +++ b/packages/edit-site/src/components/list/customized-template-info.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +export default function CustomizedTemplateInfo( { template } ) { + // 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.author && + template.has_theme_file && + ( template.origin === 'theme' || + ( ! template.origin && + [ 'theme', 'custom' ].includes( template.source ) ) || + template.origin === 'plugin' ) + ) { + return ( +

+ { __( 'This template has been customized.' ) } +

+ ); + } + + return null; +} diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index e6cf7220cdf604..2b765a74763879 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -157,18 +157,6 @@ svg { fill: $white; } - - &.is-customized::after { - position: absolute; - content: ""; - background: var(--wp-admin-theme-color); - height: $grid-unit-10; - width: $grid-unit-10; - outline: 2px solid $white; - border-radius: 100%; - top: -1px; - right: -1px; - } } .edit-site-list-added-by__avatar { @@ -194,3 +182,19 @@ } } } + +.edit-site-list-template-customized-info { + display: flex; + align-items: center; + margin: $grid-unit-05 0 0; + + &::before { + content: ""; + background: var(--wp-admin-theme-color); + height: $grid-unit-10; + width: $grid-unit-10; + outline: 2px solid $white; + border-radius: 100%; + margin-right: $grid-unit-05; + } +} diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js index 68a5c300299824..7200914f5666df 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -16,6 +16,7 @@ import { decodeEntities } from '@wordpress/html-entities'; import Link from '../routes/link'; import Actions from './actions'; import AddedBy from './added-by'; +import CustomizedTemplateInfo from './customized-template-info'; export default function Table( { templateType } ) { const { records: templates, isResolving: isLoading } = useEntityRecords( @@ -95,6 +96,7 @@ export default function Table( { templateType } ) { { template.description } +