UI: Add a fullscreen mode (#9567)

* UI: Add a fullscreen mode

* Consistent return URL

* Remove unneccessary calc call

* Use the view_items label instead of a generic Close

* Fix small phpcs issues

edit-post/assets/stylesheets/_mixins.scss

@@ -272,6 +272,10 @@
  margin-left: -18px;
  }
  }
+
+ body.is-fullscreen-mode #{$selector} {
+ left: 0 !important;
+ }
 }
 
 /**

edit-post/assets/stylesheets/main.scss

@@ -105,11 +105,19 @@ body.gutenberg-editor-page {
  bottom: 0;
  left: 0;
  min-height: calc(100vh - #{ $admin-bar-height-big });
+
+ body.is-fullscreen-mode & {
+ min-height: 100vh;
+ }
  }
 
  // The WP header height changes at this breakpoint
  @include break-medium {
  min-height: calc(100vh - #{ $admin-bar-height });
+
+ body.is-fullscreen-mode & {
+ min-height: 100vh;
+ }
  }
 
  img {
@@ -262,3 +270,12 @@ body.gutenberg-editor-page {
 .ephox-snooker-resizer-bar-dragging {
  background: $blue-medium-500;
 }
+
+// This style is defined here instead of the modal component
+// because the modal should be context agnostic.
+.components-modal__content {
+ height: calc(100% - #{ $header-height } - #{ $admin-bar-height });
+ body.is-fullscreen-mode & {
+ height: calc(100% - #{ $header-height });
+ }
+}

edit-post/components/fullscreen-mode/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+class FullscreenMode extends Component {
+ componentDidMount() {
+ this.sync();
+ }
+
+ componentDidUpdate( prevProps ) {
+ if ( this.props.isActive !== prevProps.isActive ) {
+ this.sync();
+ }
+ }
+
+ sync() {
+ const { isActive } = this.props;
+ if ( isActive ) {
+ document.body.classList.add( 'is-fullscreen-mode' );
+ } else {
+ document.body.classList.remove( 'is-fullscreen-mode' );
+ }
+ }
+
+ render() {
+ return null;
+ }
+}
+
+export default withSelect( ( select ) => ( {
+ isActive: select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ),
+} ) )( FullscreenMode );

edit-post/components/fullscreen-mode/style.scss

@@ -0,0 +1,17 @@
+body.is-fullscreen-mode {
+ // Reset the html.wp-topbar padding
+ margin-top: -$admin-bar-height-big;
+ @include break-medium() {
+ margin-top: -$admin-bar-height;
+ }
+
+ #adminmenumain,
+ #wpadminbar {
+ display: none;
+ }
+
+ #wpcontent,
+ #wpfooter {
+ margin-left: 0;
+ }
+}

edit-post/components/header/feature-toggle/index.js

@@ -2,10 +2,6 @@
  * WordPress Dependencies
  */
 import { withSelect, withDispatch } from '@wordpress/data';
-
-/**
- * WordPress Dependencies
- */
 import { compose } from '@wordpress/compose';
 import { MenuItem } from '@wordpress/components';
 

edit-post/components/header/fullscreen-mode-close/index.js

@@ -0,0 +1,48 @@
+/**
+ * External Dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress Dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { IconButton, Toolbar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function FullscreenModeClose( { isActive, postType } ) {
+ if ( ! isActive || ! postType ) {
+ return null;
+ }
+
+ return (
+ <Toolbar className="edit-post-fullscreen-mode-close__toolbar">
+ <IconButton
+ icon="no-alt"
+ href={ addQueryArgs( 'edit.php', { post_type: postType.slug } ) }
+ label={ get(
+ postType,
+ [ 'labels', 'view_items' ],
+ __( 'View Posts' )
+ ) }
+ />
+ </Toolbar>
+ );
+}
+
+export default withSelect( ( select ) => {
+ const { getCurrentPostType } = select( 'core/editor' );
+ const { isFeatureActive } = select( 'core/edit-post' );
+ const { getPostType } = select( 'core' );
+
+ return {
+ isActive: isFeatureActive( 'fullscreenMode' ),
+ postType: getPostType( getCurrentPostType() ),
+ };
+} )( FullscreenModeClose );

edit-post/components/header/fullscreen-mode-close/style.scss

@@ -0,0 +1,7 @@
+.edit-post-fullscreen-mode-close__toolbar {
+ border-top: 0;
+ border-bottom: 0;
+ border-left: 0;
+ margin: -9px 10px -9px -10px;
+ padding: 9px 10px;
+}

edit-post/components/header/header-toolbar/index.js

@@ -23,13 +23,15 @@ import {
  * Internal dependencies
  */
 import './style.scss';
