From 52fb6270eaffa5d957290728a3479780995fac06 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 20 Jul 2022 16:36:41 +0200 Subject: [PATCH 1/2] Move template customized info to first column. --- .../edit-site/src/components/list/added-by.js | 116 +++++++----------- .../edit-site/src/components/list/style.scss | 28 +++-- .../edit-site/src/components/list/table.js | 3 +- 3 files changed, 65 insertions(+), 82 deletions(-) diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js index 5619c66205438c..aeeddeae05dc49 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'; @@ -24,58 +20,34 @@ 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 +57,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 } ) { @@ -138,6 +103,29 @@ function AddedBySite() { ); } +export 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; +} + export default function AddedBy( { templateType, template } ) { if ( ! template ) { return; @@ -154,22 +142,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/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..0103f1cc354512 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -15,7 +15,7 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import Link from '../routes/link'; import Actions from './actions'; -import AddedBy from './added-by'; +import AddedBy, { CustomizedTemplateInfo } from './added-by'; export default function Table( { templateType } ) { const { records: templates, isResolving: isLoading } = useEntityRecords( @@ -95,6 +95,7 @@ export default function Table( { templateType } ) { { template.description } + From ae6aaa1c026942537274391680e36c76b3bd0a95 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 21 Jul 2022 10:21:27 +0200 Subject: [PATCH 2/2] Move Customized template info to its own file. --- .../edit-site/src/components/list/added-by.js | 24 ----------------- .../list/customized-template-info.js | 27 +++++++++++++++++++ .../edit-site/src/components/list/table.js | 3 ++- 3 files changed, 29 insertions(+), 25 deletions(-) create mode 100644 packages/edit-site/src/components/list/customized-template-info.js diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js index aeeddeae05dc49..dccf03c16dcdec 100644 --- a/packages/edit-site/src/components/list/added-by.js +++ b/packages/edit-site/src/components/list/added-by.js @@ -16,7 +16,6 @@ import { plugins as pluginIcon, globe as globeIcon, } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ]; @@ -103,29 +102,6 @@ function AddedBySite() { ); } -export 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; -} - export default function AddedBy( { templateType, template } ) { if ( ! template ) { return; 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/table.js b/packages/edit-site/src/components/list/table.js index 0103f1cc354512..7200914f5666df 100644 --- a/packages/edit-site/src/components/list/table.js +++ b/packages/edit-site/src/components/list/table.js @@ -15,7 +15,8 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import Link from '../routes/link'; import Actions from './actions'; -import AddedBy, { CustomizedTemplateInfo } from './added-by'; +import AddedBy from './added-by'; +import CustomizedTemplateInfo from './customized-template-info'; export default function Table( { templateType } ) { const { records: templates, isResolving: isLoading } = useEntityRecords(