Add option to override icon and href

WordPress · Nov 24, 2020 · c3e7c54 · c3e7c54
1 parent 4740032
commit c3e7c54
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/docs/designers-developers/developers/slotfills/main-dashboard-button.md b/docs/designers-developers/developers/slotfills/main-dashboard-button.md
@@ -40,7 +40,7 @@ import { close } from '@wordpress/icons';
 
 const MainDashboardButtonIconTest = () => (
     <MainDashboardButton>
-        <FullscreenModeClose icon={ close } />
+        <FullscreenModeClose icon={ close } href="http://wordpress.org" />
     </MainDashboardButton>
 );
 

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { wordpress } from '@wordpress/icons';
 
-function FullscreenModeClose( { showTooltip } ) {
+function FullscreenModeClose( { showTooltip, icon, href } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( 'core/editor' );
@@ -50,16 +50,26 @@ function FullscreenModeClose( { showTooltip } ) {
 				src={ siteIconUrl }
 			/>
 		);
-	} else if ( isRequestingSiteIcon ) {
+	}
+
+	if ( isRequestingSiteIcon ) {
 		buttonIcon = null;
 	}
 
+	// Override default icon if custom icon is provided via props.
+	if ( icon ) {
+		buttonIcon = <Icon size="36px" icon={ icon } />;
+	}
+
 	return (
 		<Button
 			className="edit-post-fullscreen-mode-close has-icon"
-			href={ addQueryArgs( 'edit.php', {
-				post_type: postType.slug,
-			} ) }
+			href={
+				href ??
+				addQueryArgs( 'edit.php', {
+					post_type: postType.slug,
+				} )
+			}
 			label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
 			showTooltip={ showTooltip }
 		>

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -11,7 +11,7 @@
 		background: #23282e; // WP-admin gray.
 		color: $white;
 		border-radius: 0;
-		height: auto;
+		height: $header-height;
 		width: $header-height;
 
 		&:hover {
@@ -31,4 +31,3 @@
 .edit-post-fullscreen-mode-close_site-icon {
 	width: 36px;
 }
-