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

Unify the Editor Mode Switcher, and enable it for template editing in the post editor #57868

Closed
wants to merge 5 commits into from
Closed

Unify the Editor Mode Switcher, and enable it for template editing in the post editor #57868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9fc6bb6
Refactor ModeSwitch component to editor package
talldan Jan 16, 2024
7443e16
Move the editor mode action to the editor store
talldan Jan 16, 2024
f216156
Use selector to get preference directly from preferences store
talldan Jan 16, 2024
09fa3fe
Fix import
talldan Jan 16, 2024
29c8a6e
Fix useDispatch for setEditorMode action
talldan Jan 16, 2024
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: 2 additions & 2 deletions docs/reference-guides/data/data-core-edit-post.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,11 +476,11 @@ _Parameters_

### switchEditorMode

Triggers an action used to switch editor mode.
Sets the editor mode (for text editing or visual editing).

_Parameters_

- _mode_ `string`: The editor mode.
- _mode_ `'visual'|'text'`: The mode, either 'visual' or 'text'.

### toggleDistractionFree

Expand Down
6 changes: 5 additions & 1 deletion 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 @@ -395,7 +395,11 @@ _Returns_

### switchEditorMode

Undocumented declaration.
Sets the editor mode (for text editing or visual editing).

_Parameters_

- _mode_ `'visual'|'text'`: The mode, either 'visual' or 'text'.

### toggleDistractionFree

Expand Down
98 changes: 24 additions & 74 deletions packages/edit-post/src/components/header/mode-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,40 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import {
privateApis as editorPrivateApis,
store as editorStore,
} from '@wordpress/editor';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as editorStore } from '@wordpress/editor';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';
import { unlock } from '../../../lock-unlock';

/**
* Set of available mode options.
*
* @type {Array}
*/
const MODES = [
{
value: 'visual',
label: __( 'Visual editor' ),
},
{
value: 'text',
label: __( 'Code editor' ),
},
];
const { ModeSwitcher: EditorModeSwitcher } = unlock( editorPrivateApis );

function ModeSwitcher() {
const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
useSelect(
( select ) => ( {
shortcut: select(
keyboardShortcutsStore
).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
isRichEditingEnabled:
select( editorStore ).getEditorSettings()
.richEditingEnabled,
isCodeEditingEnabled:
select( editorStore ).getEditorSettings()
.codeEditingEnabled,
mode: select( editPostStore ).getEditorMode(),
} ),
[]
);
const { switchEditorMode } = useDispatch( editPostStore );

let selectedMode = mode;
if ( ! isRichEditingEnabled && mode === 'visual' ) {
selectedMode = 'text';
}
if ( ! isCodeEditingEnabled && mode === 'text' ) {
selectedMode = 'visual';
}

const choices = MODES.map( ( choice ) => {
if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
choice = {
...choice,
disabled: true,
};
}
if ( ! isRichEditingEnabled && choice.value === 'visual' ) {
choice = {
...choice,
disabled: true,
info: __(
'You can enable the visual editor in your profile settings.'
),
};
}
if ( choice.value !== selectedMode && ! choice.disabled ) {
return { ...choice, shortcut };
}
return choice;
} );
const { shortcut, isRichEditingEnabled, isCodeEditingEnabled } = useSelect(
( select ) => ( {
shortcut: select(
keyboardShortcutsStore
).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
isRichEditingEnabled:
select( editorStore ).getEditorSettings().richEditingEnabled,
isCodeEditingEnabled:
select( editorStore ).getEditorSettings().codeEditingEnabled,
} ),
[]
);

return (
<MenuGroup label={ __( 'Editor' ) }>
<MenuItemsChoice
choices={ choices }
value={ selectedMode }
onSelect={ switchEditorMode }
/>
</MenuGroup>
<EditorModeSwitcher
shortcut={ shortcut }
isRichEditingEnabled={ isRichEditingEnabled }
isCodeEditingEnabled={ isCodeEditingEnabled }
/>
);
}

Expand Down
29 changes: 4 additions & 25 deletions packages/edit-post/src/store/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { store as interfaceStore } from '@wordpress/interface';
import { store as preferencesStore } from '@wordpress/preferences';
import { speak } from '@wordpress/a11y';
import { store as noticesStore } from '@wordpress/notices';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as editorStore } from '@wordpress/editor';
import deprecated from '@wordpress/deprecated';
import { addFilter } from '@wordpress/hooks';
Expand Down Expand Up @@ -188,33 +186,14 @@ export const toggleFeature =
.toggle( 'core/edit-post', feature );

/**
* Triggers an action used to switch editor mode.
* Sets the editor mode (for text editing or visual editing).
*
* @param {string} mode The editor mode.
* @param {'visual'|'text'} mode The mode, either 'visual' or 'text'.
*/
export const switchEditorMode =
( mode ) =>
( { dispatch, registry } ) => {
registry.dispatch( preferencesStore ).set( 'core', 'editorMode', mode );

// Unselect blocks when we switch to the code editor.
if ( mode !== 'visual' ) {
registry.dispatch( blockEditorStore ).clearSelectedBlock();
}

if (
mode === 'text' &&
registry.select( preferencesStore ).get( 'core', 'distractionFree' )
) {
dispatch.toggleDistractionFree();
}

const message =
mode === 'visual'
? __( 'Visual editor selected' )
: __( 'Code editor selected' );
speak( message, 'assertive' );
};
( { registry } ) =>
registry.dispatch( editorStore ).setEditorMode( mode );

