Backport adding the distraction free mode to the site editor (#51173)

packages/base-styles/_z-index.scss

@@ -182,6 +182,7 @@ $z-layers: (
  ".customize-widgets__block-toolbar": 7,
 
  // Site editor layout
+ ".edit-site-layout__header-container": 4,
  ".edit-site-layout__hub": 3,
  ".edit-site-layout__header": 2,
  ".edit-site-page-header": 2,

packages/block-editor/README.md

@@ -711,6 +711,7 @@ _Properties_
 - _maxWidth_ `number`: Max width to constraint resizing
 - _allowedBlockTypes_ `boolean|Array`: Allowed block types
 - _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
+- _distractionFree_ `boolean`: Whether or not the editor UI is distraction free
 - _focusMode_ `boolean`: Whether the focus mode is enabled or not
 - _styles_ `Array`: Editor Styles
 - _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode

packages/block-editor/src/store/defaults.js

@@ -18,6 +18,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {number} maxWidth Max width to constraint resizing
  * @property {boolean|Array} allowedBlockTypes Allowed block types
  * @property {boolean} hasFixedToolbar Whether or not the editor toolbar is fixed
+ * @property {boolean} distractionFree Whether or not the editor UI is distraction free
  * @property {boolean} focusMode Whether the focus mode is enabled or not
  * @property {Array} styles Editor Styles
  * @property {boolean} keepCaretInsideBlock Whether caret should move between blocks in edit mode

packages/edit-post/src/components/header/index.js

@@ -20,6 +20,16 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import DocumentTitle from './document-title';
 
+const slideY = {
+ hidden: { y: '-50px' },
+ hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+const slideX = {
+ hidden: { x: '-100%' },
+ hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
 function Header( { setEntitiesSavedStatesCallback } ) {
  const isLargeViewport = useViewportMatch( 'large' );
  const {
@@ -39,16 +49,6 @@ function Header( { setEntitiesSavedStatesCallback } ) {
  []
  );
 
- const slideY = {
- hidden: { y: '-50px' },
- hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
- };
-
- const slideX = {
- hidden: { x: '-100%' },
- hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
- };
-
  return (
  <div className="edit-post-header">
  <MainDashboardButton.Slot>

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -223,8 +223,6 @@ function KeyboardShortcuts() {
  } );
 
  useShortcut( 'core/edit-post/toggle-distraction-free', () => {
- closeGeneralSidebar();
- setIsListViewOpened( false );
  toggleDistractionFree();
  toggleFeature( 'distractionFree' );
  createInfoNotice(

packages/edit-site/src/components/editor/index.js

@@ -180,6 +180,7 @@ export default function Editor( { isLoading } ) {
  <SidebarComplementaryAreaFills />
  { isEditMode && <StartTemplateOptions /> }
  <InterfaceSkeleton
+ isDistractionFree={ true }
  enableRegionNavigation={ false }
  className={ classnames(
  'edit-site-editor__interface-skeleton',

packages/edit-site/src/components/editor/style.scss

@@ -6,6 +6,10 @@
  &.is-loading {
  opacity: 0;
  }
+
+ .interface-interface-skeleton__header {
+ border: 0;
+ }
 }
 
 .edit-site-editor__toggle-save-panel {

packages/edit-site/src/components/header-edit-mode/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useCallback, useRef } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import {
  ToolSelector,
@@ -21,6 +21,7 @@ import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
 import {
+ __unstableMotion as motion,
  Button,
  ToolbarItem,
  MenuGroup,
@@ -60,6 +61,7 @@ export default function HeaderEditMode() {
  isListViewOpen,
  listViewShortcut,
  isVisualMode,
+ isDistractionFree,
  blockEditorMode,
  homeUrl,
  showIconLabels,
@@ -99,6 +101,10 @@ export default function HeaderEditMode() {
  editorCanvasView: unlock(
  select( editSiteStore )
  ).getEditorCanvasContainerView(),
+ isDistractionFree: select( preferencesStore ).get(
+ 'core/edit-site',
+ 'distractionFree'
+ ),
  };
  }, [] );
 
@@ -108,6 +114,7 @@ export default function HeaderEditMode() {
  setIsListViewOpened,
  } = useDispatch( editSiteStore );
  const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+ const disableMotion = useReducedMotion();
 
  const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -156,6 +163,19 @@ export default function HeaderEditMode() {
  window?.__experimentalEnableZoomedOutView && isVisualMode;
  const isZoomedOutView = blockEditorMode === 'zoom-out';
 
+ const toolbarVariants = {
+ isDistractionFree: { y: '-50px' },
+ isDistractionFreeHovering: { y: 0 },
+ view: { y: 0 },
+ edit: { y: 0 },
+ };
+
+ const toolbarTransition = {
+ type: 'tween',
+ duration: disableMotion ? 0 : 0.2,
+ ease: 'easeOut',
+ };
+
  return (
  <div
  className={ classnames( 'edit-site-header-edit-mode', {
@@ -164,26 +184,33 @@ export default function HeaderEditMode() {
  >
  { hasDefaultEditorCanvasView && (
  <NavigableToolbar
+ as={ motion.div }
  className="edit-site-header-edit-mode__start"
  aria-label={ __( 'Document tools' ) }
  shouldUseKeyboardFocusShortcut={
  ! blockToolbarCanBeFocused
  }
+ variants={ toolbarVariants }
+ transition={ toolbarTransition }
  >
  <div className="edit-site-header-edit-mode__toolbar">
- <ToolbarItem
- ref={ inserterButton }
- as={ Button }
- className="edit-site-header-edit-mode__inserter-toggle"
- variant="primary"
- isPressed={ isInserterOpen }
- onMouseDown={ preventDefault }
- onClick={ toggleInserter }
- disabled={ ! isVisualMode }
- icon={ plus }
- label={ showIconLabels ? shortLabel : longLabel }
- showTooltip={ ! showIconLabels }
- />
+ { ! isDistractionFree && (
+ <ToolbarItem
+ ref={ inserterButton }
+ as={ Button }
+ className="edit-site-header-edit-mode__inserter-toggle"
+ variant="primary"
+ isPressed={ isInserterOpen }
+ onMouseDown={ preventDefault }
+ onClick={ toggleInserter }
+ disabled={ ! isVisualMode }
+ icon={ plus }
+ label={
+ showIconLabels ? shortLabel : longLabel
+ }
+ showTooltip={ ! showIconLabels }
+ />
+ ) }
  { isLargeViewport && (
  <>
  <ToolbarItem
@@ -208,57 +235,70 @@ export default function HeaderEditMode() {
  showIconLabels ? 'tertiary' : undefined
  }
  />
- <ToolbarItem
- as={ Button }
- className="edit-site-header-edit-mode__list-view-toggle"
- disabled={
- ! isVisualMode || isZoomedOutView
- }
- icon={ listView }
- isPressed={ isListViewOpen }
- /* translators: button label text should, if possible, be under 16 characters. */
- label={ __( 'List View' ) }
- onClick={ toggleListView }
- shortcut={ listViewShortcut }
- showTooltip={ ! showIconLabels }
- variant={
- showIconLabels ? 'tertiary' : undefined
- }
- />
- { isZoomedOutViewExperimentEnabled && (
+ { ! isDistractionFree && (
  <ToolbarItem
  as={ Button }
- className="edit-site-header-edit-mode__zoom-out-view-toggle"
- icon={ chevronUpDown }
- isPressed={ isZoomedOutView }
+ className="edit-site-header-edit-mode__list-view-toggle"
+ disabled={
+ ! isVisualMode || isZoomedOutView
+ }
+ icon={ listView }
+ isPressed={ isListViewOpen }
  /* translators: button label text should, if possible, be under 16 characters. */
- label={ __( 'Zoom-out View' ) }
- onClick={ () => {
-  setPreviewDeviceType( 'desktop' );
-  __unstableSetEditorMode(
-  isZoomedOutView
-  ? 'edit'
-  : 'zoom-out'
- );
- } }
+ label={ __( 'List View' ) }
+ onClick={ toggleListView }
+ shortcut={ listViewShortcut }
+ showTooltip={ ! showIconLabels }
+ variant={
+ showIconLabels
+ ? 'tertiary'
+  : undefined
+ }
  />
  ) }
+ { isZoomedOutViewExperimentEnabled &&
+ ! isDistractionFree && (
+ <ToolbarItem
+ as={ Button }
+ className="edit-site-header-edit-mode__zoom-out-view-toggle"
+ icon={ chevronUpDown }
+ isPressed={ isZoomedOutView }
+ /* translators: button label text should, if possible, be under 16 characters. */
+ label={ __( 'Zoom-out View' ) }
+ onClick={ () => {
+ setPreviewDeviceType(
+ 'desktop'
+ );
+ __unstableSetEditorMode(
+ isZoomedOutView
+ ? 'edit'
+ : 'zoom-out'
+ );
+ } }
+ />
+ ) }
  </>
  ) }
  </div>
  </NavigableToolbar>
  ) }
 
- <div className="edit-site-header-edit-mode__center">
- { ! hasDefaultEditorCanvasView ? (
- getEditorCanvasContainerTitle( editorCanvasView )
- ) : (
- <DocumentActions />
- ) }
- </div>
+ { ! isDistractionFree && (
+ <div className="edit-site-header-edit-mode__center">
+ { ! hasDefaultEditorCanvasView ? (
+ getEditorCanvasContainerTitle( editorCanvasView )
+ ) : (
+ <DocumentActions />
+ ) }
+ </div>
+ ) }
 
  <div className="edit-site-header-edit-mode__end">
- <div className="edit-site-header-edit-mode__actions">
+ <motion.div
+ className="edit-site-header-edit-mode__actions"
+ variants={ toolbarVariants }
+ transition={ toolbarTransition }
+ >
  { ! isFocusMode && hasDefaultEditorCanvasView && (
  <div
  className={ classnames(
@@ -290,9 +330,11 @@ export default function HeaderEditMode() {
  </div>
  ) }
  <SaveButton />
- <PinnedItems.Slot scope="core/edit-site" />
+ { ! isDistractionFree && (
+ <PinnedItems.Slot scope="core/edit-site" />
+ ) }
  <MoreMenu showIconLabels={ showIconLabels } />
- </div>
+ </motion.div>
  </div>
  </div>
  );