From 2cdc0f67eccf35d227b2b7de48249b4d0c2fd6ab Mon Sep 17 00:00:00 2001
From: Matias Ventura <mv@matiasventura.com>
Date: Thu, 25 Mar 2021 13:15:55 +0100
Subject: [PATCH] Add site icon and name to the publish flow (#30231)

This aims to make it clearer where you are publishing to in the final step check. It also helps add some visual hierarchy to the publishing flow panel, separating the intro a bit better.

* Add site icon and name to the publish flow.
* Add site home address.

Co-authored-by: jasmussen <joen@automattic.com>
---
 .../post-publish-panel/prepublish.js          | 85 ++++++++++++++-----
 .../components/post-publish-panel/style.scss  | 27 ++++++
 .../test/__snapshots__/index.js.snap          |  4 +-
 3 files changed, 94 insertions(+), 22 deletions(-)

diff --git a/packages/editor/src/components/post-publish-panel/prepublish.js b/packages/editor/src/components/post-publish-panel/prepublish.js
index 916f42239fe2e8..b1d5ac47730aec 100644
--- a/packages/editor/src/components/post-publish-panel/prepublish.js
+++ b/packages/editor/src/components/post-publish-panel/prepublish.js
@@ -7,8 +7,10 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { Icon, PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { wordpress } from '@wordpress/icons';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -20,11 +22,59 @@ import PostScheduleLabel from '../post-schedule/label';
 import MaybeTagsPanel from './maybe-tags-panel';
 import MaybePostFormatPanel from './maybe-post-format-panel';
 
-function PostPublishPanelPrepublish( {
-	hasPublishAction,
-	isBeingScheduled,
-	children,
-} ) {
+function PostPublishPanelPrepublish( { children } ) {
+	const {
+		isBeingScheduled,
+		isRequestingSiteIcon,
+		hasPublishAction,
+		siteIconUrl,
+		siteTitle,
+		siteHome,
+	} = useSelect( ( select ) => {
+		const { isResolving } = select( 'core/data' );
+		const { getCurrentPost, isEditedPostBeingScheduled } = select(
+			'core/editor'
+		);
+		const { getEntityRecord } = select( 'core' );
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			hasPublishAction: get(
+				getCurrentPost(),
+				[ '_links', 'wp:action-publish' ],
+				false
+			),
+			isBeingScheduled: isEditedPostBeingScheduled(),
+			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
+				'root',
+				'__unstableBase',
+				undefined,
+			] ),
+			siteIconUrl: siteData.site_icon_url,
+			siteTitle: siteData.name,
+			siteHome: filterURLForDisplay( siteData.home ),
+		};
+	}, [] );
+
+	let siteIcon = (
+		<Icon className="components-site-icon" size="36px" icon={ wordpress } />
+	);
+
+	if ( siteIconUrl ) {
+		siteIcon = (
+			<img
+				alt={ __( 'Site Icon' ) }
+				className="components-site-icon"
+				src={ siteIconUrl }
+			/>
+		);
+	}
+
+	if ( isRequestingSiteIcon ) {
+		siteIcon = null;
+	}
+
 	let prePublishTitle, prePublishBodyText;
 
 	if ( ! hasPublishAction ) {
@@ -50,6 +100,13 @@ function PostPublishPanelPrepublish( {
 				<strong>{ prePublishTitle }</strong>
 			</div>
 			<p>{ prePublishBodyText }</p>
+			<div className="components-site-card">
+				{ siteIcon }
+				<div className="components-site-info">
+					<span className="components-site-name">{ siteTitle }</span>
+					<span className="components-site-home">{ siteHome }</span>
+				</div>
+			</div>
 			{ hasPublishAction && (
 				<>
 					<PanelBody
@@ -89,16 +146,4 @@ function PostPublishPanelPrepublish( {
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getCurrentPost, isEditedPostBeingScheduled } = select(
-		'core/editor'
-	);
-	return {
-		hasPublishAction: get(
-			getCurrentPost(),
-			[ '_links', 'wp:action-publish' ],
-			false
-		),
-		isBeingScheduled: isEditedPostBeingScheduled(),
-	};
-} )( PostPublishPanelPrepublish );
+export default PostPublishPanelPrepublish;
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index b16226bd48fa5e..24d1269e2ebc3d 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -33,6 +33,33 @@
 	}
 }
 
+.components-site-card {
+	display: flex;
+	align-items: center;
+	margin: $grid-unit-20 0;
+}
+
+.components-site-icon {
+	border: none;
+	border-radius: $radius-block-ui;
+	margin-right: $grid-unit-15;
+
+	// Same size as in the Site menu.
+	height: 36px;
+	width: 36px;
+}
+
+.components-site-name {
+	display: block;
+	font-size: 14px;
+}
+
+.components-site-home {
+	display: block;
+	color: $gray-700;
+	font-size: $helptext-font-size;
+}
+
 .editor-post-publish-panel__header-publish-button,
 .editor-post-publish-panel__header-cancel-button {
 	flex-grow: 1;
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index c2d064ebe2abbc..b7df303bf69db5 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -104,7 +104,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   <div
     className="editor-post-publish-panel__content"
   >
-    <WithSelect(PostPublishPanelPrepublish) />
+    <PostPublishPanelPrepublish />
   </div>
   <div
     className="editor-post-publish-panel__footer"
@@ -144,7 +144,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   <div
     className="editor-post-publish-panel__content"
   >
-    <WithSelect(PostPublishPanelPrepublish) />
+    <PostPublishPanelPrepublish />
   </div>
   <div
     className="editor-post-publish-panel__footer"