/**
* Triggers an action object used to toggle a plugin name flag.
Expand Down
53 changes: 10 additions & 43 deletions packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,27 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import { privateApis as editorPrivateApis } from '@wordpress/editor';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';

/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../../store';
import { unlock } from '../../../lock-unlock';

/**
* Set of available mode options.
*
* @type {Array}
*/
const MODES = [
{
value: 'visual',
label: __( 'Visual editor' ),
},
{
value: 'text',
label: __( 'Code editor' ),
},
];
const { ModeSwitcher: EditorModeSwitcher } = unlock( editorPrivateApis );

function ModeSwitcher() {
const { shortcut, mode } = useSelect(
( select ) => ( {
shortcut: select(
keyboardShortcutsStore
).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
mode: select( editSiteStore ).getEditorMode(),
} ),
const shortcut = useSelect(
( select ) =>
select( keyboardShortcutsStore ).getShortcutRepresentation(
'core/edit-site/toggle-mode'
),
[]
);
const { switchEditorMode } = useDispatch( editSiteStore );

const choices = MODES.map( ( choice ) => {
if ( choice.value !== mode ) {
return { ...choice, shortcut };
}
return choice;
} );

return (
<MenuGroup label={ __( 'Editor' ) }>
<MenuItemsChoice
choices={ choices }
value={ mode }
onSelect={ switchEditorMode }
/>
</MenuGroup>
);
return <EditorModeSwitcher shortcut={ shortcut } />;
}

export default ModeSwitcher;
30 changes: 7 additions & 23 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 @@ -11,7 +11,6 @@ import { store as coreStore } from '@wordpress/core-data';
import { store as interfaceStore } from '@wordpress/interface';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as editorStore } from '@wordpress/editor';
import { speak } from '@wordpress/a11y';
import { store as preferencesStore } from '@wordpress/preferences';

/**
Expand Down Expand Up @@ -500,30 +499,15 @@ export const closeGeneralSidebar =
.disableComplementaryArea( editSiteStoreName );
};

/**
* Sets the editor mode (for text editing or visual editing).
*
* @param {'visual'|'text'} mode The mode, either 'visual' or 'text'.
*/
export const switchEditorMode =
( mode ) =>
( { dispatch, registry } ) => {
registry
.dispatch( 'core/preferences' )
.set( 'core', 'editorMode', mode );

// Unselect blocks when we switch to a non visual mode.
if ( mode !== 'visual' ) {
registry.dispatch( blockEditorStore ).clearSelectedBlock();
}

if ( mode === 'visual' ) {
speak( __( 'Visual editor selected' ), 'assertive' );
} else if ( mode === 'text' ) {
const isDistractionFree = registry
.select( preferencesStore )
.get( 'core', 'distractionFree' );
if ( isDistractionFree ) {
dispatch.toggleDistractionFree();
}
speak( __( 'Code editor selected' ), 'assertive' );
}
};
( { registry } ) =>
registry.dispatch( editorStore ).setEditorMode( mode );

/**
* Sets whether or not the editor allows only page content to be edited.
Expand Down
87 changes: 87 additions & 0 deletions packages/editor/src/components/mode-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';

/**
* Set of available mode options.
*
* @type {Array}
*/
const MODES = [
{
value: 'visual',
label: __( 'Visual editor' ),
},
{
value: 'text',
label: __( 'Code editor' ),
},
];

function ModeSwitcher( {
shortcut,
isCodeEditingEnabled = true,
isRichEditingEnabled = true,
} ) {
const { mode } = useSelect(
( select ) => ( {
mode:
select( preferencesStore ).get( 'core', 'editorMode' ) ??
'visual',
} ),
[]
);
const { setEditorMode } = unlock( useDispatch( editorStore ) );

let selectedMode = mode;
if ( ! isRichEditingEnabled && mode === 'visual' ) {
selectedMode = 'text';
}
if ( ! isCodeEditingEnabled && mode === 'text' ) {
selectedMode = 'visual';
}

const choices = MODES.map( ( choice ) => {
if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
choice = {
...choice,
disabled: true,
};
}
if ( ! isRichEditingEnabled && choice.value === 'visual' ) {
choice = {
...choice,
disabled: true,
info: __(
'You can enable the visual editor in your profile settings.'
),
};
}
if ( choice.value !== selectedMode && ! choice.disabled ) {
return { ...choice, shortcut };
}
return choice;
} );

return (
<MenuGroup label={ __( 'Editor' ) }>
<MenuItemsChoice
choices={ choices }
value={ mode }
onSelect={ setEditorMode }
/>
</MenuGroup>
);
}

export default ModeSwitcher;
Loading
Loading