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 <[email protected]>
WordPress · Mar 25, 2021 · 2cdc0f6 · 2cdc0f6
1 parent b93d0dc
commit 2cdc0f6
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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"