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 authored Feb 21, 2023
1 parent 44b4230 commit c4c4a86
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
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
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;
}

1 comment on commit c4c4a86

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in c4c4a86.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4232869283
📝 Reported issues:

Please sign in to comment.