From 658847e1183b3ba8f953e41a8f29366ac33d14ae Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 31 May 2023 15:57:58 +1000 Subject: [PATCH] Site editor sidebar: refactor page details (#51093) * - Rolls back exposing getMedia details from the editor package - Refactors page details and the useSelect callbacks - Rolls back the generic data list components since we don't need them anywhere else (premature optimization) * - Ensuring last modified is visible * Use `availableTemplates` from editor settings to fetch template title using slug * Checking for templateSlug before performing a find * Whoops forgot to extract props from featuredMedia object in useSelect. --- .../data-list-item.js | 25 --- .../sidebar-navigation-data-list/index.js | 25 --- .../sidebar-navigation-data-list/style.scss | 12 - .../sidebar-navigation-screen-page/index.js | 209 ++++-------------- .../page-details.js | 163 ++++++++++++++ .../sidebar-navigation-screen-page/style.scss | 12 + packages/edit-site/src/style.scss | 1 - .../get-featured-media-details.js | 64 ------ .../components/post-featured-image/index.js | 47 +++- packages/editor/src/private-apis.js | 2 - 10 files changed, 269 insertions(+), 291 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-navigation-data-list/data-list-item.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-data-list/index.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-data-list/style.scss create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js delete mode 100644 packages/editor/src/components/post-featured-image/get-featured-media-details.js diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/data-list-item.js b/packages/edit-site/src/components/sidebar-navigation-data-list/data-list-item.js deleted file mode 100644 index beeff0b6367b56..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-data-list/data-list-item.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalHStack as HStack, - __experimentalText as Text, -} from '@wordpress/components'; - -export default function DataListItem( { label, value } ) { - return ( - - - { label } - - - { value } - - - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/index.js b/packages/edit-site/src/components/sidebar-navigation-data-list/index.js deleted file mode 100644 index aeff422026591a..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-data-list/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalVStack as VStack } from '@wordpress/components'; -/** - * Internal dependencies - */ -import DataListItem from './data-list-item'; - -export default function SidebarDetails( { details } ) { - return ( - - { details.map( ( detail ) => ( - - ) ) } - - ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss deleted file mode 100644 index 3a19bba8ed924d..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss +++ /dev/null @@ -1,12 +0,0 @@ - - -.edit-site-sidebar-navigation_data-list__item { - .edit-site-sidebar-navigation_data-list__label { - color: $gray-600; - width: 100px; - } - - .edit-site-sidebar-navigation_data-list__value.edit-site-sidebar-navigation_data-list__value { - color: $gray-200; - } -} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index fa4baeea631cad..b4d06bfbc675ac 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -6,25 +6,21 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __, _x, sprintf } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; import { __experimentalUseNavigator as useNavigator, __experimentalVStack as VStack, ExternalLink, __experimentalTruncate as Truncate, + __experimentalHStack as HStack, + __experimentalText as Text, } from '@wordpress/components'; -import { - store as coreStore, - useEntityRecord, - useEntityRecords, -} from '@wordpress/core-data'; +import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { pencil } from '@wordpress/icons'; import { humanTimeDiff } from '@wordpress/date'; -import { count as wordCount } from '@wordpress/wordcount'; import { createInterpolateElement } from '@wordpress/element'; -import { privateApis as privateEditorApis } from '@wordpress/editor'; import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { escapeAttribute } from '@wordpress/escape-html'; @@ -36,148 +32,44 @@ import { unlock } from '../../private-apis'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle'; -import SidebarDetails from '../sidebar-navigation-data-list'; -import DataListItem from '../sidebar-navigation-data-list/data-list-item'; -import StatusLabel from './status-label'; - -// Taken from packages/editor/src/components/time-to-read/index.js. -const AVERAGE_READING_RATE = 189; - -function getPageDetails( page ) { - if ( ! page ) { - return []; - } - - const details = [ - { - label: __( 'Status' ), - value: ( - - ), - }, - { - label: __( 'Slug' ), - value: { page.slug }, - }, - ]; - - if ( page?.templateTitle ) { - details.push( { - label: __( 'Template' ), - value: page.templateTitle, - } ); - } - - details.push( { - label: __( 'Parent' ), - value: page?.parentTitle, - } ); - - /* - * translators: If your word count is based on single characters (e.g. East Asian characters), - * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'. - * Do not translate into your own language. - */ - const wordCountType = _x( 'words', 'Word count type. Do not translate!' ); - const wordsCounted = page?.content?.rendered - ? wordCount( page.content.rendered, wordCountType ) - : 0; - const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE ); - - if ( wordsCounted ) { - details.push( - { - label: __( 'Words' ), - value: wordsCounted.toLocaleString() || __( 'Unknown' ), - }, - { - label: __( 'Time to read' ), - value: - readingTime > 1 - ? sprintf( - /* translators: %s: is the number of minutes. */ - __( '%s mins' ), - readingTime.toLocaleString() - ) - : __( '< 1 min' ), - } - ); - } - return details; -} +import PageDetails from './page-details'; export default function SidebarNavigationScreenPage() { const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { getFeaturedMediaDetails } = unlock( privateEditorApis ); const { params: { postId }, } = useNavigator(); const { record } = useEntityRecord( 'postType', 'page', postId ); - const { - parentTitle, - featuredMediaDetails: { mediaSourceUrl, altText }, - templateSlug, - } = useSelect( + const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect( ( select ) => { - const { getEditedPostContext } = unlock( select( editSiteStore ) ); - + const { getEntityRecord } = select( coreStore ); // Featured image. const attachedMedia = record?.featured_media - ? select( coreStore ).getEntityRecord( + ? getEntityRecord( 'postType', 'attachment', record?.featured_media ) : null; - // Parent page title. - let _parentTitle = record?.parent - ? select( coreStore ).getEntityRecord( - 'postType', - 'page', - record.parent, - { _fields: [ 'title' ] } - ) - : null; - - if ( _parentTitle?.title ) { - _parentTitle = decodeEntities( - _parentTitle.title?.rendered || __( '(no title)' ) - ); - } else { - _parentTitle = __( 'Top level' ); - } - return { - parentTitle: _parentTitle, - templateSlug: getEditedPostContext()?.templateSlug, - featuredMediaDetails: { - ...getFeaturedMediaDetails( attachedMedia, postId ), - altText: escapeAttribute( - attachedMedia?.alt_text || - attachedMedia?.description?.raw || - '' - ), - }, + featuredMediaSourceUrl: + attachedMedia?.media_details.sizes?.medium?.source_url || + attachedMedia?.source_url, + featuredMediaAltText: escapeAttribute( + attachedMedia?.alt_text || + attachedMedia?.description?.raw || + '' + ), }; }, - [ record, postId ] + [ record ] ); - // Match template slug to template title. - const { records: templates, isResolving: areTemplatesLoading } = - useEntityRecords( 'postType', 'wp_template', { - per_page: -1, - } ); - const templateTitle = - ! areTemplatesLoading && templateSlug - ? templates?.find( ( template ) => template?.slug === templateSlug ) - ?.title?.rendered || templateSlug - : ''; + const featureImageAltText = featuredMediaAltText + ? decodeEntities( featuredMediaAltText ) + : decodeEntities( record?.title?.rendered || __( 'Featured image' ) ); return record ? ( - { !! mediaSourceUrl && ( + { !! featuredMediaSourceUrl && ( { ) } { ! record?.featured_media && ( @@ -241,31 +126,35 @@ export default function SidebarNavigationScreenPage() { ) } - Details + { __( 'Details' ) } - + } footer={ - %s' ), - humanTimeDiff( record.modified ) - ), - { - time: