Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make the Templates list customized info accessible #42589

Closed
wants to merge 2 commits into from
Closed

Make the Templates list customized info accessible #42589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52fb627
Move template customized info to first column.
afercia Jul 20, 2022
ae6aaa1
Move Customized template info to its own file.
afercia Jul 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
94 changes: 24 additions & 70 deletions packages/edit-site/src/components/list/added-by.js
View file
Open in desktop
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,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 (
<Tooltip text={ __( 'This template has been customized' ) }>
{ children }
</Tooltip>
);
}

function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
function BaseAddedBy( { text, icon, imageUrl } ) {
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>
) }
</CustomizedTooltip>
{ 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 }</span>
</HStack>
);
}

function AddedByTheme( { slug, isCustomized } ) {
function AddedByTheme( { slug } ) {
const theme = useSelect(
( select ) => select( coreStore ).getTheme( slug ),
[ slug ]
Expand All @@ -85,24 +56,17 @@ function AddedByTheme( { slug, isCustomized } ) {
<BaseAddedBy
icon={ themeIcon }
text={ theme?.name?.rendered || slug }
isCustomized={ isCustomized }
/>
);
}

function AddedByPlugin( { slug, isCustomized } ) {
function AddedByPlugin( { slug } ) {
const plugin = useSelect(
( select ) => select( coreStore ).getPlugin( slug ),
[ slug ]
);

return (
<BaseAddedBy
icon={ pluginIcon }
text={ plugin?.name || slug }
isCustomized={ isCustomized }
/>
);
return <BaseAddedBy icon={ pluginIcon } text={ plugin?.name || slug } />;
}

function AddedByAuthor( { id } ) {
Expand Down Expand Up @@ -154,22 +118,12 @@ export default function AddedBy( { templateType, template } ) {
( ! template.origin &&
[ 'theme', 'custom' ].includes( template.source ) ) )
) {
return (
<AddedByTheme
slug={ template.theme }
isCustomized={ template.source === 'custom' }
/>
);
return <AddedByTheme slug={ template.theme } />;
}

// 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' }
/>
);
return <AddedByPlugin slug={ template.theme } />;
}

// Template was created from scratch, but has no author. Author support
Expand Down
27 changes: 27 additions & 0 deletions packages/edit-site/src/components/list/customized-template-info.js
View file
Open in desktop
@@ -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' )
Comment on lines +12 to +17
Copy link
Contributor

Choose a reason for hiding this comment

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

It's pretty complicated because this combines all the logic into one, and it might be clearer to extract it into separate variables:

// Templates originally didn't have the 'origin' field so identify
// older customized templates by checking for no origin and a 'theme'
// or 'custom' source.
const isAddedByTheme = template.has_theme_file &&
			( template.origin === 'theme' ||
				( ! template.origin &&
					[ 'theme', 'custom' ].includes( template.source ) ) );
const isAddedByPlugin = template.has_theme_file && template.origin === 'plugin';
const isCustomized = template.source === 'custom';

if ( ( isAddedByTheme || isAddedByPlugin ) && isCustomized ) {

) {
return (
<p className="edit-site-list-template-customized-info">
{ __( 'This template has been customized.' ) }
</p>
);
}

return null;
}
28 changes: 16 additions & 12 deletions packages/edit-site/src/components/list/style.scss
View file
Open in desktop
Expand Up @@ -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 {
Expand All @@ -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;
}
}
2 changes: 2 additions & 0 deletions packages/edit-site/src/components/list/table.js
View file
Open in desktop
Expand Up @@ -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(
Expand Down Expand Up @@ -95,6 +96,7 @@ export default function Table( { templateType } ) {
</Link>
</Heading>
{ template.description }
<CustomizedTemplateInfo template={ template } />
</td>

<td className="edit-site-list-table-column" role="cell">
Expand Down