Add: PostCardPanel component. (#59870)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
WordPress · Mar 22, 2024 · 3a27df2 · 3a27df2
1 parent af00609
commit 3a27df2
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 163 deletions.
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -25,6 +25,7 @@ import {
 	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
 /**
@@ -39,6 +40,8 @@ import { store as editPostStore } from '../../../store';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { unlock } from '../../../lock-unlock';
 
+const { PostCardPanel } = unlock( editorPrivateApis );
+
 const { Tabs } = unlock( componentsPrivateApis );
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
@@ -112,6 +115,7 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					{ ! isEditingTemplate && (
 						<>
+							<PostCardPanel />
 							<PostStatus />
 							<PluginDocumentSettingPanel.Slot />
 							<PostLastRevisionPanel />

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
@@ -1,17 +1,10 @@
 /**
  * WordPress dependencies
  */
-import {
-	PanelBody,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { page as pageIcon } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { humanTimeDiff } from '@wordpress/date';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
 import {
 	PageAttributesPanel,
 	PluginDocumentSettingPanel,
@@ -20,74 +13,50 @@ import {
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import SidebarCard from '../sidebar-card';
 import PageContent from './page-content';
 import PageSummary from './page-summary';
+import { unlock } from '../../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
 
 export default function PagePanels() {
-	const {
-		id,
-		type,
-		hasResolved,
-		status,
-		date,
-		password,
-		title,
-		modified,
-		renderingMode,
-	} = useSelect( ( select ) => {
-		const { getEditedPostContext } = select( editSiteStore );
-		const { getEditedEntityRecord, hasFinishedResolution } =
-			select( coreStore );
-		const { getRenderingMode } = select( editorStore );
-		const context = getEditedPostContext();
-		const queryArgs = [ 'postType', context.postType, context.postId ];
-		const page = getEditedEntityRecord( ...queryArgs );
-		return {
-			hasResolved: hasFinishedResolution(
-				'getEditedEntityRecord',
-				queryArgs
-			),
-			title: page?.title,
-			id: page?.id,
-			type: page?.type,
-			status: page?.status,
-			date: page?.date,
-			password: page?.password,
-			modified: page?.modified,
-			renderingMode: getRenderingMode(),
-		};
-	}, [] );
+	const { id, type, hasResolved, status, date, password, renderingMode } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext } = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const { getRenderingMode } = select( editorStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				id: page?.id,
+				type: page?.type,
+				status: page?.status,
+				date: page?.date,
+				password: page?.password,
+				renderingMode: getRenderingMode(),
+			};
+		}, [] );
 
 	if ( ! hasResolved ) {
 		return null;
 	}
 
 	return (
 		<>
-			<PanelBody>
-				<SidebarCard
-					title={ decodeEntities( title ) }
-					icon={ pageIcon }
-					description={
-						<VStack>
-							<Text>
-								{ sprintf(
-									// translators: %s: Human-readable time difference, e.g. "2 days ago".
-									__( 'Last edited %s' ),
-									humanTimeDiff( modified )
-								) }
-							</Text>
-						</VStack>
-					}
-				/>
-			</PanelBody>
+			<PostCardPanel />
 			<PanelBody title={ __( 'Summary' ) }>
 				<PageSummary
 					status={ status }

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/index.js b/packages/edit-site/src/components/sidebar-edit-mode/sidebar-card/index.js
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -10,10 +10,9 @@ import {
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { navigation, symbol } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import { serialize } from '@wordpress/blocks';
@@ -26,17 +25,13 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from '../../template-actions';
 import TemplateAreas from './template-areas';
-import SidebarCard from '../sidebar-card';
 import { useAvailablePatterns } from './hooks';
 import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
 import { unlock } from '../../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { PostCardPanel } = unlock( editorPrivateApis );
 
-const CARD_ICONS = {
-	wp_block: symbol,
-	wp_navigation: navigation,
-};
+const { useHistory } = unlock( routerPrivateApis );
 
 function TemplatesList( { availableTemplates, onSelect } ) {
 	const shownTemplates = useAsyncList( availableTemplates );
@@ -61,7 +56,7 @@ const POST_TYPE_PATH = {
 };
 
 export default function TemplatePanel() {
-	const { title, description, icon, record, postType, postId } = useSelect(
+	const { title, description, record, postType, postId } = useSelect(
 		( select ) => {
 			const { getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
@@ -102,29 +97,24 @@ export default function TemplatePanel() {
 
 	return (
 		<>
-			<PanelBody>
-				<SidebarCard
-					className="edit-site-template-card"
-					title={ decodeEntities( title ) }
-					icon={ CARD_ICONS[ record?.type ] ?? icon }
-					description={ decodeEntities( description ) }
-					actions={
-						<TemplateActions
-							postType={ postType }
-							postId={ postId }
-							className="edit-site-template-card__actions"
-							toggleProps={ { size: 'small' } }
-							onRemove={ () => {
-								history.push( {
-									path: POST_TYPE_PATH[ postType ],
-								} );
-							} }
-						/>
-					}
-				>
-					<TemplateAreas />
-				</SidebarCard>
-			</PanelBody>
+			<PostCardPanel
+				className="edit-site-template-card"
+				actions={
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						className="edit-site-template-card__actions"
+						toggleProps={ { size: 'small' } }
+						onRemove={ () => {
+							history.push( {
+								path: POST_TYPE_PATH[ postType ],
+							} );
+						} }
+					/>
+				}
+			>
+				<TemplateAreas />
+			</PostCardPanel>
 			{ availablePatterns?.length > 0 && (
 				<PanelBody
 					title={ __( 'Transform into:' ) }

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
@@ -26,6 +26,7 @@
 			padding: 0;
 			min-width: auto;
 		}
+		flex-shrink: 0;
 	}
 }
 

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -16,7 +16,6 @@
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/sidebar-card/style.scss";
 @import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/create-template-part-modal/style.scss";