Editor: Move the InterfaceSkeleton to the editor package (#62118)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: draganescu <[email protected]>

packages/edit-post/src/components/header/fullscreen-mode-close/index.js → packages/edit-post/src/components/back-button/fullscreen-mode-close.js

@@ -22,7 +22,7 @@ import { useReducedMotion } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../../store';
+import { store as editPostStore } from '../../store';
 
 function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
 	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(

packages/edit-post/src/components/back-button/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from './fullscreen-mode-close';
+import { unlock } from '../../lock-unlock';
+
+const { BackButton: BackButtonFill } = unlock( editorPrivateApis );
+
+const slideX = {
+	hidden: { x: '-100%' },
+	distractionFreeInactive: { x: 0 },
+	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function BackButton( { initialPost } ) {
+	return (
+		<BackButtonFill>
+			<motion.div
+				variants={ slideX }
+				transition={ { type: 'tween', delay: 0.8 } }
+			>
+				<FullscreenModeClose showTooltip initialPost={ initialPost } />
+			</motion.div>
+		</BackButtonFill>
+	);
+}
+
+export default BackButton;

packages/edit-post/src/components/header/fullscreen-mode-close/style.scss → packages/edit-post/src/components/back-button/style.scss

@@ -64,3 +64,18 @@
 		margin-top: -($border-width);
 	}
 }
+
+/**
+ *  Show icon label overrides.
+ */
+.show-icon-labels .editor-header {
+	.edit-post-fullscreen-mode-close.has-icon {
+		width: $header-height;
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+}

packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js → packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js

@@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import FullscreenModeClose from '../';
+import FullscreenModeClose from '../fullscreen-mode-close';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => {
 	// This allows us to tweak the returned value on each test.