Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Toggle Distraction free mode mode based on compatibility #54030

Merged
merged 4 commits into from
Aug 30, 2023
Merged

Toggle Distraction free mode mode based on compatibility #54030

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a2b4c3c
Toggle DFM mode based on compatibility
ntsekouras Aug 29, 2023
b21ee24
rename `dfm` to `distractionFreeMode`
ntsekouras Aug 30, 2023
d6bc4cb
add tests
ntsekouras Aug 30, 2023
0ccfddb
rename to `isDistractionFree`
ntsekouras Aug 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/reference-guides/data/data-core-edit-site.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,10 @@ _Returns_

Undocumented declaration.

### toggleDistractionFree

Action that toggles distraction free mode. DFM expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved

### toggleFeature

Dispatches an action that toggles a feature flag.
Expand Down
32 changes: 2 additions & 30 deletions packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as interfaceStore } from '@wordpress/interface';
import { createBlock } from '@wordpress/blocks';
import { store as preferencesStore } from '@wordpress/preferences';
import { store as noticesStore } from '@wordpress/notices';

/**
* Internal dependencies
Expand All @@ -32,30 +29,15 @@ function KeyboardShortcutsEditMode() {
[]
);
const { redo, undo } = useDispatch( coreStore );
const {
setIsListViewOpened,
switchEditorMode,
setIsInserterOpened,
closeGeneralSidebar,
} = useDispatch( editSiteStore );
const { setIsListViewOpened, switchEditorMode, toggleDistractionFree } =
useDispatch( editSiteStore );
const { enableComplementaryArea, disableComplementaryArea } =
useDispatch( interfaceStore );

const { replaceBlocks } = useDispatch( blockEditorStore );
const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
useSelect( blockEditorStore );

const { get: getPreference } = useSelect( preferencesStore );
const { set: setPreference, toggle } = useDispatch( preferencesStore );
const { createInfoNotice } = useDispatch( noticesStore );

const toggleDistractionFree = () => {
setPreference( 'core/edit-site', 'fixedToolbar', false );
setIsInserterOpened( false );
setIsListViewOpened( false );
closeGeneralSidebar();
};

const handleTextLevelShortcut = ( event, level ) => {
event.preventDefault();
const destinationBlockName =
Expand Down Expand Up @@ -134,16 +116,6 @@ function KeyboardShortcutsEditMode() {

useShortcut( 'core/edit-site/toggle-distraction-free', () => {
toggleDistractionFree();
toggle( 'core/edit-site', 'distractionFree' );
createInfoNotice(
getPreference( 'core/edit-site', 'distractionFree' )
? __( 'Distraction free mode turned on.' )
: __( 'Distraction free mode turned off.' ),
{
id: 'core/edit-site/distraction-free-mode/notice',
type: 'snackbar',
}
);
} );

return null;
Expand Down
41 changes: 1 addition & 40 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { useViewportMatch } from '@wordpress/compose';
import { BlockEditorProvider } from '@wordpress/block-editor';
import { humanTimeDiff } from '@wordpress/date';
import { useCallback } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
Expand All @@ -35,24 +33,7 @@ const noop = () => {};
export function SidebarNavigationItemGlobalStyles( props ) {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const { createNotice } = useDispatch( noticesStore );
const { set: setPreference } = useDispatch( preferencesStore );
const { get: getPreference } = useSelect( preferencesStore );

const turnOffDistractionFreeMode = useCallback( () => {
const isDistractionFree = getPreference(
editSiteStore.name,
'distractionFree'
);
if ( ! isDistractionFree ) {
return;
}
setPreference( editSiteStore.name, 'distractionFree', false );
createNotice( 'info', __( 'Distraction free mode turned off' ), {
isDismissible: true,
type: 'snackbar',
} );
}, [ createNotice, setPreference, getPreference ] );
const hasGlobalStyleVariations = useSelect(
( select ) =>
!! select(
Expand All @@ -73,7 +54,6 @@ export function SidebarNavigationItemGlobalStyles( props ) {
<SidebarNavigationItem
{ ...props }
onClick={ () => {
turnOffDistractionFreeMode();
// Switch to edit mode.
setCanvasMode( 'edit' );
// Open global styles sidebar.
Expand Down Expand Up @@ -150,9 +130,6 @@ export default function SidebarNavigationScreenGlobalStyles() {
const { setCanvasMode, setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const { createNotice } = useDispatch( noticesStore );
const { set: setPreference } = useDispatch( preferencesStore );
const { get: getPreference } = useSelect( preferencesStore );
const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
( select ) => {
const { getCanvasMode, getEditorCanvasContainerView } = unlock(
Expand All @@ -176,28 +153,12 @@ export default function SidebarNavigationScreenGlobalStyles() {
[]
);

const turnOffDistractionFreeMode = useCallback( () => {
const isDistractionFree = getPreference(
editSiteStore.name,
'distractionFree'
);
if ( ! isDistractionFree ) {
return;
}
setPreference( editSiteStore.name, 'distractionFree', false );
createNotice( 'info', __( 'Distraction free mode turned off' ), {
isDismissible: true,
type: 'snackbar',
} );
}, [ createNotice, setPreference, getPreference ] );

const openGlobalStyles = useCallback( async () => {
turnOffDistractionFreeMode();
return Promise.all( [
setCanvasMode( 'edit' ),
openGeneralSidebar( 'edit-site/global-styles' ),
] );
}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
}, [ setCanvasMode, openGeneralSidebar ] );

const openStyleBook = useCallback( async () => {
await openGlobalStyles();
Expand Down
22 changes: 0 additions & 22 deletions packages/edit-site/src/hooks/commands/use-common-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { store as preferencesStore } from '@wordpress/preferences';
import { store as coreStore } from '@wordpress/core-data';
import { store as noticesStore } from '@wordpress/notices';
import { useViewportMatch } from '@wordpress/compose';

/**
Expand All @@ -31,16 +30,7 @@ function useGlobalStylesOpenStylesCommands() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isEditorPage = ! getIsListPage( params, isMobileViewport );
const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
const { set } = useDispatch( preferencesStore );
const { createInfoNotice } = useDispatch( noticesStore );

const history = useHistory();
const isDistractionFree = useSelect( ( select ) => {
return select( preferencesStore ).get(
editSiteStore.name,
'distractionFree'
);
}, [] );

const isBlockBasedTheme = useSelect( ( select ) => {
return select( coreStore ).getCurrentTheme().is_block_theme;
Expand All @@ -66,15 +56,6 @@ function useGlobalStylesOpenStylesCommands() {
if ( isEditorPage && getCanvasMode() !== 'edit' ) {
setCanvasMode( 'edit' );
}
if ( isDistractionFree ) {
set( editSiteStore.name, 'distractionFree', false );
createInfoNotice(
__( 'Distraction free mode turned off.' ),
{
type: 'snackbar',
}
);
}
openGeneralSidebar( 'edit-site/global-styles' );
},
icon: styles,
Expand All @@ -85,11 +66,8 @@ function useGlobalStylesOpenStylesCommands() {
openGeneralSidebar,
setCanvasMode,
isEditorPage,
createInfoNotice,
getCanvasMode,
isDistractionFree,
isBlockBasedTheme,
set,
] );

return {
Expand Down
28 changes: 11 additions & 17 deletions packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ function useEditUICommands() {
const {
openGeneralSidebar,
closeGeneralSidebar,
setIsInserterOpened,
toggleDistractionFree,
setIsListViewOpened,
switchEditorMode,
} = useDispatch( editSiteStore );
Expand All @@ -205,6 +205,7 @@ function useEditUICommands() {
activeSidebar,
showBlockBreadcrumbs,
isListViewOpen,
isDistractionFree,
} = useSelect( ( select ) => {
const { isListViewOpened, getEditorMode } = select( editSiteStore );
return {
Expand All @@ -218,11 +219,14 @@ function useEditUICommands() {
'showBlockBreadcrumbs'
),
isListViewOpen: isListViewOpened(),
isDistractionFree: select( preferencesStore ).get(
editSiteStore.name,
'distractionFree'
),
};
}, [] );
const { openModal } = useDispatch( interfaceStore );
const { get: getPreference } = useSelect( preferencesStore );
const { set: setPreference, toggle } = useDispatch( preferencesStore );
const { toggle } = useDispatch( preferencesStore );
const { createInfoNotice } = useDispatch( noticesStore );

if ( canvasMode !== 'edit' ) {
Expand Down Expand Up @@ -272,20 +276,7 @@ function useEditUICommands() {
name: 'core/toggle-distraction-free',
label: __( 'Toggle distraction free' ),
callback: ( { close } ) => {
setPreference( 'core/edit-site', 'fixedToolbar', false );
setIsInserterOpened( false );
setIsListViewOpened( false );
closeGeneralSidebar();
toggle( 'core/edit-site', 'distractionFree' );
createInfoNotice(
getPreference( 'core/edit-site', 'distractionFree' )
? __( 'Distraction free on.' )
: __( 'Distraction free off.' ),
{
id: 'core/edit-site/distraction-free-mode/notice',
type: 'snackbar',
}
);
toggleDistractionFree();
close();
},
} );
Expand All @@ -295,6 +286,9 @@ function useEditUICommands() {
label: __( 'Toggle top toolbar' ),
callback: ( { close } ) => {
toggle( 'core/edit-site', 'fixedToolbar' );
if ( isDistractionFree ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now this is the only one left from the issue, because we call directly the preferences store action.

toggleDistractionFree();
}
close();
},
} );
Expand Down
77 changes: 70 additions & 7 deletions packages/edit-site/src/store/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,12 +373,20 @@ export function updateSettings( settings ) {
* @param {boolean} isOpen If true, opens the list view. If false, closes it.
* It does not toggle the state, but sets it directly.
*/
export function setIsListViewOpened( isOpen ) {
return {
type: 'SET_IS_LIST_VIEW_OPENED',
isOpen,
export const setIsListViewOpened =
( isOpen ) =>
( { dispatch, registry } ) => {
const distractionFreeMode = registry
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
.select( preferencesStore )
.get( 'core/edit-site', 'distractionFree' );
if ( distractionFreeMode && isOpen ) {
dispatch.toggleDistractionFree();
}
dispatch( {
type: 'SET_IS_LIST_VIEW_OPENED',
isOpen,
} );
};
}

/**
* Sets whether the save view panel should be open.
Expand Down Expand Up @@ -533,7 +541,13 @@ export const revertTemplate =
*/
export const openGeneralSidebar =
( name ) =>
( { registry } ) => {
( { dispatch, registry } ) => {
const distractionFreeMode = registry
.select( preferencesStore )
.get( 'core/edit-site', 'distractionFree' );
if ( distractionFreeMode ) {
dispatch.toggleDistractionFree();
}
registry
.dispatch( interfaceStore )
.enableComplementaryArea( editSiteStoreName, name );
Expand All @@ -552,7 +566,7 @@ export const closeGeneralSidebar =

export const switchEditorMode =
( mode ) =>
( { registry } ) => {
( { dispatch, registry } ) => {
registry
.dispatch( 'core/preferences' )
.set( 'core/edit-site', 'editorMode', mode );
Expand All @@ -565,6 +579,12 @@ export const switchEditorMode =
if ( mode === 'visual' ) {
speak( __( 'Visual editor selected' ), 'assertive' );
} else if ( mode === 'text' ) {
const distractionFreeMode = registry
.select( preferencesStore )
.get( 'core/edit-site', 'distractionFree' );
if ( distractionFreeMode ) {
dispatch.toggleDistractionFree();
}
speak( __( 'Code editor selected' ), 'assertive' );
}
};
Expand All @@ -587,3 +607,46 @@ export const setHasPageContentFocus =
hasPageContentFocus,
} );
};

/**
* Action that toggles distraction free mode.
* DFM expects there are no sidebars, as due to the
* z-index values set, you can't close sidebars.
*/
export const toggleDistractionFree =
() =>
( { dispatch, registry } ) => {
const distractionFreeMode = registry
.select( preferencesStore )
.get( 'core/edit-site', 'distractionFree' );
if ( ! distractionFreeMode ) {
registry.batch( () => {
registry
.dispatch( preferencesStore )
.set( 'core/edit-site', 'fixedToolbar', false );
dispatch.setIsInserterOpened( false );
dispatch.setIsListViewOpened( false );
dispatch.closeGeneralSidebar();
} );
}
registry.batch( () => {
registry
.dispatch( preferencesStore )
.set(
'core/edit-site',
'distractionFree',
! distractionFreeMode
);
registry
.dispatch( noticesStore )
.createInfoNotice(
distractionFreeMode
? __( 'Distraction free off.' )
: __( 'Distraction free on.' ),
{
id: 'core/edit-site/distraction-free-mode/notice',
type: 'snackbar',
}
);
} );
};
Loading
Loading