Adds a new option to core/editor to disable code editing (#14932)

* adds a new option to core/editor to disable code editing

* disabled the switching KBD shortcut when codeEditing is disabled

* updates block toggle tests

* adds default true for code editing, adds test for code editor disabled, some code cleanup

* adds overriding the editor mode preference based on editor settings serverd by server

* adds documentation for two options which can be set by a WP plugin

* Update docs/designers-developers/developers/filters/editor-filters.md

Co-Authored-By: draganescu <me@andreidraganescu.info>

* Update docs/designers-developers/developers/filters/editor-filters.md

Co-Authored-By: draganescu <me@andreidraganescu.info>

* Update docs/designers-developers/developers/filters/editor-filters.md

Co-Authored-By: draganescu <me@andreidraganescu.info>

* Update docs/designers-developers/developers/filters/editor-filters.md

Co-Authored-By: draganescu <me@andreidraganescu.info>

* Update docs/designers-developers/developers/filters/editor-filters.md

doc edit

Co-Authored-By: Pascal Birchler <pascal.birchler@gmail.com>

* undo the ignore preference

docs/designers-developers/developers/filters/editor-filters.md

@@ -1,5 +1,4 @@
 # Editor Filters (Experimental)
-
 To modify the behavior of the editor experience, the following Filters are exposed:
 
 ### `editor.PostFeaturedImage.imageSize`
@@ -30,3 +29,24 @@ var customPreviewMessage = function() {
 wp.hooks.addFilter( 'editor.PostPreview.interstitialMarkup', 'my-plugin/custom-preview-message', customPreviewMessage );
 ```
 
+## Editor settings
+
+### `block_editor_settings`
+This is a PHP filter which is applied before sending settings to the WordPress block editor.
+
+You may find details about this filter [on its WordPress Code Reference page](https://developer.wordpress.org/reference/hooks/block_editor_settings/).
+
+The filter will send any setting to the initialized Editor, which means any editor setting that is used to configure the editor at initialisation can be filtered by a PHP WordPress plugin before being sent. 
+
+### Available default editor settings
+
+#### `richEditingEnabled`
+If it is `true` the user can edit the content using the Visual Editor.
+
+It is set by default to the return value of the [`user_can_richedit`](https://developer.wordpress.org/reference/functions/user_can_richedit/) function. It checks if the user can access the Visual Editor and whether it’s supported by the user’s browser.
+
+
+#### `codeEditingEnabled`
+Default `true`. Indicates whether the user can access the Code Editor **in addition** to the Visual Editor.
+
+If set to false the user will not be able to switch between Visual and Code editor. The option in the settings menu will not be available and the keyboard shortcut for switching editor types will not fire.  

packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js

@@ -12,8 +12,8 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-export function BlockModeToggle( { blockType, mode, onToggleMode, small = false } ) {
-	if ( ! hasBlockSupport( blockType, 'html', true ) ) {
+export function BlockModeToggle( { blockType, mode, onToggleMode, small = false, isCodeEditingEnabled = true } ) {
+	if ( ! hasBlockSupport( blockType, 'html', true ) || ! isCodeEditingEnabled ) {
 		return null;
 	}
 
@@ -36,10 +36,12 @@ export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const { getBlock, getBlockMode } = select( 'core/block-editor' );
 		const block = getBlock( clientId );
+		const isCodeEditingEnabled = select( 'core/editor' ).getEditorSettings().codeEditingEnabled;
 
 		return {
 			mode: getBlockMode( clientId ),
 			blockType: block ? getBlockType( block.name ) : null,
+			isCodeEditingEnabled,
 		};
 	} ),
 	withDispatch( ( dispatch, { onToggle = noop, clientId } ) => ( {

packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js

@@ -46,4 +46,16 @@ describe( 'BlockModeToggle', () => {
 
 		expect( text ).toEqual( 'Edit visually' );
 	} );
+
+	it( 'should not render the Visual mode button if code editing is disabled', () => {
+		const wrapper = getShallowRenderOutput(
+			<BlockModeToggle
+				blockType={ { supports: { html: true } } }
+				mode="html"
+				isCodeEditingEnabled={ false }
+			/>
+		);
+
+		expect( wrapper ).toBe( null );
+	} );
 } );

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

@@ -50,9 +50,10 @@ function ModeSwitcher( { onSwitch, mode } ) {
 export default compose( [
 	withSelect( ( select ) => ( {
 		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
+		isCodeEditingEnabled: select( 'core/editor' ).getEditorSettings().codeEditingEnabled,
 		mode: select( 'core/edit-post' ).getEditorMode(),
 	} ) ),
-	ifCondition( ( { isRichEditingEnabled } ) => isRichEditingEnabled ),
+	ifCondition( ( { isRichEditingEnabled, isCodeEditingEnabled } ) => isRichEditingEnabled && isCodeEditingEnabled ),
 	withDispatch( ( dispatch ) => ( {
 		onSwitch( mode ) {
 			dispatch( 'core/edit-post' ).switchEditorMode( mode );

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

@@ -20,8 +20,8 @@ class EditorModeKeyboardShortcuts extends Component {
 	}
 
 	toggleMode() {
-		const { mode, switchMode, isRichEditingEnabled } = this.props;
-		if ( ! isRichEditingEnabled ) {
+		const { mode, switchMode, isModeSwitchEnabled } = this.props;
+		if ( ! isModeSwitchEnabled ) {
 			return;
 		}
 		switchMode( mode === 'visual' ? 'text' : 'visual' );
@@ -54,11 +54,15 @@ class EditorModeKeyboardShortcuts extends Component {
 }
 
 export default compose( [
-	withSelect( ( select ) => ( {
-		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
-		mode: select( 'core/edit-post' ).getEditorMode(),
-		isEditorSidebarOpen: select( 'core/edit-post' ).isEditorSidebarOpened(),
-	} ) ),
+	withSelect( ( select ) => {
+		const { richEditingEnabled, codeEditingEnabled } = select( 'core/editor' ).getEditorSettings();
+
+		return {
+			isModeSwitchEnabled: richEditingEnabled && codeEditingEnabled,
+			mode: select( 'core/edit-post' ).getEditorMode(),
+			isEditorSidebarOpen: select( 'core/edit-post' ).isEditorSidebarOpened(),
+		};
+	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => ( {
 		switchMode( mode ) {
 			dispatch( 'core/edit-post' ).switchEditorMode( mode );

packages/editor/src/store/defaults.js

@@ -20,6 +20,7 @@ export const INITIAL_EDITS_DEFAULTS = {};
  *
  *  allowedBlockTypes  boolean|Array Allowed block types
  *  richEditingEnabled boolean       Whether rich editing is enabled or not
+ *  codeEditingEnabled boolean       Whether code editing is enabled or not
  *  enableCustomFields boolean       Whether the WordPress custom fields are enabled or not
  *  autosaveInterval   number        Autosave Interval
  *  availableTemplates array?        The available post templates
@@ -31,6 +32,7 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 	...SETTINGS_DEFAULTS,
 
 	richEditingEnabled: true,
+	codeEditingEnabled: true,
 	enableCustomFields: false,
 };