diff --git a/packages/edit-site/src/components/list/header.js b/packages/edit-site/src/components/list/header.js deleted file mode 100644 index 5468c271fe628..0000000000000 --- a/packages/edit-site/src/components/list/header.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { __experimentalHeading as Heading } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import AddNewTemplate from '../add-new-template'; -import { store as editSiteStore } from '../../store'; - -export default function Header( { templateType } ) { - const { canCreate, postType } = useSelect( - ( select ) => { - const { supportsTemplatePartsMode } = - select( editSiteStore ).getSettings(); - return { - postType: select( coreStore ).getPostType( templateType ), - canCreate: ! supportsTemplatePartsMode, - }; - }, - [ templateType ] - ); - - if ( ! postType ) { - return null; - } - - return ( -
- - { postType.labels?.name } - - - { canCreate && ( -
- -
- ) } -
- ); -} diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js deleted file mode 100644 index 4fcf27239f05e..0000000000000 --- a/packages/edit-site/src/components/list/index.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * WordPress dependencies - */ -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; -import { InterfaceSkeleton } from '@wordpress/interface'; -import { __, sprintf } from '@wordpress/i18n'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { EditorSnackbars } from '@wordpress/editor'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import useRegisterShortcuts from './use-register-shortcuts'; -import Header from './header'; -import Table from './table'; -import useTitle from '../routes/use-title'; -import { unlock } from '../../lock-unlock'; -import { - TEMPLATE_POST_TYPE, - TEMPLATE_PART_POST_TYPE, -} from '../../utils/constants'; - -const { useLocation } = unlock( routerPrivateApis ); - -export default function List() { - const { - params: { path }, - } = useLocation(); - const templateType = - path === '/wp_template/all' - ? TEMPLATE_POST_TYPE - : TEMPLATE_PART_POST_TYPE; - - useRegisterShortcuts(); - - const { previousShortcut, nextShortcut } = useSelect( ( select ) => { - return { - previousShortcut: select( - keyboardShortcutsStore - ).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ), - nextShortcut: select( - keyboardShortcutsStore - ).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), - }; - }, [] ); - - const postType = useSelect( - ( select ) => select( coreStore ).getPostType( templateType ), - [ templateType ] - ); - - useTitle( postType?.labels?.name ); - - // `postType` could load in asynchronously. Only provide the detailed region labels if - // the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults. - const itemsListLabel = postType?.labels?.items_list; - const detailedRegionLabels = postType - ? { - header: sprintf( - // translators: %s - the name of the page, 'Header' as in the header area of that page. - __( '%s - Header' ), - itemsListLabel - ), - body: sprintf( - // translators: %s - the name of the page, 'Content' as in the content area of that page. - __( '%s - Content' ), - itemsListLabel - ), - } - : undefined; - - return ( - } - notices={ } - content={ } - shortcuts={ { - previous: previousShortcut, - next: nextShortcut, - } } - /> - ); -} diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss deleted file mode 100644 index cfc65252c8e68..0000000000000 --- a/packages/edit-site/src/components/list/style.scss +++ /dev/null @@ -1,188 +0,0 @@ -.edit-site-list-header { - position: relative; - align-items: center; - display: flex; - height: $header-height; - box-sizing: border-box; - width: 100%; - justify-content: flex-end; - padding-right: $grid-unit-20; - - body.is-fullscreen-mode & { - padding-left: 60px; - transition: padding-left 20ms linear; - transition-delay: 80ms; - @include reduce-motion("transition"); - } - - .edit-site-list-header__title { - position: absolute; - left: 0; - width: 100%; - text-align: center; - font-size: 20px; - padding: 0; - margin: 0; - } -} - -.edit-site-list-header__right { - // Creating a stacking context so that it won't be covered by title. - position: relative; -} - -.edit-site { - .edit-site-list { - flex-grow: 1; - background: $white; - border-radius: $radius-block-ui * 4; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8); - - .interface-interface-skeleton__editor { - min-width: 100%; - - @include break-medium() { - min-width: 0; - } - } - - .interface-interface-skeleton__content { - background: $white; - padding: $grid-unit-20; - align-items: center; - - @include break-medium() { - padding: $grid-unit * 9; - } - } - } -} - -.edit-site-list-table { - min-width: 100%; - border: $border-width solid $gray-300; - border-radius: 2px; - margin: 0 auto; - overflow: hidden; - border-spacing: 0; - max-width: 960px; - - tr { - display: flex; - align-items: center; - padding: $grid-unit-20; - box-sizing: border-box; - border-top: $border-width solid $gray-100; - margin: 0; - - &:first-child { - border-top: 0; - } - - @include break-medium() { - padding: $grid-unit-30 $grid-unit-40; - } - - // Template. - .edit-site-list-table-column:nth-child(1) { - width: calc(60% - 18px); - padding-right: $grid-unit-30; - - a { - display: inline-block; - text-decoration: none; - font-weight: 500; - margin-bottom: $grid-unit-05; - } - } - - // Added by. - .edit-site-list-table-column:nth-child(2) { - width: calc(40% - 18px); - word-break: break-word; - } - - // Actions. - .edit-site-list-table-column:nth-child(3) { - min-width: $button-size; - flex-shrink: 0; - } - } - - tr.edit-site-list-table-head { - font-size: 16px; - font-weight: 600; - text-align: left; - color: $gray-900; - border-top: none; - border-bottom: $border-width solid $gray-300; - - th { - font-weight: inherit; - } - } -} - -.edit-site-list.is-navigation-open .components-snackbar-list { - @include break-medium() { - margin-left: $nav-sidebar-width; - } -} - -.edit-site-list__rename-modal { - // The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. - z-index: z-index(".edit-site-list__rename-modal"); - .components-base-control { - @include break-medium() { - width: $grid-unit * 40; - } - } -} - -.edit-site-template__actions { - button:not(:last-child) { - margin-right: $grid-unit-10; - } -} - -.edit-site-list-added-by__icon { - display: flex; - flex-shrink: 0; - width: $grid-unit-30; - height: $grid-unit-30; - - svg { - fill: currentColor; - } -} - -.edit-site-list-added-by__avatar { - flex-shrink: 0; - overflow: hidden; - width: $grid-unit-30; - height: $grid-unit-30; - align-items: center; - justify-content: center; - display: flex; - - img { - width: 20px; - height: 20px; - object-fit: cover; - opacity: 0; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); - border-radius: 100%; - } - - &.is-loaded { - img { - opacity: 1; - } - } -} - -.edit-site-list-added-by__customized-info { - display: block; - color: $gray-700; -} diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js deleted file mode 100644 index 18198cb600dda..0000000000000 --- a/packages/edit-site/src/components/list/table.js +++ /dev/null @@ -1,140 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreStore, useEntityRecords } from '@wordpress/core-data'; -import { __, sprintf } from '@wordpress/i18n'; -import { - VisuallyHidden, - __experimentalHeading as Heading, -} from '@wordpress/components'; -import { decodeEntities } from '@wordpress/html-entities'; - -/** - * Internal dependencies - */ -import TemplateActions from '../template-actions'; -import Link from '../routes/link'; -import AddedBy from './added-by'; - -export default function Table( { templateType } ) { - const { records: allTemplates } = useEntityRecords( - 'postType', - templateType, - { - per_page: -1, - } - ); - - const templates = useSelect( - ( select ) => - allTemplates?.filter( - ( template ) => - ! select( coreStore ).isDeletingEntityRecord( - 'postType', - templateType, - template.id - ) - ), - [ allTemplates ] - ); - - const postType = useSelect( - ( select ) => select( coreStore ).getPostType( templateType ), - [ templateType ] - ); - - if ( ! templates ) { - return null; - } - - if ( ! templates.length ) { - return ( -
- { sprintf( - // translators: The template type name, should be either "templates" or "template parts". - __( 'No %s found.' ), - postType?.labels?.name?.toLowerCase() - ) } -
- ); - } - - const sortedTemplates = [ ...templates ]; - sortedTemplates.sort( ( a, b ) => - a.title.rendered.localeCompare( b.title.rendered ) - ); - - return ( - // These explicit aria roles are needed for Safari. - // See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables -
- - - - - - - - - - { sortedTemplates.map( ( template ) => ( - - - - - - - ) ) } - -
- { __( 'Template' ) } - - { __( 'Added by' ) } - - { __( 'Actions' ) } -
- - - { decodeEntities( - template.title?.rendered || - template.slug - ) } - - - { decodeEntities( template.description ) } - - { template ? ( - - ) : null } - - -
- ); -} diff --git a/packages/edit-site/src/components/list/use-register-shortcuts.js b/packages/edit-site/src/components/list/use-register-shortcuts.js deleted file mode 100644 index f31b4a3808a22..0000000000000 --- a/packages/edit-site/src/components/list/use-register-shortcuts.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * WordPress dependencies - */ - -import { useDispatch } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; - -export default function useRegisterShortcuts() { - const { registerShortcut } = useDispatch( keyboardShortcutsStore ); - useEffect( () => { - registerShortcut( { - name: 'core/edit-site/next-region', - category: 'global', - description: __( 'Navigate to the next part of the editor.' ), - keyCombination: { - modifier: 'ctrl', - character: '`', - }, - aliases: [ - { - modifier: 'access', - character: 'n', - }, - ], - } ); - - registerShortcut( { - name: 'core/edit-site/previous-region', - category: 'global', - description: __( 'Navigate to the previous part of the editor.' ), - keyCombination: { - modifier: 'ctrlShift', - character: '`', - }, - aliases: [ - { - modifier: 'access', - character: 'p', - }, - { - modifier: 'ctrlShift', - character: '~', - }, - ], - } ); - }, [] ); -} diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/page-templates-template-parts/hooks.js similarity index 61% rename from packages/edit-site/src/components/list/added-by.js rename to packages/edit-site/src/components/page-templates-template-parts/hooks.js index a7ed2c4099547..3cf2d78a59ee9 100644 --- a/packages/edit-site/src/components/list/added-by.js +++ b/packages/edit-site/src/components/page-templates-template-parts/hooks.js @@ -1,28 +1,19 @@ -// @ts-check -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ -import { Icon, __experimentalHStack as HStack } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { useState } from '@wordpress/element'; import { commentAuthorAvatar as authorIcon, layout as themeIcon, plugins as pluginIcon, globe as globeIcon, } from '@wordpress/icons'; -import { _x } from '@wordpress/i18n'; /** * Internal dependencies */ -import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../utils/constants'; +import { TEMPLATE_ORIGINS } from '../../utils/constants'; /** @typedef {'wp_template'|'wp_template_part'} TemplateType */ @@ -107,59 +98,3 @@ export function useAddedBy( postType, postId ) { [ postType, postId ] ); } - -/** - * @param {Object} props - * @param {string} props.imageUrl - */ -export function AvatarImage( { imageUrl } ) { - const [ isImageLoaded, setIsImageLoaded ] = useState( false ); - - return ( -
- setIsImageLoaded( true ) } - alt="" - src={ imageUrl } - /> -
- ); -} - -/** - * @param {Object} props - * @param {TemplateType} props.postType The template post type. - * @param {number} props.postId The template post id. - */ -export default function AddedBy( { postType, postId } ) { - const { text, icon, imageUrl, isCustomized } = useAddedBy( - postType, - postId - ); - - return ( - - { imageUrl ? ( - - ) : ( -
- -
- ) } - - { text } - { isCustomized && ( - - { postType === TEMPLATE_POST_TYPE - ? _x( 'Customized', 'template' ) - : _x( 'Customized', 'template part' ) } - - ) } - - - ); -} diff --git a/packages/edit-site/src/components/page-templates-template-parts/index.js b/packages/edit-site/src/components/page-templates-template-parts/index.js index 9089d31cd66e0..1462c5143a71d 100644 --- a/packages/edit-site/src/components/page-templates-template-parts/index.js +++ b/packages/edit-site/src/components/page-templates-template-parts/index.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import classnames from 'classnames'; import removeAccents from 'remove-accents'; /** @@ -34,7 +35,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import Page from '../page'; import { default as Link, useLink } from '../routes/link'; import AddNewTemplate from '../add-new-template'; -import { useAddedBy, AvatarImage } from '../list/added-by'; +import { useAddedBy } from './hooks'; import { TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE, @@ -124,14 +125,30 @@ function Title( { item, viewType } ) { } function AuthorField( { item, viewType } ) { + const [ isImageLoaded, setIsImageLoaded ] = useState( false ); const { text, icon, imageUrl } = useAddedBy( item.type, item.id ); const withIcon = viewType !== LAYOUT_LIST; return ( - { withIcon && imageUrl && } + { withIcon && imageUrl && ( +
+ setIsImageLoaded( true ) } + alt="" + src={ imageUrl } + /> +
+ ) } { withIcon && ! imageUrl && ( -
+
) } diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss index 4e4c01bac8239..c7485bce79c57 100644 --- a/packages/edit-site/src/components/page-templates-template-parts/style.scss +++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss @@ -64,3 +64,51 @@ z-index: z-index(".edit-site-templates__dataviews-list-pagination"); } } + + +.page-templates-author-field__avatar { + flex-shrink: 0; + overflow: hidden; + width: $grid-unit-30; + height: $grid-unit-30; + align-items: center; + justify-content: center; + display: flex; + + img { + width: 20px; + height: 20px; + object-fit: cover; + opacity: 0; + transition: opacity 0.1s linear; + @include reduce-motion("transition"); + border-radius: 100%; + } + + &.is-loaded { + img { + opacity: 1; + } + } +} + +.page-templates-author-field__icon { + display: flex; + flex-shrink: 0; + width: $grid-unit-30; + height: $grid-unit-30; + + svg { + fill: currentColor; + } +} + +.edit-site-list__rename-modal { + // The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher. + z-index: z-index(".edit-site-list__rename-modal"); + .components-base-control { + @include break-medium() { + width: $grid-unit * 40; + } + } +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 7eedc08a0987e..3c88da7990e1a 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { useAddedBy } from '../list/added-by'; +import { useAddedBy } from '../page-templates-template-parts/hooks'; import useEditedEntityRecord from '../use-edited-entity-record'; import useNavigationMenuContent from './use-navigation-menu-content'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js index e6ead651fbbfc..d7d117e0c1763 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js @@ -18,7 +18,7 @@ import useEditedEntityRecord from '../use-edited-entity-record'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; -import { useAddedBy } from '../list/added-by'; +import { useAddedBy } from '../page-templates-template-parts/hooks'; import TemplateActions from '../template-actions'; import HomeTemplateDetails from './home-template-details'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js index 7c120133c674e..068f1d4c03a6e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js @@ -9,7 +9,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; * Internal dependencies */ import DataViewItem from '../sidebar-dataviews/dataview-item'; -import { useAddedBy } from '../list/added-by'; +import { useAddedBy } from '../page-templates-template-parts/hooks'; import { layout } from '@wordpress/icons'; const EMPTY_ARRAY = []; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index b3a37158e16fe..52c9211e143d7 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -8,7 +8,6 @@ @import "./components/global-styles/style.scss"; @import "./components/global-styles/screen-revisions/style.scss"; @import "./components/header-edit-mode/style.scss"; -@import "./components/list/style.scss"; @import "./components/page/style.scss"; @import "./components/page-pages/style.scss"; @import "./components/page-patterns/style.scss";