+import FullscreenModeClose from '../fullscreen-mode-close';
 
 function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
  return (
  <NavigableToolbar
  className="edit-post-header-toolbar"
  aria-label={ __( 'Editor Toolbar' ) }
  >
+ <FullscreenModeClose />
  <div>
  <Inserter position="bottom right" />
  <DotTip id="core/editor.inserter">

edit-post/components/header/style.scss

@@ -21,10 +21,18 @@
  position: fixed;
  padding: $item-spacing;
  top: $admin-bar-height-big;
+
+ body.is-fullscreen-mode & {
+ top: 0;
+ }
  }
 
  @include break-medium() {
  top: $admin-bar-height;
+
+ body.is-fullscreen-mode & {
+ top: 0;
+ }
  }
 
  .editor-post-switch-to-draft + .editor-post-preview {

edit-post/components/header/writing-menu/index.js

@@ -18,6 +18,7 @@ function WritingMenu( { onClose } ) {
  >
  <FeatureToggle feature="fixedToolbar" label={ __( 'Unified Toolbar' ) } onToggle={ onClose } />
  <FeatureToggle feature="focusMode" label={ __( 'Spotlight Mode' ) } onToggle={ onClose } />
+ <FeatureToggle feature="fullscreenMode" label={ __( 'Fullscreen Mode' ) } onToggle={ onClose } />
  </MenuGroup>
  );
 }

edit-post/components/layout/index.js

@@ -39,6 +39,7 @@ import { getMetaBoxContainer } from '../../utils/meta-boxes';
 import Sidebar from '../sidebar';
 import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
 import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
+import FullscreenMode from '../fullscreen-mode';
 
 function Layout( {
  mode,
@@ -68,6 +69,7 @@ function Layout( {
  };
  return (
  <div className={ className }>
+ <FullscreenMode />
  <BrowserURL />
  <UnsavedChangesWarning forceIsDirty={ () => {
  return some( metaBoxes, ( metaBox, location ) => {

edit-post/components/sidebar/style.scss

@@ -17,10 +17,18 @@
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
+
+ body.is-fullscreen-mode & {
+ top: $header-height;
+ }
  }
 
  @include break-medium() {
  top: $admin-bar-height + $header-height;
+
+ body.is-fullscreen-mode & {
+ top: $header-height;
+ }
  }
 
  > .components-panel {
@@ -33,6 +41,13 @@
  margin-top: -1px;
  margin-bottom: -1px;
 
+ body.is-fullscreen-mode & {
+ max-height: calc(100vh - #{ $panel-header-height });
+ @include break-small() {
+ max-height: none;
+ }
+ }
+
  @include break-small() {
  overflow: inherit;
  height: auto;

edit-post/components/text-editor/style.scss

@@ -3,10 +3,18 @@
 
  @include break-small() {
  padding-top: 40px + $admin-bar-height-big;
+
+ body.is-fullscreen-mode & {
+ padding-top: 40px;
+ }
  }
 
  @include break-medium() {
- padding-top: 40px + $admin-bar-height;
+ padding-top: 40px;
+
+ body.is-fullscreen-mode & {
+ padding-top: 40px;
+ }
  }
 }
 

gutenberg.php

@@ -435,5 +435,6 @@ function toggleDropdown() {
  * @return string The $classes string, with gutenberg-editor-page appended.
  */
 function gutenberg_add_admin_body_class( $classes ) {
- return "$classes gutenberg-editor-page";
+ // Default to is-fullscreen-mode to avoid jumps in the UI.
+ return "$classes gutenberg-editor-page is-fullscreen-mode";
 }

packages/components/src/modal/style.scss

@@ -83,7 +83,7 @@
 
 .components-modal__content {
  // The height of the content is the height of it's parent, minus the header. after that, the offset was 3px.
- height: calc(100% - #{ $header-height } - #{ $admin-bar-height });
+ height: 100%;
  overflow: auto;
  padding: $panel-padding;
 }