@wordpress/edit-post 8.50.0 → 8.50.1-next.v.202607070741.0

package/build-style/classic-rtl.css

@@ -67,6 +67,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */

package/build-style/classic.css

@@ -67,6 +67,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */

package/build-style/style-rtl.css

@@ -67,6 +67,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -109,8 +115,11 @@
 .edit-post-fullscreen-mode-close__view-mode-toggle {
   top: 0;
   right: 0;
-  height: 64px;
-  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
   z-index: 100;
 }
 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button {
@@ -130,26 +139,8 @@
 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:focus {
   box-shadow: none;
 }
-.edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon svg,
-.edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon img {
-  background: #1e1e1e;
-  display: block;
-}
-
-.edit-post-fullscreen-mode-close-site-icon__icon {
-  fill: currentColor;
-  width: 100%;
-  height: 100%;
-  padding: 12px;
-}
-
-.edit-post-fullscreen-mode-close-site-icon__image {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-  background: #333;
-  aspect-ratio: 1/1;
+.edit-post-fullscreen-mode-close__view-mode-toggle:hover .edit-post-fullscreen-mode-close__back-icon {
+  color: var(--wp-admin-theme-color);
 }
 
 .edit-post-fullscreen-mode-close.components-button:focus {
@@ -169,36 +160,16 @@
 
 .edit-post-fullscreen-mode-close__back-icon {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 64px;
-  height: 64px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsl(0, 0%, 80%);
   pointer-events: none;
 }
 .edit-post-fullscreen-mode-close__back-icon svg {
   fill: currentColor;
 }
-.edit-post-fullscreen-mode-close__back-icon.has-site-icon {
-  background-color: hsla(0, 0%, 100%, 0.6);
-  backdrop-filter: saturate(180%) blur(15px);
-}
-
-/**
- *  Show icon label overrides.
- */
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
-  width: 64px;
-}
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
-  display: block;
-}
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
-  content: none;
-}
 
 .edit-post-meta-boxes-main {
   filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
@@ -446,57 +417,6 @@
   fill: #fff;
 }
 
-body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-}
-body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__back-icon {
-  top: auto;
-  right: auto;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-}
-body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle:hover .edit-post-fullscreen-mode-close__back-icon {
-  color: var(--wp-admin-theme-color);
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button) {
-  grid-template-columns: 32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button):has(> .editor-header__center) {
-  grid-template-columns: 32px min-content 1fr min-content 64px;
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header__back-button {
-  padding-right: 8px;
-}
-@media (min-width: 782px) {
-  body.has-admin-bar-in-editor.is-fullscreen-mode {
-    margin-top: 0;
-    height: 100%;
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
-    display: block;
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode .interface-interface-skeleton,
-  body.has-admin-bar-in-editor.is-fullscreen-mode .editor-post-publish-panel,
-  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
-  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
-    top: var(--wp-admin--admin-bar--height, 0);
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode .block-editor__container {
-    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
-    --wp-admin--admin-bar--height: 0;
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
-    display: none;
-  }
-}
-
 body.js.block-editor-page {
   background: #fff;
 }
@@ -528,6 +448,14 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
   width: auto;
   max-width: 100%;
 }
+@media (min-width: 782px) {
+  body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
+    --wp-admin--admin-bar--height: 0px;
+  }
+  body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
+    display: none;
+  }
+}
 
 .block-editor-page #wpwrap {
   overflow-y: auto;
