Add default restoration of UI when exiting distraction free mode (#58455

) * remove duplicate pref setter, show breadcrumbs if dfm is off, always restore toolbar to non fixed * dispatch the toggle action for writing menu items * add handleToggling prop to the pref toggle component for toggle handlers that also toggle, fixedbug with undo link in snackbar
WordPress · Feb 6, 2024 · 4ea4431 · 4ea4431
1 parent 7629b70
commit 4ea4431
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 41 deletions.
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -10,29 +10,15 @@ import {
  PreferenceToggleMenuItem,
  store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as postEditorStore } from '../../../store';
 
 function WritingMenu() {
- const registry = useRegistry();
-
- const { closeGeneralSidebar } = useDispatch( postEditorStore );
  const { set: setPreference } = useDispatch( preferencesStore );
- const { setIsInserterOpened, setIsListViewOpened } =
- useDispatch( editorStore );
-
- const toggleDistractionFree = () => {
- registry.batch( () => {
- setPreference( 'core', 'fixedToolbar', true );
- setIsInserterOpened( false );
- setIsListViewOpened( false );
- closeGeneralSidebar();
- } );
- };
+ const { toggleDistractionFree } = useDispatch( postEditorStore );
 
  const turnOffDistractionFree = () => {
  setPreference( 'core', 'distractionFree', false );
@@ -59,6 +45,7 @@ function WritingMenu() {
  <PreferenceToggleMenuItem
  scope="core"
  name="distractionFree"
+ handleToggling={ false }
  onToggle={ toggleDistractionFree }
  label={ __( 'Distraction free' ) }
  info={ __( 'Write with calmness' ) }

diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
@@ -541,6 +541,11 @@ export const toggleDistractionFree =
  const isDistractionFree = registry
  .select( preferencesStore )
  .get( 'core', 'distractionFree' );
+ if ( isDistractionFree ) {
+ registry
+ .dispatch( preferencesStore )
+ .set( 'core', 'fixedToolbar', false );
+ }
  if ( ! isDistractionFree ) {
  registry.batch( () => {
  registry
@@ -568,9 +573,21 @@ export const toggleDistractionFree =
  {
  label: __( 'Undo' ),
  onClick: () => {
- registry
- .dispatch( preferencesStore )
- .toggle( 'core', 'distractionFree' );
+ registry.batch( () => {
+ registry
+ .dispatch( preferencesStore )
+ .set(
+ 'core',
+ 'fixedToolbar',
+ isDistractionFree ? true : false
+ );
+ registry
+ .dispatch( preferencesStore )
+ .toggle(
+ 'core',
+ 'distractionFree'
+ );
+ } );
  },
  },
  ],

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -106,6 +106,7 @@ export default function Editor( { isLoading } ) {
  isRightSidebarOpen,
  isInserterOpen,
  isListViewOpen,
+ isDistractionFree,
  showIconLabels,
  showBlockBreadcrumbs,
  postTypeLabel,
@@ -140,6 +141,7 @@ export default function Editor( { isLoading } ) {
  isRightSidebarOpen: getActiveComplementaryArea(
  editSiteStore.name
  ),
+ isDistractionFree: get( 'core', 'distractionFree' ),
  showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
  showIconLabels: get( 'core', 'showIconLabels' ),
  postTypeLabel: getPostTypeLabel(),
@@ -150,6 +152,7 @@ export default function Editor( { isLoading } ) {
  const isEditMode = canvasMode === 'edit';
  const showVisualEditor = isViewMode || editorMode === 'visual';
  const shouldShowBlockBreadcrumbs =
+ ! isDistractionFree &&
  showBlockBreadcrumbs &&
  isEditMode &&
  showVisualEditor &&
@@ -210,7 +213,7 @@ export default function Editor( { isLoading } ) {
  <SidebarComplementaryAreaFills />
  { isEditMode && <StartTemplateOptions /> }
  <InterfaceSkeleton
- isDistractionFree={ true }
+ isDistractionFree={ isDistractionFree }
  enableRegionNavigation={ false }
  className={ classnames(
  'edit-site-editor__interface-skeleton',

diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external } from '@wordpress/icons';
 import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
@@ -15,7 +15,6 @@ import {
  PreferenceToggleMenuItem,
  store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -34,28 +33,16 @@ import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
-import { store as siteEditorStore } from '../../../store';
+import { store as editSiteStore } from '../../../store';
 
 export default function MoreMenu( { showIconLabels } ) {
- const registry = useRegistry();
-
- const { closeGeneralSidebar } = useDispatch( siteEditorStore );
- const { setIsInserterOpened, setIsListViewOpened } =
- useDispatch( editorStore );
  const { openModal } = useDispatch( interfaceStore );
  const { set: setPreference } = useDispatch( preferencesStore );
  const isBlockBasedTheme = useSelect( ( select ) => {
  return select( coreStore ).getCurrentTheme().is_block_theme;
  }, [] );
 
- const toggleDistractionFree = () => {
- registry.batch( () => {
- setPreference( 'core', 'fixedToolbar', true );
- setIsInserterOpened( false );
- setIsListViewOpened( false );
- closeGeneralSidebar();
- } );
- };
+ const { toggleDistractionFree } = useDispatch( editSiteStore );
 
  const turnOffDistractionFree = () => {
  setPreference( 'core', 'distractionFree', false );
@@ -90,9 +77,10 @@ export default function MoreMenu( { showIconLabels } ) {
  <PreferenceToggleMenuItem
  scope="core"
  name="distractionFree"
- onToggle={ toggleDistractionFree }
  label={ __( 'Distraction free' ) }
  info={ __( 'Write with calmness' ) }
+ handleToggling={ false }
+ onToggle={ toggleDistractionFree }
  messageActivated={ __(
  'Distraction free mode activated'
  ) }

diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
@@ -559,6 +559,11 @@ export const toggleDistractionFree =
  const isDistractionFree = registry
  .select( preferencesStore )
  .get( 'core', 'distractionFree' );
+ if ( isDistractionFree ) {
+ registry
+ .dispatch( preferencesStore )
+ .set( 'core', 'fixedToolbar', false );
+ }
  if ( ! isDistractionFree ) {
  registry.batch( () => {
  registry
@@ -586,9 +591,21 @@ export const toggleDistractionFree =
  {
  label: __( 'Undo' ),
  onClick: () => {
- registry
- .dispatch( preferencesStore )
- .toggle( 'core', 'distractionFree' );
+ registry.batch( () => {
+ registry
+ .dispatch( preferencesStore )
+ .set(
+ 'core',
+ 'fixedToolbar',
+ isDistractionFree ? true : false
+ );
+ registry
+ .dispatch( preferencesStore )
+ .toggle(
+ 'core',
+ 'distractionFree'
+ );
+ } );
  },
  },
  ],

diff --git a/packages/preferences/src/components/preference-toggle-menu-item/index.js b/packages/preferences/src/components/preference-toggle-menu-item/index.js
@@ -20,6 +20,7 @@ export default function PreferenceToggleMenuItem( {
  messageActivated,
  messageDeactivated,
  shortcut,
+ handleToggling = true,
  onToggle = () => null,
  disabled = false,
 } ) {
@@ -56,7 +57,9 @@ export default function PreferenceToggleMenuItem( {
  isSelected={ isActive }
  onClick={ () => {
  onToggle();
- toggle( scope, name );
+ if ( handleToggling ) {
+ toggle( scope, name );
+ }
  speakMessage();
  } }
  role="menuitemcheckbox"