Skip to content

Commit

Permalink
Make the template customized info accessible. (#48159)
Browse files Browse the repository at this point in the history
  • Loading branch information
@afercia @ntsekouras
afercia authored and ntsekouras committed Feb 28, 2023
1 parent f3a7279 commit 73110bf
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 68 deletions.
103 changes: 48 additions & 55 deletions packages/edit-site/src/components/list/added-by.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -20,62 +16,47 @@ import {
plugins as pluginIcon,
globe as globeIcon,
} from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { _x } 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 BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
function BaseAddedBy( { text, icon, imageUrl, isCustomized, templateType } ) {
const [ isImageLoaded, setIsImageLoaded ] = useState( false );

return (
<HStack alignment="left">
<CustomizedTooltip isCustomized={ isCustomized }>
{ imageUrl ? (
<div
className={ classnames(
'edit-site-list-added-by__avatar',
{
'is-loaded': isImageLoaded,
}
) }
>
<img
onLoad={ () => setIsImageLoaded( true ) }
alt=""
src={ imageUrl }
/>
</div>
) : (
<div
className={ classnames(
'edit-site-list-added-by__icon',
{
'is-customized': isCustomized,
}
) }
>
<Icon icon={ icon } />
</div>
{ imageUrl ? (
<div
className={ classnames( 'edit-site-list-added-by__avatar', {
'is-loaded': isImageLoaded,
} ) }
>
<img
onLoad={ () => setIsImageLoaded( true ) }
alt=""
src={ imageUrl }
/>
</div>
) : (
<div className="edit-site-list-added-by__icon">
<Icon icon={ icon } />
</div>
) }
<span>
{ text }
{ isCustomized && (
<span className="edit-site-list-added-by__customized-info">
{ templateType === 'wp_template'
? _x( 'Customized', 'template' )
: _x( 'Customized', 'template part' ) }
</span>
) }
</CustomizedTooltip>
<span>{ text }</span>
</span>
</HStack>
);
}

function AddedByTheme( { slug, isCustomized } ) {
function AddedByTheme( { slug, isCustomized, templateType } ) {
const theme = useSelect(
( select ) => select( coreStore ).getTheme( slug ),
[ slug ]
Expand All @@ -86,11 +67,12 @@ function AddedByTheme( { slug, isCustomized } ) {
icon={ themeIcon }
text={ theme?.name?.rendered || slug }
isCustomized={ isCustomized }
templateType={ templateType }
/>
);
}

function AddedByPlugin( { slug, isCustomized } ) {
function AddedByPlugin( { slug, isCustomized, templateType } ) {
const plugin = useSelect(
( select ) => select( coreStore ).getPlugin( slug ),
[ slug ]
Expand All @@ -101,11 +83,12 @@ function AddedByPlugin( { slug, isCustomized } ) {
icon={ pluginIcon }
text={ plugin?.name || slug }
isCustomized={ isCustomized }
templateType={ templateType }
/>
);
}

function AddedByAuthor( { id } ) {
function AddedByAuthor( { id, templateType } ) {
const user = useSelect(
( select ) => select( coreStore ).getUser( id ),
[ id ]
Expand All @@ -116,11 +99,12 @@ function AddedByAuthor( { id } ) {
icon={ authorIcon }
imageUrl={ user?.avatar_urls?.[ 48 ] }
text={ user?.nickname }
templateType={ templateType }
/>
);
}

function AddedBySite() {
function AddedBySite( { templateType } ) {
const { name, logoURL } = useSelect( ( select ) => {
const { getEntityRecord, getMedia } = select( coreStore );
const siteData = getEntityRecord( 'root', '__unstableBase' );
Expand All @@ -134,7 +118,12 @@ function AddedBySite() {
}, [] );

return (
<BaseAddedBy icon={ globeIcon } imageUrl={ logoURL } text={ name } />
<BaseAddedBy
icon={ globeIcon }
imageUrl={ logoURL }
text={ name }
templateType={ templateType }
/>
);
}

Expand All @@ -158,6 +147,7 @@ export default function AddedBy( { templateType, template } ) {
<AddedByTheme
slug={ template.theme }
isCustomized={ template.source === 'custom' }
templateType={ templateType }
/>
);
}
Expand All @@ -168,6 +158,7 @@ export default function AddedBy( { templateType, template } ) {
<AddedByPlugin
slug={ template.theme }
isCustomized={ template.source === 'custom' }
templateType={ templateType }
/>
);
}
Expand All @@ -180,11 +171,13 @@ export default function AddedBy( { templateType, template } ) {
template.source === 'custom' &&
! template.author
) {
return <AddedBySite />;
return <AddedBySite templateType={ templateType } />;
}
}

// Simply show the author for templates created from scratch that have an
// author or for any other post type.
return <AddedByAuthor id={ template.author } />;
return (
<AddedByAuthor id={ template.author } templateType={ templateType } />
);
}
18 changes: 5 additions & 13 deletions packages/edit-site/src/components/list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@
.edit-site-list-added-by__icon {
display: flex;
flex-shrink: 0;
position: relative;
align-items: center;
justify-content: center;
width: $grid-unit-40;
Expand All @@ -152,18 +151,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 {
Expand All @@ -189,3 +176,8 @@
}
}
}

.edit-site-list-added-by__customized-info {
display: block;
color: $gray-700;
}

0 comments on commit 73110bf

Please sign in to comment.