@@ -559,10 +487,7 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 }
 @media (min-width: 782px) {
   .block-editor__container {
-    min-height: calc(100vh - 32px);
-  }
-  body.is-fullscreen-mode .block-editor__container {
-    min-height: 100vh;
+    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
   }
 }
 .block-editor__container img {

package/build-style/style.css

@@ -67,6 +67,12 @@
 /**
  * Focus styles.
  */
+/**
+ * Standard focus rings for the WordPress Design System.
+ *
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
+ */
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -109,8 +115,11 @@
 .edit-post-fullscreen-mode-close__view-mode-toggle {
   top: 0;
   left: 0;
-  height: 64px;
-  width: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
   z-index: 100;
 }
 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button {
@@ -130,26 +139,8 @@
 .edit-post-fullscreen-mode-close__view-mode-toggle .components-button:focus {
   box-shadow: none;
 }
-.edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon svg,
-.edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__view-mode-toggle-icon img {
-  background: #1e1e1e;
-  display: block;
-}
-
-.edit-post-fullscreen-mode-close-site-icon__icon {
-  fill: currentColor;
-  width: 100%;
-  height: 100%;
-  padding: 12px;
-}
-
-.edit-post-fullscreen-mode-close-site-icon__image {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
-  background: #333;
-  aspect-ratio: 1/1;
+.edit-post-fullscreen-mode-close__view-mode-toggle:hover .edit-post-fullscreen-mode-close__back-icon {
+  color: var(--wp-admin-theme-color);
 }
 
 .edit-post-fullscreen-mode-close.components-button:focus {
@@ -169,36 +160,16 @@
 
 .edit-post-fullscreen-mode-close__back-icon {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 64px;
-  height: 64px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsl(0, 0%, 80%);
   pointer-events: none;
 }
 .edit-post-fullscreen-mode-close__back-icon svg {
   fill: currentColor;
 }
-.edit-post-fullscreen-mode-close__back-icon.has-site-icon {
-  background-color: hsla(0, 0%, 100%, 0.6);
-  backdrop-filter: saturate(180%) blur(15px);
-}
-
-/**
- *  Show icon label overrides.
- */
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon {
-  width: 64px;
-}
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon svg {
-  display: block;
-}
-.show-icon-labels .editor-header .edit-post-fullscreen-mode-close.has-icon::after {
-  content: none;
-}
 
 .edit-post-meta-boxes-main {
   filter: drop-shadow(0 -1px rgba(0, 0, 0, 0.133));
@@ -446,57 +417,6 @@
   fill: #fff;
 }
 
-body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-}
-body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle .edit-post-fullscreen-mode-close__back-icon {
-  top: auto;
-  left: auto;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-}
-body.has-admin-bar-in-editor .edit-post-fullscreen-mode-close__view-mode-toggle:hover .edit-post-fullscreen-mode-close__back-icon {
-  color: var(--wp-admin-theme-color);
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button) {
-  grid-template-columns: 32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header:has(> .editor-header__back-button):has(> .editor-header__center) {
-  grid-template-columns: 32px min-content 1fr min-content 64px;
-}
-body.has-admin-bar-in-editor.is-fullscreen-mode .editor-header__back-button {
-  padding-left: 8px;
-}
-@media (min-width: 782px) {
-  body.has-admin-bar-in-editor.is-fullscreen-mode {
-    margin-top: 0;
-    height: 100%;
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
-    display: block;
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode .interface-interface-skeleton,
-  body.has-admin-bar-in-editor.is-fullscreen-mode .editor-post-publish-panel,
-  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
-  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
-    top: var(--wp-admin--admin-bar--height, 0);
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode .block-editor__container {
-    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
-    --wp-admin--admin-bar--height: 0;
-  }
-  body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
-    display: none;
-  }
-}
-
 body.js.block-editor-page {
   background: #fff;
 }
@@ -528,6 +448,14 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
   width: auto;
   max-width: 100%;
 }
+@media (min-width: 782px) {
+  body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) {
+    --wp-admin--admin-bar--height: 0px;
+  }
+  body.js.block-editor-page.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
+    display: none;
+  }
+}
 
 .block-editor-page #wpwrap {
   overflow-y: auto;
@@ -559,10 +487,7 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 }
 @media (min-width: 782px) {
   .block-editor__container {
-    min-height: calc(100vh - 32px);
-  }
-  body.is-fullscreen-mode .block-editor__container {
-    min-height: 100vh;
+    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
   }
 }
 .block-editor__container img {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.50.0",
+	"version": "8.50.1-next.v.202607070741.0+a51d59513",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,38 +47,38 @@
 		"postbox"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.50.0",
-		"@wordpress/admin-ui": "^2.5.0",
-		"@wordpress/api-fetch": "^7.50.0",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/block-editor": "^15.23.0",
-		"@wordpress/block-library": "^10.1.0",
-		"@wordpress/blocks": "^15.23.0",
-		"@wordpress/commands": "^1.50.0",
-		"@wordpress/components": "^36.1.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/core-data": "^7.50.0",
-		"@wordpress/data": "^10.50.0",
-		"@wordpress/deprecated": "^4.50.0",
-		"@wordpress/dom": "^4.50.0",
-		"@wordpress/editor": "^14.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/global-styles-engine": "^1.17.0",
-		"@wordpress/hooks": "^4.50.0",
-		"@wordpress/html-entities": "^4.50.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.50.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/notices": "^5.50.0",
-		"@wordpress/plugins": "^7.50.0",
-		"@wordpress/preferences": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/url": "^4.50.0",
-		"@wordpress/viewport": "^6.50.0",
-		"@wordpress/warning": "^3.50.0",
-		"@wordpress/widgets": "^4.50.0",
+		"@wordpress/a11y": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/admin-ui": "^2.5.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/api-fetch": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/block-editor": "^16.0.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/block-library": "^10.1.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/blocks": "^15.23.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/commands": "^1.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/components": "^37.0.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/core-data": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/data": "^10.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/deprecated": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/dom": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/editor": "^14.51.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/global-styles-engine": "^1.17.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/hooks": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/html-entities": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/keyboard-shortcuts": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/notices": "^5.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/plugins": "^7.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/preferences": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/url": "^4.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/viewport": "^6.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/warning": "^3.50.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/widgets": "^4.50.1-next.v.202607070741.0+a51d59513",
 		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
@@ -94,5 +94,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
 }

