From 8cfff4b68615e6fb0d2675e2057be5e682b355eb Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Fri, 20 Mar 2020 21:22:06 +0100
Subject: [PATCH 1/4] Site Editor: add fullscreen mode close button

---
 packages/edit-site/package.json               |  1 +
 .../header/fullscreen-mode-close/index.js     | 35 +++++++++++++++++++
 .../header/fullscreen-mode-close/style.scss   | 29 +++++++++++++++
 .../edit-site/src/components/header/index.js  |  2 ++
 packages/edit-site/src/style.scss             |  1 +
 5 files changed, 68 insertions(+)
 create mode 100644 packages/edit-site/src/components/header/fullscreen-mode-close/index.js
 create mode 100644 packages/edit-site/src/components/header/fullscreen-mode-close/style.scss

diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 26bd51227b58d..ff137e45207cc 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -35,6 +35,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
+		"@wordpress/primitives": "^1.1.0",
 		"@wordpress/url": "file:../url",
 		"file-saver": "^2.0.2",
 		"jszip": "^3.2.2",
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js
new file mode 100644
index 0000000000000..e5a14f30af66b
--- /dev/null
+++ b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
+import { __ } from '@wordpress/i18n';
+
+const wordPressLogo = (
+	<SVG width="28" height="28" viewBox="0 0 128 128" version="1.1">
+		<Path d="M100 61.3c0-6.6-2.4-11.2-4.4-14.7-2.7-4.4-5.2-8.1-5.2-12.5 0-4.9 3.7-9.5 9-9.5h.7c-9.5-8.7-22.1-14-36-14-18.6 0-35 9.6-44.6 24 1.3 0 2.4.1 3.4.1 5.6 0 14.2-.7 14.2-.7 2.9-.2 3.2 4.1.3 4.4 0 0-2.9.3-6.1.5l19.4 57.8 11.7-35L54.1 39c-2.9-.2-5.6-.5-5.6-.5-2.9-.2-2.5-4.6.3-4.4 0 0 8.8.7 14 .7 5.6 0 14.2-.7 14.2-.7 2.9-.2 3.2 4.1.3 4.4 0 0-2.9.3-6.1.5l19.3 57.3L96 78.9c2.6-7.6 4-13 4-17.6zM10.7 64c0 21.1 12.3 39.4 30.1 48L15.3 42.3c-3 6.6-4.6 14-4.6 21.7zm54.2 4.7l-16 46.5c4.8 1.4 9.8 2.2 15.1 2.2 6.2 0 12.2-1.1 17.7-3-.1-.2-.3-.5-.4-.7l-16.4-45zM64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm49.9 97.6c-2.2 3.2-4.6 6.2-7.3 8.9s-5.7 5.2-8.9 7.3c-3.2 2.2-6.7 4-10.2 5.5-7.4 3.1-15.3 4.7-23.4 4.7s-16-1.6-23.4-4.7c-3.6-1.5-7-3.4-10.2-5.5-3.2-2.2-6.2-4.6-8.9-7.3s-5.2-5.7-7.3-8.9c-2.2-3.2-4-6.7-5.5-10.2-3.4-7.4-5-15.3-5-23.4s1.6-16 4.7-23.4c1.5-3.6 3.4-7 5.5-10.2 2.2-3.2 4.6-6.2 7.3-8.9s5.7-5.2 8.9-7.3c3.2-2.2 6.7-4 10.2-5.5C48 5.4 55.9 3.8 64 3.8s16 1.6 23.4 4.7c3.6 1.5 7 3.4 10.2 5.5 3.2 2.2 6.2 4.6 8.9 7.3s5.2 5.7 7.3 8.9c2.2 3.2 4 6.7 5.5 10.2 3.1 7.4 4.7 15.3 4.7 23.4s-1.6 16-4.7 23.4c-1.4 3.8-3.2 7.2-5.4 10.4zm-2.7-53.7c0 5.4-1 11.5-4.1 19.1l-16.3 47.1c15.9-9.2 26.5-26.4 26.5-46.1 0-9.3-2.4-18-6.5-25.6.2 1.7.4 3.5.4 5.5z" />
+	</SVG>
+);
+
+function FullscreenModeClose() {
+	const isActive = useSelect( ( select ) => {
+		return select( 'core/edit-site' ).isFeatureActive( 'fullscreenMode' );
+	}, [] );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return (
+		<Button
+			className="edit-site-fullscreen-mode-close"
+			icon={ wordPressLogo }
+			iconSize={ 36 }
+			href="index.php"
+			label={ __( 'Back' ) }
+		/>
+	);
+}
+
+export default FullscreenModeClose;
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
new file mode 100644
index 0000000000000..a8ae5d8e44626
--- /dev/null
+++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss
@@ -0,0 +1,29 @@
+.edit-site-fullscreen-mode-close.has-icon {
+	// Do not show the toolbar icon on small screens,
+	// when Fullscreen Mode is not an option in the "More" menu.
+	display: none;
+
+	@include break-medium() {
+		display: flex;
+		align-items: center;
+		align-self: stretch;
+		border: none;
+		background: #23282e; // WP-admin gray.
+		color: $white;
+		border-radius: 0;
+		height: auto;
+		width: $header-height;
+
+		&:hover {
+			background: #32373d; // WP-admin light-gray.
+		}
+
+		&:active {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 3px $white;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 71fb133b7c823..912dca25e85f4 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -8,6 +8,7 @@ import { BlockNavigationDropdown, ToolSelector } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { useEditorContext } from '../editor';
+import FullscreenModeClose from './fullscreen-mode-close';
 import MoreMenu from './more-menu';
 import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
@@ -44,6 +45,7 @@ export default function Header() {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header__toolbar">
+				<FullscreenModeClose />
 				<TemplateSwitcher
 					ids={ settings.templateIds }
 					templatePartIds={ settings.templatePartIds }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 89a9b929e9e35..d4145ab69a71a 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -1,5 +1,6 @@
 @import "./components/block-editor/style.scss";
 @import "./components/header/style.scss";
+@import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/more-menu/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/sidebar/style.scss";

From 02453f2dd2a897e07fe09f722b4b4194c7306178 Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Fri, 20 Mar 2020 22:02:00 +0100
Subject: [PATCH 2/4] Make it look similar like in post editor

---
 packages/edit-site/src/components/header/index.js   | 2 +-
 packages/edit-site/src/components/header/style.scss | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 912dca25e85f4..a69b8508ee8cc 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -44,8 +44,8 @@ export default function Header() {
 	);
 	return (
 		<div className="edit-site-header">
+			<FullscreenModeClose />
 			<div className="edit-site-header__toolbar">
-				<FullscreenModeClose />
 				<TemplateSwitcher
 					ids={ settings.templateIds }
 					templatePartIds={ settings.templatePartIds }
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
index 43b1422aa1251..37312b6e619ed 100644
--- a/packages/edit-site/src/components/header/style.scss
+++ b/packages/edit-site/src/components/header/style.scss
@@ -3,18 +3,21 @@
 	display: flex;
 	height: $header-height;
 	justify-content: space-between;
-	padding: $grid-unit-10;
 	box-sizing: border-box;
 }
 
-.edit-site-header__toolbar,
-.edit-site-header__actions {
+.edit-site-header__toolbar {
 	display: flex;
+	flex-grow: 1;
 
 	& > * {
 		margin-left: 5px;
 	}
 }
+.edit-site-header__actions {
+	display: flex;
+	margin-right: 8px;
+}
 
 .edit-site-header__actions-more-menu {
 	margin-left: -4px;

From 58ce859df1858d4f145fa5225e3e0979b935a87f Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Mon, 23 Mar 2020 11:55:56 +0100
Subject: [PATCH 3/4] Make fullscreen mode enabled by default

---
 packages/edit-site/src/store/defaults.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/store/defaults.js b/packages/edit-site/src/store/defaults.js
index 3385189ea64ee..b7f95f64d6cfb 100644
--- a/packages/edit-site/src/store/defaults.js
+++ b/packages/edit-site/src/store/defaults.js
@@ -1,5 +1,5 @@
 export const PREFERENCES_DEFAULTS = {
 	features: {
-		fullscreenMode: false,
+		fullscreenMode: true,
 	},
 };

From 96b66140a7d070bf1ed655bb18fd0c2b26e4d269 Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Mon, 23 Mar 2020 15:22:17 +0100
Subject: [PATCH 4/4] Update package-lock.json

---
 package-lock.json               | 1 +
 packages/edit-site/package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6938a356534e8..1909d81dad98f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10849,6 +10849,7 @@
 				"@wordpress/icons": "file:packages/icons",
 				"@wordpress/media-utils": "file:packages/media-utils",
 				"@wordpress/notices": "file:packages/notices",
+				"@wordpress/primitives": "file:packages/primitives",
 				"@wordpress/url": "file:packages/url",
 				"file-saver": "^2.0.2",
 				"jszip": "^3.2.2",
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index ff137e45207cc..3be57eb0b4ee7 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -35,7 +35,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
-		"@wordpress/primitives": "^1.1.0",
+		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/url": "file:../url",
 		"file-saver": "^2.0.2",
 		"jszip": "^3.2.2",