Skip to content

Commit

Permalink
Editor: Unify the distraction free preference (#57590)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Jan 5, 2024
1 parent 3d5434d commit 077ac08
Show file tree
Hide file tree
Showing 20 changed files with 48 additions and 80 deletions.
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/header/writing-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function WritingMenu() {
};

const turnOffDistractionFree = () => {
setPreference( 'core/edit-post', 'distractionFree', false );
setPreference( 'core', 'distractionFree', false );
};

const isLargeViewport = useViewportMatch( 'medium' );
Expand All @@ -57,7 +57,7 @@ function WritingMenu() {
messageDeactivated={ __( 'Top toolbar deactivated' ) }
/>
<PreferenceToggleMenuItem
scope="core/edit-post"
scope="core"
name="distractionFree"
onToggle={ toggleDistractionFree }
label={ __( 'Distraction free' ) }
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-post/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,7 @@ function Layout() {
keyboardShortcutsStore
).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree:
select( editPostStore ).isFeatureActive( 'distractionFree' ),
isDistractionFree: get( 'core', 'distractionFree' ),
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
showMostUsedBlocks:
select( editPostStore ).isFeatureActive( 'mostUsedBlocks' ),
Expand Down
9 changes: 5 additions & 4 deletions packages/edit-post/src/components/preferences-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ export default function EditPostPreferencesModal() {
const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
( select ) => {
const { getEditorSettings } = select( editorStore );
const { getEditorMode, isFeatureActive } = select( editPostStore );
const { getEditorMode } = select( editPostStore );
const { get } = select( preferencesStore );
const modalActive = select( interfaceStore ).isModalActive(
PREFERENCES_MODAL_NAME
);
const mode = getEditorMode();
const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
const isDistractionFreeEnabled =
isFeatureActive( 'distractionFree' );
const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
return [
modalActive,
! isDistractionFreeEnabled &&
Expand All @@ -77,7 +77,7 @@ export default function EditPostPreferencesModal() {
};

const turnOffDistractionFree = () => {
setPreference( 'core/edit-post', 'distractionFree', false );
setPreference( 'core', 'distractionFree', false );
};

const sections = useMemo(
Expand Down Expand Up @@ -195,6 +195,7 @@ export default function EditPostPreferencesModal() {
label={ __( 'Top toolbar' ) }
/>
<EnableFeature
scope="core"
featureName="distractionFree"
onToggle={ toggleDistractionFree }
help={ __(
Expand Down
4 changes: 0 additions & 4 deletions packages/edit-post/src/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ function Editor( {
);

const {
isDistractionFree,
hasInlineToolbar,
post,
preferredStyleVariations,
Expand Down Expand Up @@ -85,7 +84,6 @@ function Editor( {
getPostType( currentPost.postType )?.viewable ?? false;
const canEditTemplate = canUser( 'create', 'templates' );
return {
isDistractionFree: isFeatureActive( 'distractionFree' ),
hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
preferredStyleVariations: select( preferencesStore ).get(
'core/edit-post',
Expand Down Expand Up @@ -114,7 +112,6 @@ function Editor( {
value: preferredStyleVariations,
onChange: updatePreferredStyleVariations,
},
isDistractionFree,
hasInlineToolbar,

// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
Expand All @@ -141,7 +138,6 @@ function Editor( {
}, [
settings,
hasInlineToolbar,
isDistractionFree,
hiddenBlockTypes,
blockTypes,
preferredStyleVariations,
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/hooks/commands/use-common-commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function useCommonCommands() {
isPublishSidebarEnabled:
select( editorStore ).isPublishSidebarEnabled(),
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
isDistractionFree: get( editPostStore.name, 'distractionFree' ),
isDistractionFree: get( 'core', 'distractionFree' ),
};
}, [] );
const { toggle } = useDispatch( preferencesStore );
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-post/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
import './hooks';
import './plugins';
import Editor from './editor';
import { store as editPostStore } from './store';
import { unlock } from './lock-unlock';

const { PluginPostExcerpt: __experimentalPluginPostExcerpt } =
Expand Down Expand Up @@ -80,7 +79,7 @@ export function initializeEditor(
// If `distractionFree` mode is enabled, the block list view should not be open.
if (
select( preferencesStore ).get( 'core', 'showListViewByDefault' ) &&
! select( editPostStore ).isFeatureActive( 'distractionFree' )
! select( preferencesStore ).get( 'core', 'distractionFree' )
) {
dispatch( editorStore ).setIsListViewOpened( true );
}
Expand Down
14 changes: 4 additions & 10 deletions packages/edit-post/src/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const openGeneralSidebar =
( { dispatch, registry } ) => {
const isDistractionFree = registry
.select( preferencesStore )
.get( 'core/edit-post', 'distractionFree' );
.get( 'core', 'distractionFree' );
if ( isDistractionFree ) {
dispatch.toggleDistractionFree();
}
Expand Down Expand Up @@ -205,9 +205,7 @@ export const switchEditorMode =

if (
mode === 'text' &&
registry
.select( preferencesStore )
.get( 'core/edit-post', 'distractionFree' )
registry.select( preferencesStore ).get( 'core', 'distractionFree' )
) {
dispatch.toggleDistractionFree();
}
Expand Down Expand Up @@ -580,7 +578,7 @@ export const toggleDistractionFree =
( { dispatch, registry } ) => {
const isDistractionFree = registry
.select( preferencesStore )
.get( 'core/edit-post', 'distractionFree' );
.get( 'core', 'distractionFree' );
if ( ! isDistractionFree ) {
registry.batch( () => {
registry
Expand All @@ -594,11 +592,7 @@ export const toggleDistractionFree =
registry.batch( () => {
registry
.dispatch( preferencesStore )
.set(
'core/edit-post',
'distractionFree',
! isDistractionFree
);
.set( 'core', 'distractionFree', ! isDistractionFree );
registry
.dispatch( noticesStore )
.createInfoNotice(
Expand Down
12 changes: 5 additions & 7 deletions packages/edit-post/src/store/test/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,12 @@ describe( 'actions', () => {
it( 'openGeneralSidebar - should turn off distraction free mode when opening a general sidebar', () => {
registry
.dispatch( preferencesStore )
.set( 'core/edit-post', 'distractionFree', true );
.set( 'core', 'distractionFree', true );
registry
.dispatch( editPostStore )
.openGeneralSidebar( 'edit-post/block' );
expect(
registry
.select( preferencesStore )
.get( 'core/edit-post', 'distractionFree' )
registry.select( preferencesStore ).get( 'core', 'distractionFree' )
).toBe( false );
} );

Expand Down Expand Up @@ -119,12 +117,12 @@ describe( 'actions', () => {
it( 'should turn off distraction free mode when switching to code editor', () => {
registry
.dispatch( preferencesStore )
.set( 'core/edit-post', 'distractionFree', true );
.set( 'core', 'distractionFree', true );
registry.dispatch( editPostStore ).switchEditorMode( 'text' );
expect(
registry
.select( preferencesStore )
.get( 'core/edit-post', 'distractionFree' )
.get( 'core', 'distractionFree' )
).toBe( false );
} );
} );
Expand Down Expand Up @@ -285,7 +283,7 @@ describe( 'actions', () => {
expect(
registry
.select( preferencesStore )
.get( 'core/edit-post', 'distractionFree' )
.get( 'core', 'distractionFree' )
).toBe( true );
} );
} );
Expand Down
20 changes: 2 additions & 18 deletions packages/edit-site/src/components/block-editor/use-site-editor-settings.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
/**
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useMemo } from '@wordpress/element';
import { store as coreStore } from '@wordpress/core-data';
import { privateApis as editorPrivateApis } from '@wordpress/editor';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
Expand Down Expand Up @@ -90,15 +88,8 @@ function useArchiveLabel( templateSlug ) {
}

export function useSpecificEditorSettings() {
const isLargeViewport = useViewportMatch( 'medium' );
const getPostLinkProps = usePostLinkProps();
const {
templateSlug,
isDistractionFree,
canvasMode,
settings,
postWithTemplate,
} = useSelect(
const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
( select ) => {
const {
getEditedPostType,
Expand All @@ -107,7 +98,6 @@ export function useSpecificEditorSettings() {
getCanvasMode,
getSettings,
} = unlock( select( editSiteStore ) );
const { get: getPreference } = select( preferencesStore );
const { getEditedEntityRecord } = select( coreStore );
const usedPostType = getEditedPostType();
const usedPostId = getEditedPostId();
Expand All @@ -119,16 +109,12 @@ export function useSpecificEditorSettings() {
const _context = getEditedPostContext();
return {
templateSlug: _record.slug,
isDistractionFree: !! getPreference(
'core/edit-site',
'distractionFree'
),
canvasMode: getCanvasMode(),
settings: getSettings(),
postWithTemplate: _context?.postId,
};
},
[ isLargeViewport ]
[]
);
const archiveLabels = useArchiveLabel( templateSlug );
const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
Expand All @@ -139,7 +125,6 @@ export function useSpecificEditorSettings() {
richEditingEnabled: true,
supportsTemplateMode: true,
focusMode: canvasMode !== 'view',
isDistractionFree,
defaultRenderingMode,
getPostLinkProps,
// I wonder if they should be set in the post editor too
Expand All @@ -149,7 +134,6 @@ export function useSpecificEditorSettings() {
}, [
settings,
canvasMode,
isDistractionFree,
defaultRenderingMode,
getPostLinkProps,
archiveLabels.archiveTypeLabel,
Expand Down
5 changes: 1 addition & 4 deletions packages/edit-site/src/components/header-edit-mode/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,7 @@ export default function HeaderEditMode() {
select( editSiteStore )
).getEditorCanvasContainerView(),
hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
isDistractionFree: getPreference(
editSiteStore.name,
'distractionFree'
),
isDistractionFree: getPreference( 'core', 'distractionFree' ),
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/header-edit-mode/more-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function MoreMenu( { showIconLabels } ) {
};

const turnOffDistractionFree = () => {
setPreference( 'core/edit-site', 'distractionFree', false );
setPreference( 'core', 'distractionFree', false );
};

return (
Expand Down Expand Up @@ -84,7 +84,7 @@ export default function MoreMenu( { showIconLabels } ) {
) }
/>
<PreferenceToggleMenuItem
scope="core/edit-site"
scope="core"
name="distractionFree"
onToggle={ toggleDistractionFree }
label={ __( 'Distraction free' ) }
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export default function Layout() {
'fixedToolbar'
),
isDistractionFree: select( preferencesStore ).get(
'core/edit-site',
'core',
'distractionFree'
),
hasBlockSelected:
Expand Down
9 changes: 5 additions & 4 deletions packages/edit-site/src/components/preferences-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
PreferencesModalSection,
store as interfaceStore,
} from '@wordpress/interface';
import { useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
import { store as preferencesStore } from '@wordpress/preferences';
Expand Down Expand Up @@ -52,10 +51,10 @@ export default function EditSitePreferencesModal() {
};

const turnOffDistractionFree = () => {
setPreference( 'core/edit-site', 'distractionFree', false );
setPreference( 'core', 'distractionFree', false );
};

const sections = useMemo( () => [
const sections = [
{
name: 'general',
tabLabel: __( 'General' ),
Expand Down Expand Up @@ -142,6 +141,7 @@ export default function EditSitePreferencesModal() {
) }
>
<EnableFeature
scope="core"
featureName="fixedToolbar"
onToggle={ turnOffDistractionFree }
help={ __(
Expand All @@ -150,6 +150,7 @@ export default function EditSitePreferencesModal() {
label={ __( 'Top toolbar' ) }
/>
<EnableFeature
scope="core"
featureName="distractionFree"
onToggle={ toggleDistractionFree }
help={ __(
Expand Down Expand Up @@ -201,7 +202,7 @@ export default function EditSitePreferencesModal() {
</>
),
},
] );
];
if ( ! isModalActive ) {
return null;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ function useEditUICommands() {
),
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
isListViewOpen: isListViewOpened(),
isDistractionFree: get( editSiteStore.name, 'distractionFree' ),
isDistractionFree: get( 'core', 'distractionFree' ),
};
}, [] );
const { openModal } = useDispatch( interfaceStore );
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ export function initializeEditor( id, settings ) {
// so that we won't trigger unnecessary re-renders with useEffect.
dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
editorMode: 'visual',
distractionFree: false,
welcomeGuide: true,
welcomeGuideStyles: true,
welcomeGuidePage: true,
Expand All @@ -62,6 +61,7 @@ export function initializeEditor( id, settings ) {

dispatch( preferencesStore ).setDefaults( 'core', {
allowRightClickOverrides: true,
distractionFree: false,
fixedToolbar: false,
focusMode: false,
inactivePanels: [],
Expand Down
Loading

1 comment on commit 077ac08

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 077ac08.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7426772003
📝 Reported issues:

Please sign in to comment.