package/src/components/back-button/fullscreen-mode-close.js

@@ -1,122 +1,28 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	Button,
-	Icon as WCIcon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
+import { Button, Icon as WCIcon } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import {
-	wordpress,
-	arrowUpLeft,
-	arrowUpRight,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-const siteIconVariants = {
-	edit: {
-		clipPath: 'inset(0% round 0px)',
-	},
-	hover: {
-		clipPath: 'inset( 22% round 2px )',
-	},
-	tap: {
-		clipPath: 'inset(0% round 0px)',
-	},
-};
-
-const toggleHomeIconVariants = {
-	edit: {
-		opacity: 0,
-		scale: 0.2,
-	},
-	hover: {
-		opacity: 1,
-		scale: 1,
-		clipPath: 'inset( 22% round 2px )',
-	},
-};
 
 function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
-	const { isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
+	const postType = useSelect(
 		( select ) => {
 			const { getCurrentPostType } = select( editorStore );
-			const { getEntityRecord, getPostType, isResolving } =
-				select( coreStore );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-			const _postType = initialPost?.type || getCurrentPostType();
-			return {
-				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				postType: getPostType( _postType ),
-				siteIconUrl: siteData.site_icon_url,
-			};
+			const { getPostType } = select( coreStore );
+			return getPostType( initialPost?.type || getCurrentPostType() );
 		},
 		[ initialPost?.type ]
 	);
 
-	const disableMotion = useReducedMotion();
-	const transition = {
-		duration: disableMotion ? 0 : 0.2,
-	};
-
 	if ( ! postType ) {
 		return null;
 	}
 
-	// Create SiteIcon equivalent structure exactly like edit-site
-	let siteIconContent;
-	if ( isRequestingSiteIcon && ! siteIconUrl ) {
-		siteIconContent = (
-			<div className="edit-post-fullscreen-mode-close-site-icon__image" />
-		);
-	} else if ( siteIconUrl ) {
-		siteIconContent = (
-			<img
-				className="edit-post-fullscreen-mode-close-site-icon__image"
-				alt={ __( 'Site Icon' ) }
-				src={ siteIconUrl }
-			/>
-		);
-	} else {
-		siteIconContent = (
-			<WCIcon
-				className="edit-post-fullscreen-mode-close-site-icon__icon"
-				icon={ wordpress }
-				size={ 48 }
-			/>
-		);
-	}
-
-	// Override default icon if custom icon is provided via props.
-	const buttonIcon = icon ? (
-		<WCIcon size="36px" icon={ icon } />
-	) : (
-		<div className="edit-post-fullscreen-mode-close-site-icon">
-			{ siteIconContent }
-		</div>
-	);
-
-	const classes = clsx( 'edit-post-fullscreen-mode-close', {
-		'has-icon': siteIconUrl,
-	} );
-
 	const buttonHref =
 		href ??
 		addQueryArgs( 'edit.php', {
@@ -125,53 +31,22 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 
 	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
 
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
-
 	return (
-		<motion.div
-			className="edit-post-fullscreen-mode-close__view-mode-toggle"
-			animate="edit"
-			initial="edit"
-			whileHover="hover"
-			whileTap="tap"
-			transition={ transition }
-		>
+		<div className="edit-post-fullscreen-mode-close__view-mode-toggle">
 			<Button
 				__next40pxDefaultSize
-				className={ classes }
+				className="edit-post-fullscreen-mode-close"
 				href={ buttonHref }
 				label={ buttonLabel }
 				showTooltip={ showTooltip }
 				tooltipPosition="bottom"
-			>
-				{ ! hasAdminBarInEditor && (
-					<motion.div
-						variants={ ! disableMotion && siteIconVariants }
-					>
-						<div className="edit-post-fullscreen-mode-close__view-mode-toggle-icon">
-							{ buttonIcon }
-						</div>
-					</motion.div>
-				) }
-			</Button>
-			{ hasAdminBarInEditor ? (
-				<div className="edit-post-fullscreen-mode-close__back-icon">
-					<WCIcon icon={ isRTL() ? chevronRight : chevronLeft } />
-				</div>
-			) : (
-				<motion.div
-					className={ clsx(
-						'edit-post-fullscreen-mode-close__back-icon',
-						{
-							'has-site-icon': siteIconUrl,
-						}
-					) }
-					variants={ ! disableMotion && toggleHomeIconVariants }
-				>
-					<WCIcon icon={ isRTL() ? arrowUpRight : arrowUpLeft } />
-				</motion.div>
-			) }
-		</motion.div>
+			/>
+			<div className="edit-post-fullscreen-mode-close__back-icon">
+				<WCIcon
+					icon={ icon ?? ( isRTL() ? chevronRight : chevronLeft ) }
+				/>
+			</div>
+		</div>
 	);
 }